React项目实战---基础部分

1.使用XXX.module.css文件

1）使用XXX.module.css文件可以只改变部分样式

2）module的写法对于标签名无效，可以设置id或者class

2.使用sass

1）将css文件改为.scss

2）安装sass模块

3）在样式文件中定义sass变量，

3.反向代理

1）在需要请求数据的地方写好useeffect函数，

2）在src中配置好setupProxy.js文件

3）安装配置代理中间件

 cnpm i --save-dev http-proxy-middleware@1.0.6

4.配置路由

配置各级路由

5.引入antd

/************react引入antd时遇到问题---------版本不匹配问题*************/

Uncaught Error:invalid hook call . Hooks can only be called inside of the body of a function component .This could happen for one of the following resons:

 解决方法

1.将node-modules文件夹先删除
2.清理缓存命令: npm cache clean --force

3.（再将项目最后的package.json的所有版本号按照视频中的版本号进行替换）
4.重新安装一次即可 npm install /cnpm install

启动后再次引入antd组件，就不会报错（也解决了其他版本不匹配问题）

6.配置高阶组件路由

在需要使用props的地方引入高阶组件withRouter，这样可以不用一层一层传值，可以直接使用props

最后需要将函数导出，并用withRouter包裹

 7.json-server

1）配置json-server，https://www.npmjs.com/package/json-server   参考官方文档，安装、启动json-server

启动：json-server --watch XX.json --port 5000（端口号）

2）通过axios调用json-server数据

取数据：axios.get

 增加数据：axios.post

修改数据：put【patch】 

 删除数据：axios.delete

 取回关联数据：_embed

 取回关联数据：_expand

 8.利用json-server渲染侧边栏

1）渲染多级列表

 2）刷新页面时，原来的高亮显示在哪里，刷新后也还在哪里

 获取一级界面（openKeys）和二级界面（selectKeys）

9.JSON.parse报错

错误原因：打开了错误的.json文件