React-网易云音乐PC端（一）

1.明确项目规范：

• 文件夹，文件名称统一小写
• JS变量名采用小驼峰，常量使用大写，组件名采用大驼峰
• 全局样式采用普通css，局部样式采用styled-component
• 项目使用函数式组件，并应用hooks
• 函数式组件为了避免不必要的渲染，统一使用memo包裹
• 函数内部的组件，使用useState，useReducer，业务数据全部放在redux中进行管理
• 函数组件内部代码编写顺序：组件的state；redux的hooks；其他hooks；其他逻辑代码；返回JSX、
• redux的代码规范
  • 每个模块都有自己的reducer，最终通过combineReducer进行合并
  • 异步请求代码使用redux-thunk，并写在actionCreators中
  • redux直接采用redux hooks，不再使用connect函数
• 网络请求采用axios
  • 对axios进行二次封装
  • 每个模块的网络请求会放在一个文件中进行单独管理
• 项目中会使用antd

2.项目初始化及项目结构划分

• react脚手架：npx create-react-app 文件名
• src文件夹下的目录划分
  • store：创建store，合并reducer
  • pages：页面组件
  • utils：封装工具类函数
  • router：路由配置
  • components：封装公共组件
  • assets：资源存放，比如全局css文件，图片资源等
  • common：存放公共数据等
  • services：网络请求相关

3.在开始编写项目之前，一般对CSS样式进行重置：项目中安装normalize.css库；并对公共的css样式进行设置

4.为了方便引入文件时路径的书写，可以配置别名

• 安装@craco/craco
• package.json文件中的更改
• craco.config.js文件的配置

5.准备工作完成之后，进入项目的开发，首先对页面进行整体的拆分：拆分为三部分，APPHeader，APPFooter，和中间路由控制的pages；APPHeader，APPFooter属于公共组件，放在components文件夹下；

6.项目中的路由

• 安装react-router-dom库；
• 路由配置采用react-router-config库进行整体配置