“开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 8 天，点击查看活动详情”

1. 简介

在我们的开发过程中一般情况下都会用到第三方库，因为使用这些第三方库可以使我们效率增倍，同时开发时需要学习的东西也就更多，这次学习了解到了一个非常优秀的企业级的第三方UI库 Ant Design 5.0

助力设计开发者「更灵活」地搭建出「更美」的产品，让用户「快乐工作」～

2. 代码学习

1. 安装

pnpm install antd --save

2. 引入依赖文件

依赖样式
```
import 'antd/dist/reset.css';
```
导入需要用的的第三方组件

import { Button, DatePicker, Space } from "antd";

在我们的组件中使用

const App = () => {
  return (
    <div>
      <Space>
        <DatePicker />
        <Button type="primary">按钮</Button>
      </Space>
    </div>
  );
};

这样我们就简单使用了

React 的方式直接使用 antd 组件

import {ConfigProvider, DatePicker, message, Space} from "antd";
import {useState} from "react";
import {Dayjs} from 'dayjs';

function App() {

    const [date, setDate] = useState<Dayjs>();
    const handleChange = (value: Dayjs) => {
        message.info(`您选择的日期是: ${value ? value.format('YYYY年MM月DD日') : '未选择'}`);
        setDate(value);
    };
    return (
        <ConfigProvider>
            <div style={{width: 400, margin: '100px auto'}}>
                <DatePicker onChange={(val: Dayjs) => handleChange(val)}/>
                <div style={{marginTop: 16}}>
                    当前日期：{date ? date.format('YYYY年MM月DD日') : '未选择'}
                </div>
            </div>
        </ConfigProvider>
    );
}

export default App

直接把antd的组件做为容易和div一样使用
这里需要安装dayjs

按需引入

antd中直接引入 import { Button } from 'antd' 就会有按需加载的效果。

import {ConfigProvider, Button} from "antd";

function App() {

    return (
        <ConfigProvider>
            <Button>点击按钮</Button>
        </ConfigProvider>
    );
}

export default App

以上就是只用到 ConfigProvider, Button 组件

antd 中已经帮我解决了很多开发中需要用到的组件，例如数据渲染常用的Table组件，提交数据常用的表单组件。

    const App = () => (
      <Form>
        <Form.Item
          label="Username"
          name="username"
        >
          <Input />
        </Form.Item>

        <Form.Item
          label="Password"
          name="password"
        >
          <Input.Password />
        </Form.Item>

        <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
          <Button type="primary" htmlType="submit">
            Submit
          </Button>
        </Form.Item>
      </Form>
    );

Table组件的话只需要传递一个数据源，并配置表头，超简便的就可以得到一个响应式的表格。

 const data: DataType[] = [
   {
     key: '1',
     name: 'John Brown',
     age: 32,
     address: 'New York No. 1 Lake Park',
     tags: ['nice', 'developer'],
   },
   {
     key: '2',
     name: 'Jim Green',
     age: 42,
     address: 'London No. 1 Lake Park',
     tags: ['loser'],
   },
   {
     key: '3',
     name: 'Joe Black',
     age: 32,
     address: 'Sydney No. 1 Lake Park',
     tags: ['cool', 'teacher'],
   },
 ];

 const App: React.FC = () => <Table columns={columns} dataSource={data} />;

3.总结

本次学习的一个 antd UI组件库，是一个款高颜值，简单快捷开发的组件库，但是文档不太友好，可以熟悉这个之后再去学习antdPro, 一切基于配置的框架。

学习React 的第八天 React + AntdUI

1. 简介

助力设计开发者「更灵活」地搭建出「更美」的产品，让用户「快乐工作」～

2. 代码学习

1. 安装

2. 引入依赖文件

3.总结