福建做网站,wordpress手机菜单导航代码,天津住房城乡建设厅官方网站,宁波网站建设相信荣胜网络react使用 Ant ui框架
说明#xff1a;Ant Design 是一个 ui框架#xff0c;和 bootstrap 一样是ui框架。里面的组件很完善#xff0c;开发中后台系统非常方便。分别基于react、vue、angular框架#xff0c;各自开发了一套 Ant Design 的UI框架。#xff08;这里主要讲re…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 --save2 在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 typeprimaryPrimary/Button
查看页面已经显示了.
import React from react;
import {Card,Button} from antdconst App function(){function eventclick(e){
console.log(e);}
return(div classNameAppdivbutton我是原生/buttonCard title普通的按钮Button 无样式按钮 /ButtonButton typeprimary onClick { eventclick} 普通按钮 /ButtonButton typedashed 虚线按钮 /ButtonButton typedanger 危险按钮 /ButtonButton disabled 被禁用的按钮 /Button/Card/div/div)}export default App;
eact中使用Antd高级配置按需引入css样式 现在组件已经成功运行起来了但是在实际开发过程中还有很多问题例如上面例子实际上加载了全部的antd组件的样式对前端性能是个隐患。
优化方案按需加载
1. 安装antd
npm install antd --save2. 安装react-app-rewired
react-app-rewired一个对 create-react-app 进行自定义配置的社区解决方案
yarn add react-app-rewired / cnpm install react-app-rewired --save3. 修改package.jsonz中react-scripts 需改为react-app-rewired
scripts: {start: react-app-rewired start,build: react-app-rewired build,test: react-app-rewired test --envjsdom,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 typeprimaryPrimary/Button
