如何在React项目中使用AntDesign
目录
- 0.前言
- 1.AntDesign是什么？
- 2.AntDesign如何使用？
- 3.如何具体使用AntDdesign的组件
- 3-1.如何使用 antd 的Table组件
- 3-2.如何使用 antd 的Button组件
- 4.后续
0.前言 我们在后台管理系统React项目开发中会有Table表格、Form表单、List列表、Button按钮等组件，这个时候我们可以使用AntDesign来减少开发中不必要的样式问题。
1.AntDesign是什么？
Ant Design 是一个 UI 设计语言，是一套提炼和应用于企业级后台产品的交互语言和视觉体系
2.AntDesign如何使用？ 首先你要安装
yarn或npm或cnpm$ yarn create react-app antd-demo # or $ npx create-react-app antd-demo# or$ npm create react-app antd-demo // 若网络缓慢可使用cnpm淘宝镜像$ cnpm create react-app antd-demo
工具会自动初始化一个脚手架并安装 React 项目的各种必要依赖
然后我们进入项目并启动。
$ cd antd-demo$ yarn/npm/cnpm start
此时浏览器会访问 http://localhost:3000/ ，看到
Welcome to React 的界面就算成功了。而后需要引入AntD
现在从 yarn 或 npm 安装并引入 antd。
$ yarn add antd
3.如何具体使用AntDdesign的组件
通用步骤是，先用import引入antd的具体某一个组件，然后根据规则及API使用例：
3-1.如何使用 antd 的Table组件
import React from 'react'; import { Table } from 'antd'; import './App.css'; const columns = [{ title: 'Name',dataIndex: 'name',key: 'name',render: text => {text},},{ title: 'Age',dataIndex: 'age',key: 'age',},]; const data = https://www.it610.com/article/[{key: 1,name:'one',age: '10',},{key: 2,name: 'two',age: '20',},]; const App = () => (); export default App;
样式如图：
文章图片
3-2.如何使用 antd 的Button组件
import React from 'react'; import { Button } from 'antd'; const App = () => (
); export default App;
文章图片
4.后续
总结：总体来说要使用ant具体的某一个组件，就要仔细观看组件的API，以API为基准来进行开发。【如何在React项目中使用AntDesign】到此这篇关于如何在React项目中使用AntDesign的文章就介绍到这了,更多相关React使用AntDesign内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
好处：用Ant开发，省去了写css样式的问题，同时，组件里也有相应的JS方法，便于开发
推荐阅读
- PHP如何使用array_combine()函数（用法示例）
- Python如何从字符串列表中删除空字符串（）
- 如何处理Win8.1鼠标间歇性失灵问题？
- Win8应用商店中没有检查更新选项如何应对？
- 如何调整Win8系统输入法切换的顺序
- 如何取消Windows8系统开机扫描驱动器？
- 如何给Win8.1系统添加一个新的账户？
- Win8.1系统如何设置开机直接进入桌面？
- Win8系统如何添加中文简体美式键盘？
- 如何恢复Win8右键菜单中缺失的个性化选项？