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

相关推荐
骑自行车的码农6 分钟前
React短文系列 遍历fiber树 App的创建
前端·react.js
AskSky9 分钟前
为了搞一个完美的健身APP,我真是费尽心机
前端
斯~内克15 分钟前
基于Vue.js和PDF-Lib的条形码生成与批量打印方案
前端·vue.js·pdf
阴阳怪气乌托邦16 分钟前
别再啃OA代码了!低代码"搭积木"式搞数智化,我直接少写500行
前端·低代码
beelan20 分钟前
v-on的思考
前端
山河木马23 分钟前
前端学习C++之:.h(.hpp)与.cpp文件
前端·javascript·c++
用户92724725021923 分钟前
PHP + CSS + JS + JSON 数据采集与展示系统,支持伪静态
前端
努力只为躺平27 分钟前
一文搞懂 Promise 并发控制:批量执行 vs 最大并发数,实用场景全解析!
前端·javascript
李大玄29 分钟前
Google浏览器拓展工具 "GU"->google Utils
前端·javascript·github
爱编程的喵30 分钟前
从DOM0到事件委托:揭秘JavaScript事件机制的性能密码
前端·javascript·dom