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

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/*"
      ]
    },
    "jsx": "preserve",
    "lib": [
      "esnext",
      "dom",
      "dom.iterable",
      "scripthost"
    ]
  }
}

通过craco配置别名和less文件(不需要集成less只需要配置别名):

在项目中层级嵌套会很深, 我们导入文件通常会有../../../甚至更多的上一级目录; 因此我们配置别名解决这个问题, 我的配置是使用@符号表示根目录

首先安装craco: npm i @carco/craco -D

如果使用的最新的React版本, 则需要npm i @craco/craco@alpha -D来安装

安装完成, 在项目根目录下创建craco.config.js文件

const path = require('path')
const reslove = pathname => path.resolve(__dirname, pathname)
module.exports = {
  webpack: {
    alias: {
      "@": reslove("src")
    }
  }
}

然后修改根目录下package.json文件中的脚本, 修改为craco启动, 修改如下:

"scripts": {
  "start": "craco start",
  "build": "craco build",
  "test": "craco test",
  "eject": "react-scripts eject"
},

别名配置完成, 接下来我们配置一下less, 不需要集成less跳过即可