学习使我快乐
英文官网: https://reactjs.org/
中文官网: https://react.docschina.org/
用于动态构建用户界面的 JavaScript 库(只关注于视图)
由Facebook开源
声明式编码
组件化编码
React Native 编写原生应用
高效(优秀的Diffing算法)
使用虚拟(virtual)DOM, 不总是直接操作页面真实DOM。
DOM Diffing算法, 最小化页面重绘。
react.js:React核心库。
react-dom.js:提供操作DOM的react扩展库。
babel.min.js:解析JSX语法代码转为JS代码的库。
纯JS方式(一般不用)
JSX方式
const VDOM = React.createElement('xx',{
id:'xx'},'xx')
上面创建的就是一个简单的虚拟DOM对象
虚拟DOM对象最终都会被React转换为真实的DOM
我们编码时基本只需要操作react的虚拟DOM相关数据, react会转换为真实DOM变化而更新界。
全称: JavaScript XML
react定义的一种类似于XML的JS扩展语法: JS + XML本质是
**React.createElement(component, props, ...children)
**方法的语法糖
作用: 用来简化创建虚拟DOM
写法:var ele =
注意1:它不是字符串, 也不是HTML/XML标签
注意2:它最终产生的就是一个JS对象
标签名任意: HTML标签或其它标签
标签属性任意: HTML标签属性或其它
基本语法规则
遇到 <开头的代码, 以标签的语法解析: html同名标签转换为html同名元素, 其它标签需要特别解析
遇到以 { 开头的代码,以JS语法解析: 标签中的js表达式必须用{ }包含
浏览器不能直接解析JSX代码, 需要babel转译为纯JS的代码才能运行
只要用了JSX,都要加上type=“text/babel”, 声明需要babel来处理
语法: ReactDOM.render(virtualDOM, containerDOM)
作用: 将虚拟DOM元素渲染到页面中的真实容器DOM中显示
参数说明
参数一: 纯js或jsx创建的虚拟dom对象
参数二: 用来包含虚拟DOM元素的真实dom元素对象(一般是一个div)
需求: 动态展示如下列表
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jsx小练习title>
head>
<body>
<div id="test">div>
<script type="text/javascript" src="../js/react.development.js">script>
<script type="text/javascript" src="../js/react-dom.development.js">script>
<script type="text/javascript" src="../js/babel.min.js">script>
<script type="text/babel" >
/*
一定注意区分:【js语句(代码)】与【js表达式】
1.表达式:一个表达式会产生一个值,可以放在任何一个需要值的地方
下面这些都是表达式:
(1). a
(2). a+b
(3). demo(1)
(4). arr.map()
(5). function test () {}
2.语句(代码):
下面这些都是语句(代码):
(1).if(){}
(2).for(){}
(3).switch(){case:xxxx}
*/
//模拟一些数据
const data = ['Angular','React','Vue']
//1.创建虚拟DOM
const VDOM = (
<div>
<h1>前端js框架列表</h1>
<ul>
{
data.map((item,index)=>{
return <li key={
index}>{
item}</li>
})
}
</ul>
</div>
)
//2.渲染虚拟DOM到页面ReactDOM.render(VDOM,document.getElementById('test'))
script>
body>
html>
理解:向外提供特定功能的js程序, 一般就是一个js文件
为什么要拆成模块:随着业务逻辑增加,代码越来越多且复杂。
作用:复用js, 简化js的编写, 提高js运行效率
理解:用来实现局部功能效果的代码和资源的集合(html/css/js/image等等)
为什么要用组件: 一个界面的功能更复杂
作用:复用编码, 简化项目编码, 提高运行效率
当应用的js都以模块来编写的, 这个应用就是一个模块化的应用
当应用是以多组件的方式实现, 这个应用就是一个组件化的应用
函数式组件:
组件名必须首字母大写
虚拟DOM元素只能有一个根元素
虚拟DOM元素必须有结束标签
React内部会创建组件实例对象
调用render()得到虚拟DOM, 并解析为真实DOM
插入到指定的页面元素内部
需求* 定义一个展示天气信息的组件
1. 默认展示天气炎热 或 凉爽
2. 点击文字切换天气
<html lang="en">
<head>
<meta charset="UTF-8">
<title>3_回调ref中回调执行次数的问题title>
head>
<body>
<div id="test">div>
<script type="text/javascript" src="../js/react.development.js">script>
<script type="text/javascript" src="../js/react-dom.development.js">script>
<script type="text/javascript" src="../js/babel.min.js">script>
<script type="text/babel">
//创建组件
class Demo extends React.Component{
state = {
isHot:false}
showInfo = ()=>{
const {
input1} = this
alert(input1.value)
}
changeWeather = ()=>{
//获取原来的状态
const {
isHot} = this.state
//更新状态
this.setState({
isHot:!isHot})
}
saveInput = (c)=>{
this.input1 = c;
console.log('@',c);
}
render(){
const {
isHot} = this.state
return(
<div>
<h2>今天天气很{
isHot ? '炎热':'凉爽'}</h2>
{
/*{this.input1 = c;console.log('@',c);}} type="text"/>
*/}
<input ref={
this.saveInput} type="text"/><br/><br/>
<button onClick={
this.showInfo}>点我提示输入的数据</button>
<button onClick={
this.changeWeather}>点我切换天气</button>
</div>
)
}
}
//渲染组件到页面
ReactDOM.render(<Demo/>,document.getElementById('test'))
script>
body>
html>
state是组件对象最重要的属性, 值是对象(可以包含多个key-value的组合)
组件被称为"状态机", 通过更新组件的state来更新对应的页面显示(重新渲染组件)
组件中render方法中的this为组件实例对象
组件自定义的方法中this为undefined,如何解决?
a) 强制绑定this: 通过函数对象的bind()
b) 箭头函数
需求* 自定义用来显示一个人员信息的组件
1. 姓名必须指定,且为字符串类型;
2. 性别为字符串类型,如果性别没有指定,默认为男
3. 年龄为字符串类型,且为数字类型,默认值为1**8
每个组件对象都会有props(properties的简写)属性
组件标签的所有属性都保存在props中
通过标签属性从组件外向组件内传递变化的数据
注意: 组件内部不要修改props数据
this.props.name
Person.propTypes = {
name: React.PropTypes.string.isRequired,
age: React.PropTypes.number
}
第二种方式(新):使用prop-types库进限制(需要引入prop-types库)
Person.propTypes = {
name: PropTypes.string.isRequired,
age: PropTypes.number.
}
Person.defaultProps = {
age: 18,
sex:'男'
}
constructor(props){
super(props)
console.log(props)//打印所有属性
}
需求: 自定义组件, 功能说明如下:
1. 点击按钮, 提示第一个输入框中的值
2. 当第2个输入框失去焦点时, 提示这个输入框中的值
组件内的标签可以定义ref属性来标识自己
{this.input1 = c}}
myRef = React.createRef()
React使用的是自定义(合成)事件, 而不是使用的原生DOM事件
React中的事件是通过事件委托方式处理的(委托给组件最外层的元素)
*需求: 定义一个包含表单的组件
输入用户名密码后, 点击登录提示输入信息
包含表单的组件分类
受控组件
非受控组件
需求*定义组件实现以下功能:
1. 让指定的文本做显示 / 隐藏的渐变动画
2. 从完全可见,到彻底消失,耗时**2S
3. 点击“不活了”按钮从界面中卸载组件
组件从创建到死亡它会经历一些特定的阶段。
React组件中包含一系列勾子函数(生命周期回调函数), 会在特定的时刻调用。
我们在定义组件时,会在特定的生命周期回调函数中,做特定的工作。
生命周期的三个阶段(旧)
1. 初始化阶段: 由ReactDOM.render()触发—初次渲染
constructor()
componentWillMount()
3.render()
4.componentDidMount()
2. 更新阶段: 由组件内部this.setSate()或父组件重新render触发
2.componentWillUpdate()
render()
componentDidUpdate()
3. 卸载组件: 由ReactDOM.unmountComponentAtNode()触发
生命周期的三个阶段(新)
1.初始化阶段: 由ReactDOM.render()触发—初次渲染
2. 更新阶段*** 由组件内部this.setSate()或父组件重新render触发
1.getDerivedStateFromProps
2.shouldComponentUpdate()
3. render()
4. getSnapshotBeforeUpdate
5. componentDidUpdate()
3. 卸载组件*** 由ReactDOM.unmountComponentAtNode()触发
render
:初始化渲染或更新渲染调用
componentDidMount
:开启监听, 发送ajax请求
componentWillUnmount
:做一些收尾工作, 如: 清理定时器
componentWillMount
componentWillReceiveProps
componentWillUpdate
现在使用会出现警告,下一个大版本需要加上UNSAFE_前缀才能使用,以后可能会被彻底废弃,不建议使用。
需求:验证虚拟DOM Diffing算法的存在
xxx脚手架: 用来帮助程序员快速创建一个基于xxx库的模板项目
包含了所有需要的配置(语法检查、jsx编译、devServer…)
下载好了所有相关的依赖
可以直接运行一个简单效果
react提供了一个用于创建react项目的脚手架库: create-react-app
项目的整体技术架构为: react + webpack + es6 + eslint
使用脚手架开发的项目的特点: 模块化, 组件化, 工程化
第一步,全局安装:npm i -g create-react-app
第二步,切换到想创项目的目录,使用命令:create-react-app
hello-react
第三步,进入项目文件夹:cd hello-react
第四步,启动项目:npm start
public ---- 静态资源文件夹
favicon.icon ------ 网站页签图标
index.html -------- 主页面
logo192.png ------- logo图
logo512.png ------- logo图
manifest.json ----- 应用加壳的配置文件
robots.txt -------- 爬虫协议文件
src ---- 源码文件夹
App.css -------- App组件的样式
App.js --------- App组件
App.test.js ---- 用于给App做测试
index.css ------ 样式
index.js -****------ 入口文件
logo.svg ------- logo图
reportWebVitals.js
— 页面性能分析文件(需要web-vitals库的支持)
setupTests.js
---- 组件单元测试的文件(需要jest-dom库的支持)
拆分组件: 拆分界面,抽取组件
实现静态组件: 使用组件实现静态页面效果
实现动态组件
3.1 动态显示初始化数据
3.1.1 数据类型
3.1.2 数据名称
3.1.2 保存在哪个组件?
3.2 交互(从绑定事件监听开始)
功能* 组件化实现此功能
1. 显示所有todo列表
2.输入文本, 点击按钮显示到列表的首位, 并清除输入的文本
todoList案例相关知识点
1.拆分组件、实现静态组件,注意:className、style的写法
2.动态初始化列表,如何确定将数据放在哪个组件的state中?
——某个组件使用:放在其自身的state中
——某些组件使用:放在他们共同的父组件state中(官方称此操作为:状态提升)
3.关于父子之间通信:
1.【父组件】给【子组件】传递数据:通过props传递
2.【子组件】给【父组件】传递数据:通过props传递,要求父提前给子传递一个函数
4.注意defaultChecked 和 checked的区别,类似的还有:defaultValue 和 value
5.状态在哪里,操作状态的方法就在哪里
```
React本身只关注于界面, 并不包含发送ajax请求的代码
前端应用需要通过ajax请求与后台进行交互(json数据)
react应用中需要集成第三方ajax库(或自己封装)
jQuery: 比较重, 如果需要另外引入不建议使用
axios: 轻量级, 建议使用
封装XmlHttpRequest对象的ajax
promise风格
可以用在浏览器端和node服务器端
https://github.com/axios/axios
GET请求
axios.get('/user?ID=12345')
.then(function (response) {
console.log(response.data);
}) .catch(function (error) {
console.log(error);
});
axios.get('/user', {
params: {
ID: 12345 } })
.then(function (response) {
console.log(response);
}) .catch(function (error) {
console.log(error);
});
POST请求
axios.post('/user', {
firstName: 'Fred', lastName: 'Flintstone'})
.then(function (response) {
console.log(response);
}).catch(function (error) {
console.log(error);
});
请求地址: https://api.github.com/search/users?q=xxxxxx
github搜索案例相关知识点
```
1.设计状态时要考虑全面,例如带有网络请求的组件,要考虑请求失败怎么办。
2.ES6小知识点:解构赋值+重命名
let obj = {a:{b:1}}
const {a} = obj; //传统解构赋值
const {a:{b}} = obj; //连续解构赋值
const {a:{b:value}} = obj; //连续解构赋值+重命名
3.消息订阅与发布机制
1.先订阅,再发布(理解:有一种隔空对话的感觉)
2.适用于任意组件间通信
3.要在组件的componentWillUnmount中取消订阅
4.fetch发送请求(关注分离的设计思想)
try {
const response= await fetch(/api1/search/users2?q=${keyWord}
)
const data = await response.json()
console.log(data);
} catch (error) {
console.log(‘请求出错’,error);
}
```
工具库: PubSubJS
下载: npm install pubsub-js --save
使用:
import PubSub from 'pubsub-js'
//引入
PubSub.subscribe('delete', function(data){ })
; //订阅
3)PubSub.publish('delete', data)
//发布消息
https://github.github.io/fetch/
https://segmentfault.com/a/1190000003810652
fetch: 原生函数,不再使用XmlHttpRequest对象提交ajax请求
老版本浏览器可能不支持
fetch(url).then(function(response) {
return response.json()
}).then(function(data) {
console.log(data)
}).catch(function(e) {
console.log(e)
});
fetch(url, {
method: "POST",
body: JSON.stringify(data),
}).then(function(data) {
console.log(data)
}).catch(function(e) {
console.log(e)
})
单页Web应用(single page web application,SPA)。
整个应用只有一个完整的页面。
点击页面中的链接不会刷新页面,只会做页面的局部更新。
数据都需要通过ajax请求获取, 并在前端异步展现。
一个路由就是一个映射关系(key:value)
key为路径, value可能是function或component
理解: value是function, 用来处理客户端提交的请求。
注册路由: router.get(path, function(req, res))
工作过程:当node接收到一个请求时, 根据请求路径找到匹配的路由, 调用路由中的函数来处理请求, 返回响应数据
浏览器端路由,value是component,用于展示页面内容。
注册路由:
工作过程:当浏览器的path变为/test时, 当前路由组件就会变为Test组件
react的一个插件库。
专门用来实现一个SPA应用。
基于react的项目基本都会用到此库。
history对象
match对象
withRouter函数
下载react-router-dom: npm install --save react-router-dom
引入bootstrap.css:
路由总结:
路由的基本使用
1.明确好界面中的导航区、展示区
2.导航区的a标签改为Link标签
Demo
3.展示区写Route标签进行路径的匹配
4.的最外侧包裹了一个或
路由组件与一般组件
1.写法不同:
一般组件:
路由组件:
2.存放位置不同:
一般组件:components
路由组件:pages
3.接收到的props不同:
一般组件:写组件标签时传递了什么,就能收到什么
路由组件:接收到三个固定的属性
history:
go: ƒ go(n)
goBack: ƒ goBack()
goForward: ƒ goForward()
push: ƒ push(path, state)
replace: ƒ replace(path, state)
location:
pathname: "/about"
search: ""
state: undefined
match:
params: {}
path: "/about"
url: "/about"
6.1.1. material-ui(国外)
官网: http://www.material-ui.com/#/
github: https://github.com/callemall/material-ui
官网: https://ant.design/index-cn
Github: https://github.com/ant-design/ant-design/
英文文档: https://redux.js.org/
中文文档: http://www.redux.org.cn/
Github: https://github.com/reactjs/redux
redux是一个专门用于做状态管理的JS库(不是react插件库)。
它可以用在react, angular, vue等项目中, 但基本与react配合使用。
作用: 集中式管理react应用中多个组件共享的状态。
某个组件的状态,需要让其他组件可以随时拿到(共享)。
一个组件需要改变另一个组件的状态(通信)。
总体原则:能不用就不用, 如果不用比较吃力才考虑使用。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-LPRmjhT8-1616072078674)(file:///C: Users ADMINI~1 AppData Local Temp ksohtml11248 wps71.jpg)]
动作的对象
包含2个属性
l type:标识属性, 值为字符串, 唯一, 必要属性
l data:数据属性, 值类型任意, 可选属性
用于初始化状态、加工状态。
加工时,根据旧的state和action, 产生新的state的纯函数。
将state、action、reducer联系在一起的对象
如何得到此对象?
1) import {
createStore} from 'redux'
2) import reducer from './reducers'
3) const store = createStore(reducer)
getState()
: 得到state
dispatch(action)
: 分发action, 触发reducer调用, 产生新的state
subscribe(listener)
: 注册监听, 当产生了新的state时, 自动调用
作用:创建包含指定reducer的store对象
作用: redux库最核心的管理对象
它内部维护着:
1) state
2) reducer
核心方法:
1) getState()
2) dispatch(action)
3) subscribe(listener)
1) store.getState()
2) store.dispatch({
type:'INCREMENT', number})
3) store.subscribe(render)
作用:应用上基于redux的中间件(插件库)
作用:合并多个reducer函数
**效果**
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-jM1a2Nft-1616072078675)(file:///C: Users ADMINI~1 AppData Local Temp ksohtml11248 wps72.png)]
redux默认是不能进行异步处理的,
某些时候应用中需要在redux中执行异步任务(ajax, 定时器)
npm install --save redux-thunk
一个react插件库
专门用来简化react应用中使用redux
只负责 UI 的呈现,不带有任何业务逻辑
通过props接收数据(一般数据和函数)
不使用任何 Redux 的 API
一般保存在components文件夹下
负责管理数据和业务逻辑,不负责UI的呈现
使用 Redux 的 API
一般保存在containers文件夹下
Provider
:让所有组件都可以得到state数据
connect
:用于包装 UI 组件生成容器组件import { connect } from 'react-redux'
connect(
mapStateToprops,
mapDispatchToProps
)(Counter)
mapStateToprops
:将外部的数据(即state对象)转换为UI组件的标签属性const mapStateToprops = function (state) {
return {
value: state
}
}
mapDispatchToProps
:将分发action的函数转换为UI组件的标签属性 npm install --save-dev redux-devtools-extension
一类特别的函数: 只要是同样的输入(实参),必定得到同样的输出(返回)
必须遵守以下一些约束
不得改写参数数据
不会产生任何副作用,例如网络请求,输入和输出设备
不能调用Date.now()或者Math.random()等不纯的方法
情况1: 参数是函数
情况2: 返回是函数
定时器设置函数
数组的forEach()/map()/filter()/reduce()/find()/bind()
promise
react-redux中的connect函数
## 一、todoList案例相关知识点
1.拆分组件、实现静态组件,注意:className、style的写法
2.动态初始化列表,如何确定将数据放在哪个组件的state中?
——某个组件使用:放在其自身的state中
——某些组件使用:放在他们共同的父组件state中(官方称此操作为:状态提升)
3.关于父子之间通信:
1.【父组件】给【子组件】传递数据:通过props传递
2.【子组件】给【父组件】传递数据:通过props传递,要求父提前给子传递一个函数
4.注意defaultChecked 和 checked的区别,类似的还有:defaultValue 和 value
5.状态在哪里,操作状态的方法就在哪里
## 二、github搜索案例相关知识点
1.设计状态时要考虑全面,例如带有网络请求的组件,要考虑请求失败怎么办。
2.ES6小知识点:解构赋值+重命名
let obj = {a:{b:1}}
const {a} = obj; //传统解构赋值
const {a:{b}} = obj; //连续解构赋值
const {a:{b:value}} = obj; //连续解构赋值+重命名
3.消息订阅与发布机制
1.先订阅,再发布(理解:有一种隔空对话的感觉)
2.适用于任意组件间通信
3.要在组件的componentWillUnmount中取消订阅
4.fetch发送请求(关注分离的设计思想)
try {
const response= await fetch(`/api1/search/users2?q=${keyWord}`)
const data = await response.json()
console.log(data);
} catch (error) {
console.log('请求出错',error);
}
## 三、路由的基本使用
1.明确好界面中的导航区、展示区
2.导航区的a标签改为Link标签
Demo
3.展示区写Route标签进行路径的匹配
4.的最外侧包裹了一个或
## 四、路由组件与一般组件
1.写法不同:
一般组件:
路由组件:
2.存放位置不同:
一般组件:components
路由组件:pages
3.接收到的props不同:
一般组件:写组件标签时传递了什么,就能收到什么
路由组件:接收到三个固定的属性
history:
go: ƒ go(n)
goBack: ƒ goBack()
goForward: ƒ goForward()
push: ƒ push(path, state)
replace: ƒ replace(path, state)
location:
pathname: "/about"
search: ""
state: undefined
match:
params: {}
path: "/about"
url: "/about"
## 五、NavLink与封装NavLink
1.NavLink可以实现路由链接的高亮,通过activeClassName指定样式名
## 六、Switch的使用
1.通常情况下,path和component是一一对应的关系。
2.Switch可以提高路由匹配效率(单一匹配)。
## 七、解决多级路径刷新页面样式丢失的问题
1.public/index.html 中 引入样式时不写 ./ 写 / (常用)
2.public/index.html 中 引入样式时不写 ./ 写 %PUBLIC_URL% (常用)
3.使用HashRouter
## 八、路由的严格匹配与模糊匹配
1.默认使用的是模糊匹配(简单记:【输入的路径】必须包含要【匹配的路径】,且顺序要一致)
2.开启严格匹配:
3.严格匹配不要随便开启,需要再开,有些时候开启会导致无法继续匹配二级路由
## 九、Redirect的使用
1.一般写在所有路由注册的最下方,当所有路由都无法匹配时,跳转到Redirect指定的路由
2.具体编码:
## 十、嵌套路由
1.注册子路由时要写上父路由的path值
2.路由的匹配是按照注册路由的顺序进行的
## 十一、向路由组件传递参数
1.params参数
路由链接(携带参数):详情
注册路由(声明接收):
接收参数:this.props.match.params
2.search参数
路由链接(携带参数):详情
注册路由(无需声明,正常注册即可):
接收参数:this.props.location.search
备注:获取到的search是urlencoded编码字符串,需要借助querystring解析
3.state参数
路由链接(携带参数):详情
注册路由(无需声明,正常注册即可):
接收参数:this.props.location.state
备注:刷新也可以保留住参数
## 十二、编程式路由导航
借助this.prosp.history对象上的API对操作路由跳转、前进、后退
-this.prosp.history.push()
-this.prosp.history.replace()
-this.prosp.history.goBack()
-this.prosp.history.goForward()
-this.prosp.history.go()
## 十三、BrowserRouter与HashRouter的区别
1.底层原理不一样:
BrowserRouter使用的是H5的history API,不兼容IE9及以下版本。
HashRouter使用的是URL的哈希值。
2.path表现形式不一样
BrowserRouter的路径中没有#,例如:localhost:3000/demo/test
HashRouter的路径包含#,例如:localhost:3000/#/demo/test
3.刷新后对路由state参数的影响
(1).BrowserRouter没有任何影响,因为state保存在history对象中。
(2).HashRouter刷新后会导致路由state参数的丢失!!!
4.备注:HashRouter可以用于解决一些路径错误相关的问题。
## 十四、antd的按需引入+自定主题
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' },
}
}),
);
4.备注:不用在组件里亲自引入样式了,即:import 'antd/dist/antd.css'应该删掉
s.prosp.history.go()
1.底层原理不一样:
BrowserRouter使用的是H5的history API,不兼容IE9及以下版本。
HashRouter使用的是URL的哈希值。
2.path表现形式不一样
BrowserRouter的路径中没有#,例如:localhost:3000/demo/test
HashRouter的路径包含#,例如:localhost:3000/#/demo/test
3.刷新后对路由state参数的影响
(1).BrowserRouter没有任何影响,因为state保存在history对象中。
(2).HashRouter刷新后会导致路由state参数的丢失!!!
4.备注:HashRouter可以用于解决一些路径错误相关的问题。
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' },
}
}),
);
4.备注:不用在组件里亲自引入样式了,即:import 'antd/dist/antd.css'应该删掉