react使用 Ant ui框架
说明:Ant Design 是一个 ui框架,和 bootstrap 一样是ui框架。里面的组件很完善,开发中后台系统非常方便。分别基于react、vue、angular框架,各自开发了一套 Ant Design 的UI框架。(这里主要讲react框架的 Ant Design)
系列 框架 系列官方命名
Ant: |—— react Ant Design (n. (design) 设计;图案)
|—— vue Ant Design Vue
|—— angular ng-zorro
|—— 移动端 Ant Design Mobile 一个基于 Preact / React / React Native 的 UI 组件库
- Ant Design 是蚂蚁金服开发和正在使用的一套企业级的前端设计语言和基于 React 的前端框架实现。最早是在2015年发布的。
- 对react 评价: React 本身的 API 并不多,是一个较为简单的框架。但是,要用好它,必须使用其他的配套工具,所以人们常说学习 React 并不是学习一个框架,而是学习一整套 React 技术栈。
扩展新闻:
- React.js 是Facebook 开发所有。自2016 爆发React专利事件
2. Twitter公司开源的Bootstrap
3. Ant 目前还没有官方的 针对 vue移动端 版本 ui
注意: Ant 有针对react vue 移动端,pc端 ,注意区分
按钮 案例演示
antd官网 https://ant.design/docs/react/introduce-cn
1. npm 下载
npm install antd --save / yarn add antd / cnpm install antd --save
2 在react项目的css文件中引入Antd的css
@import '~antd/dist/antd.css'; //引入index.css
注意: index.js 中也要有引入
import './index.css';
3)、 案例: 如何使用一个Button:
a在对应的组件中引入Antd
import { Button } from 'antd';
在html本分写
<Button type="primary">Primary</Button>
查看页面,已经显示了.
import React from 'react';
import {Card,Button} from 'antd'const App = function(){function eventclick(e){
console.log(e);}
return(<div className="App"><div><button>我是原生</button><Card title="普通的按钮"><Button> 无样式按钮 </Button><Button type="primary" onClick = { eventclick}> 普通按钮 </Button><Button type="dashed"> 虚线按钮 </Button><Button type="danger"> 危险按钮 </Button><Button disabled> 被禁用的按钮 </Button></Card></div></div>)}export default App;
eact中使用Antd高级配置,按需引入css样式
现在组件已经成功运行起来了,但是在实际开发过程中还有很多问题,例如上面例子实际上加载了全部的antd组件的样式(对前端性能是个隐患)。
优化方案:按需加载
1. 安装antd
npm install antd --save
2. 安装(react-app-rewired
(react-app-rewired)一个对 create-react-app 进行自定义配置的社区解决方案
yarn add react-app-rewired / cnpm install react-app-rewired --save
3. 修改package.jsonz中react-scripts 需改为react-app-rewired
"scripts": {"start": "react-app-rewired start","build": "react-app-rewired build","test": "react-app-rewired test --env=jsdom","eject": "react-app-rewired eject"}
- 在项目根目录创建一个 config-overrides.js 配置文件
const { injectBabelPlugin } = require('react-app-rewired');module.exports = function override(config, env) {config = injectBabelPlugin(['import', { libraryName: 'antd', libraryDirectory: 'es', style: 'css' }],config,);return config;};
- 安装babel-plugin-import babel-plugin-import是一个用于按需加载组件代码和样式的 babel 插件
yarn add babel-plugin-import / cnpm install babel-plugin-import --save
- 然后移除前面在 src/App.css 里全量添加的
@import '~antd/dist/antd.css';
- 直接引入组件使用就会有对应的css:
import { Button } from 'antd';<Button type="primary">Primary</Button>