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

相关推荐
Zz_waiting.7 分钟前
Javaweb - 14.6 - Vue3 数据交互 Axios
开发语言·前端·javascript·vue·axios
切糕师学AI19 分钟前
前后端分离架构中,Node.js的底层实现原理与线程池饥饿问题解析
前端·vue.js·node.js
妄小闲38 分钟前
网页设计模板 HTML源码网站模板下载
前端·html
icebreaker1 小时前
tailwindcss 究竟比 unocss 快多少?
前端·css·github
卢叁1 小时前
Flutter之自定义TabIndicator
前端·flutter
每天吃饭的羊1 小时前
state和ref
前端·javascript·react.js
GEO_YScsn1 小时前
Vite:Next-Gen Frontend Tooling 的高效之道——从原理到实践的性能革命
前端·javascript·css·tensorflow
GISer_Jing1 小时前
滴滴二面(准备二)
前端·javascript·vue·reactjs
ningmengjing_1 小时前
webpack打包方式
前端·爬虫·webpack·node.js·逆向
Yuner20001 小时前
Webpack开发:从入门到精通
前端·webpack·node.js