React框架创建项目详细流程-项目的基本配置-项目的代码规范

目录

React创建项目流程与规范

项目规范

项目配置

目录结构

样式重置

Router配置

Redux状态管理

axios配置

---

React创建项目流程与规范

项目规范

项目规范: 在项目中都会有一些开发规范和代码风格, 下面介绍一下我采用的规范与风格

• 文件夹、文件名称统一小写、多个单词以连接符(-)连接, 组件采用大驼峰;
• JavaScript变量名称采用小驼峰标识，常量全部使用大写字母;
• CSS采用普通CSS和styled-component结合来编写(全局采用普通CSS或Less、局部采用styled-component);
• 整个项目不再使用class组件，统一使用函数式组件，并且全面拥抱Hooks;
• 所有的函数式组件，为了避免不必要的渲染，全部使用memo进行包裹;
• 组件内部的状态，使用useState、业务数据全部放在redux中管理;
• 函数组件内部逻辑代码基本按照如下顺序编写代码:

组件内部state管理;

redux的hooks代码;

其他hooks相关代码(比如自定义hooks);

其他逻辑代码;

返回JSX代码;

• redux代码规范如下:

redux目前我们学习了两种模式, 根据自己的情况选择普通模式还是rtk模式

每个模块有自己独立的reducer或者slice，之后合并在一起;

redux中会存在共享的状态、从服务器获取到的数据状态;

• 网络请求采用axios

对axios进行二次封装;

所有的模块请求会放到一个请求文件中单独管理;

• 项目使用AntDesign或者MUI(Material UI)

其他规范在项目中根据实际情况决定和编写

项目配置

创建项目的方式:create-react-app

项目配置:

配置项目的标题: 在public文件夹下的index.html中配置项目的标题 

<title>网易云音乐</title>

配置jsconfig.json:这个文件在Vue通过脚手架创建项目时自动生成, React是没有自动生成, jsconfig.json是为了让vs code的代码提示更友好, 按需求决定是否配置;

{
  "compilerOptions": {
    "target": "es5",
    "module": "esnext",
    "baseUrl": "./",
    "moduleResolution": "node",
    "paths": {
      "@/*": [
        "src/*"
      ]