React 生态应用 - Ant Design

[修改 src/App.js，引入 antd 的按钮组件。](#修改 src/App.js，引入 antd 的按钮组件。)

[修改 src/App.css，在文件顶部引入 antd/dist/antd.css。](#修改 src/App.css，在文件顶部引入 antd/dist/antd.css。)

[Ant Design生态](#Ant Design生态)

扩展学习资料

|---------------------|---------------------------------------------------------------------------------------------------------------------------------------------------|
| 资料名称 | 链接 |
| Ant Design of React | Ant Design of React - Ant Design |
| Ant Design Pro | https://pro.ant.design/docs/getting-started-cn |

创建项目antd-demo

ant-design使用文档

复制代码

yarn create react-app antd-demo
cd antd-demo
yarn start
现在从 yarn 或 npm 安装并引入 antd。
yarn add antd

修改 src/App.js，引入 antd 的按钮组件。

javascript 复制代码

import React from 'react';
import { Button } from 'antd';
import './App.css';

const App = () => (
  <div className="App">
    <Button type="primary">Button</Button>
  </div>
);

export default App;

修改 src/App.css，在文件顶部引入 antd/dist/antd.css。

javascript 复制代码

@import '~antd/dist/antd.css';

组件使用示例

antd组件文档

页面布局

Layout：布局容器，其下可嵌套 Header Sider Content Footer 或 Layout 本身，可以放在任何父容器中。
Header：顶部布局，自带默认样式，其下可嵌套任何元素，只能放在 Layout 中。
Sider：侧边栏，自带默认样式及基本功能，其下可嵌套任何元素，只能放在 Layout 中。
Content：内容部分，自带默认样式，其下可嵌套任何元素，只能放在 Layout 中。
Footer：底部布局，自带默认样式，其下可嵌套任何元素，只能放在 Layout 中。

Ant Design生态

DvaJS不包含antd UI层的展现，可以在DvaJS这个框架的基础下，去做一个AntDesign UI 层的构建，主要是基于redux【状态管理工具】轻量数据流解决方案

UmiJS构建大型应用的一个框架【进阶版的create react脚手架工具】，再此基础上可以构建Ant Design Pro框架

Ant Design Pro 是Ant Design的进阶版

Ant Design Motion 专注于在reat框架中使用动画的一个库

AntV 很多产品集合成的做数据可视化的一些应用