React学习记录 ---第六章

在b站尚硅谷学习React过程中，记录的学习笔记，希望能够帮到和我一样的前端热爱者！

094_尚硅谷_react教程_antd的基本使用_哔哩哔哩_bilibili

前五章笔记在这里：React学习记录 ---第一章-CSDN博客

React学习记录 ---第二章-CSDN博客

React学习记录---第三章-CSDN博客

React学习记录 ---第四章-CSDN博客

React学习记录 ---第五章-CSDN博客

React UI组件库

ant-design(国内蚂蚁金服)

1. 官网: Ant Design - 一套企业级 UI 设计语言和 React 组件库
2. Github: GitHub - ant-design/ant-design: An enterprise-class UI design language and React UI library

antd适用于后台管理系统

其实还有一些其他组件库比如element-ui for react

Vant针对移动端设计，给vue用的

按需引入+自定义主题

antd底层是拿less写的，经过编译形成css

1.安装依赖：yarn add react-app-rewired customize-cra babel-plugin-import less less-loader
2.修改package.json
	....
	"scripts": {
			"start": "react-app-rewired start",
			"build": "react-app-rewired build",
			"test": "react-app-rewired test",
			"eject": "react-scripts eject"
				},
	....
3.根目录下创建config-overrides.js
	//配置具体的修改规则
	const { override, fixBabelImports,addLessLoader} = require('customize-cra');
	module.exports = override(
		fixBabelImports('import', {
			libraryName: 'antd',
			libraryDirectory: 'es',
		    style: true,
		}),
	    addLessLoader({
			lessOptions:{
			javascriptEnabled: true,
			modifyVars: { '@primary-color': 'green' },
		}
	),
);

以上操作完：不用在组件里亲自引入样式了，即：import 'antd/dist/antd.css'应该删掉