开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第4天，点击查看活动详情 github地址：
建议下载代码，对着代码看
项目搭建
项目的基本配置
- icon图标
- jsconfig可以优化vscode的智能提示
- ..
编写组件内部代码的顺序
- 组件内部状态 props/useState
- 从redux中获取内容
- 自定义hooks
- 网络请求、事件监听、副作用
- return jsx
搭项目的目录结构
配置别名
craco（create-react-config)第三方库可以配置文件别名 简化路径
安装库 修改package.json 新建craco.config配置webpack
安装less 配置less
安装第三方库遇到问题：
谷歌、stackoverflow、英文搜索、第三方库版本问题看对应github的issues
修改配置就要重新run start
CSS样式重置
安装normalize.css 引入
新建reset.css文件 自己重置a img等标签样式
less后面必须加 ；
@textColorSecondary:#222;
Router配置
安装react-router-dom
第三方导入的写在上面
在App.jsx 使用useRoute将route放在router文件里
在views文件夹 一个页面对应一个文件
在router文件夹的index中 懒加载引入页面文件 再配置路由映射
Redux状态管理
安装@reduxjs/toolkit react-redux
在store新建store
在index引入provider provider包裹App并传入store
2种方法都使用：
- createSlice在home.js
- 普通方式：4个文件，此方法在entire中
Axios
安装axios
request中做二次封装 导出实例
-
config单独放请求URL和超时时间
-
index 封装QnRequest对数据拦截 暴露request、get、post请求方法
modules是不同模块的网络请求
在useEffect中发送网络请求 否则每次刷新都会发送请求
可选链 如果没有值就返回undefined不执行后续代码
