After this lesson you will be able to:
- You can explain what a component library is and how different it is from a style library.
- Add and configure a component library.
- Use and setup a component of antd library
In web applications we have worked styles in two different ways, the first is writing our styles by hand, by ourselves. The second option has been to opt for a library / framework of styles such as Bootstrap, Bulma, etc. This gives us the ability to focus on the functionality and business logic of the applications. But just as our frontend development has advanced, style libraries are being left behind giving way to UI component libraries.
A component library is a package that contains a series of previously generated React components, unlike style libraries that add styles based on html classes and functionality with Jquery, the component libraries are elements with everything needed to work by itself The UI components contain the markup (html / jsx), styles (css) and logic (js) that they need to look and work well.
// Styles library/framework code
<button class='btn btn-primary'>Send</button>
// Component library code
<Button primary>Send</Button>
When style libraries needed additional visual properties, such as button type, column size, or other property, we added an extra class. Now react introduces a better way to handle the styles based on the props of the components and so the code is greatly reduced and the markup looks very clean.
Antd is a react UI components library based on a design system elegant and tested, with a great amount of styled and functional components.
In your react project:
$ npm install antd
Import the antd.css
in the index.js
file:
import 'antd/dist/antd.css'
Now you can start to use UI components from the antd library.
import { Button, Card } from "antd";
const { Meta } = Card;
const Main = () => (
<main>
<h1>React UI Components</h1>
<Button type='primary'>Components List</Button>
<Card
hoverable
style={{ width: 240 }}
cover={<img alt="example" src="https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png" />}
>
<Meta
title="Europe Street beat"
description="www.instagram.com"
/>
</Card>
</main>
);
The result should look like this:
In the antd grid system, they define the frame outside the information area based on row and column, to ensure that every area can have stable arrangement.
the grid layout uses a 24 grid layout to define the width of each "box", but does not rigidly adhere to the grid layout.
import {Button, Row, Col} from 'antd'
const Main = () => (
<main>
<Row>
<Col span={12} style={{background: 'red'}}>Col</Col>
<Col span={12} style={{background: 'blue'}}>Col</Col>
</Row>
</main>
)
You can use the gutter property of Row as grid spacing.
import {Button, Row, Col} from 'antd'
const Main = () => (
<main>
<Row gutter={16}>
<Col className="gutter-row" span={12}>
<div
className="gutter-box"
style={{background: 'red'}}
>
col-6
</div>
</Col>
<Col className="gutter-row" span={12}>
<div
className="gutter-box"
style={{background: 'blue'}}
>
col-6
</div>
</Col>
</Row>
</main>
)
Handling the overall layout of a page.
import { Layout, Menu } from "antd";
const {
Header, Footer, Sider, Content,
} = Layout;
const Main = () => (
<main>
<Layout>
<Header>
<Menu
theme="dark"
mode="horizontal"
defaultSelectedKeys={['1']}
style={{ lineHeight: '64px' }}
>
<Menu.Item key="1">nav 1</Menu.Item>
<Menu.Item key="2">nav 2</Menu.Item>
<Menu.Item key="3">nav 3</Menu.Item>
</Menu>
</Header>
<Content>
App Content
</Content>
<Footer>Footer</Footer>
</Layout>
</main>
);
There are a lot of Layouts already created at antd layout page
In this lesson, you learned how to distinguish between the styles library and the component library and how a library of UI components works. Learning also what it is and how a design is installed, a library with many incredible components, we saw very few, but the principle is the same. Try to integrate into an exercise for more antd components.