【React2】AntD组件库

antd 是基于 Ant Design 设计体系的 React UI 组件库，主要用于研发企业级中后台产品。

image.png

使用 npm 或 yarn 安装antd

我们推荐使用 npm 或 yarn 的方式进行开发，不仅可在开发环境轻松调试，也可放心地在生产环境打包部署使用，享受整个生态圈和工具链带来的诸多好处。

npm install antd --save

yarn add antd

---

引入样式：

import 'antd/dist/antd.css';

---

小案例：

image.png

import React, { Component } from 'react'
import { Input, Button, List, Typography } from 'antd';
import 'antd/dist/antd.css';

const data = [
    'Racing car sprays burning fuel into crowd.',
    'Japanese princess to wed commoner.',
    'Los Angeles battles huge wildfires.',
];

export class TodoList extends Component {
    render() {
        return (
        <div style={{margin: 10}}>
            <div>
                <Input placeholder="请输入" style={{width: 300, marginRight: 10}}/>
                <Button type="primary" > 提交</Button>
            </div>
            <List
                style={{width: 300, marginTop: 10}}
                bordered
                dataSource={data}
                renderItem={item => (
                    <List.Item>{item}</List.Item>
                )}
            />
        </div>
        )
    }
}

export default TodoList