React 生态应用 - Ant Design

目录

扩展学习资料

创建项目antd-demo

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

相关推荐
mCell18 小时前
GSAP ScrollTrigger 详解
前端·javascript·动效
gnip18 小时前
Node.js 子进程:child_process
前端·javascript
excel21 小时前
为什么在 Three.js 中平面能产生“起伏效果”?
前端
excel1 天前
Node.js 断言与测试框架示例对比
前端
天蓝色的鱼鱼1 天前
前端开发者的组件设计之痛:为什么我的组件总是难以维护?
前端·react.js
codingandsleeping1 天前
使用orval自动拉取swagger文档并生成ts接口
前端·javascript
石金龙1 天前
[译] Composition in CSS
前端·css
白水清风1 天前
微前端学习记录(qiankun、wujie、micro-app)
前端·javascript·前端工程化
Ticnix1 天前
函数封装实现Echarts多表渲染/叠加渲染
前端·echarts
用户22152044278001 天前
new、原型和原型链浅析
前端·javascript