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跳过即可
