React项目规范：目录结构、根目录别名、CSS重置、路由、redux、二次封装axios-Toy模板网

这篇具有很好参考价值的文章主要介绍了React项目规范：目录结构、根目录别名、CSS重置、路由、redux、二次封装axios。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

一、创建项目

先创建项目：create-react-app 项目名，然后换个图标，换个标题

配置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"
    ]
  }
}

二、目录结构

对src文件夹的目录进行初始化：

assets: 存放静态资源 (如css, img等等)

baseUI: 存放一些通用的组件, 不只是本项目, 其他项目也会使用的组件

components: 存放本项目中通用的组件

hooks: 自定义的hook函数

router: 路由相关

services: 网络请求相关

stores: 状态管理, redux相关

utils: 封装的工具函数

views: 页面相关

三、craco配置别名并安装less

1.craco安装

1、安装craco：npm install craco

修改package.json：

/* package.json */
"scripts": {
   
-   "start": "react-scripts start",
-   "build": "react-scripts build",
-   "test": "react-scripts test",
	👇👇👇👇👇👇
+   "start": "craco start",
+   "build": "craco build",
+   "test": "craco test",
}

2.配置别名

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

在项目根目录创建一个 craco.config.js 用于修改默认配置，该文件中的一些配置（如webpack）会和脚手架中的配置合并。修改别名的操作如下：文章来源地址https://www.toymoban.com/news/detail-402587.html

const path = require('path');

module.exports = {
   
    webpack: {
   
        alias: {
   
            "@": path.resolve(__dirname, 'src'),
            'components': path.resolve(__dirname, 'src/components'),
            'store':path.resolve