React 生态应用 - Ant Design

目录

扩展学习资料

创建项目antd-demo

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

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

组件使用示例

页面布局

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 的按钮组件。

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

const App = () => (
  

    Button
  
);

export default App;

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

@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 很多产品集合成的做数据可视化的一些应用