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

相关推荐
10年前端老司机2 小时前
React无限级菜单:一个项目带你突破技术瓶颈
前端·javascript·react.js
阿芯爱编程7 小时前
2025前端面试题
前端·面试
前端小趴菜058 小时前
React - createPortal
前端·vue.js·react.js
晓13138 小时前
JavaScript加强篇——第四章 日期对象与DOM节点(基础)
开发语言·前端·javascript
菜包eo8 小时前
如何设置直播间的观看门槛,让直播间安全有效地运行?
前端·安全·音视频
烛阴9 小时前
JavaScript函数参数完全指南:从基础到高级技巧,一网打尽!
前端·javascript
chao_78910 小时前
frame 与新窗口切换操作【selenium 】
前端·javascript·css·selenium·测试工具·自动化·html
天蓝色的鱼鱼10 小时前
从零实现浏览器摄像头控制与视频录制:基于原生 JavaScript 的完整指南
前端·javascript
三原10 小时前
7000块帮朋友做了2个小程序加一个后台管理系统,值不值?
前端·vue.js·微信小程序
popoxf11 小时前
在新版本的微信开发者工具中使用npm包
前端·npm·node.js