从 0~1 创建 React 项目（React+TS/JS）及配置路径别名和路径联想前言创建 react 项目

前言

创建 react 项目不用像创建Vue项目那么麻烦，我们直接创建运行命令即可；
- 我目前也是React刚起步，可能有些创建项目的方式还没接触到，等接触到了再补充上；

一、创建项目

1.1 webpack

脚手架：

create-react-app 是一个 创建 React 开发环境的工具，底层由Webpack构建，封装了配置细节，开箱即用；

创建项目命令：
```
// create-react-app 核心包（固定写法），用于创建recat项目
// js
npx create-react-app 项目名称
// ts
npx create-react-app 项目名称 --template typescript
```
- npx简介：
  - NodeJS工具包命令，查找并执行后续的包命令；
  - 目的：提升包内提供的命令行工具的使用体验；
  - 之前都是先在本地安装对应脚手架，再去使用脚手架创建项目；
  - 现在无需安装脚手架，就可以直接使用这个包提供的命令；
运行命令，等待项目创建成功；
之后按照提示，进入项目目录，下载依赖（pnpm/npm i）；
使用 pnpm/npm start 运行项目：
- 启动命令不一定是npm start，如果安装了其他的包管理工具的话，也是可以使用的；

其他创建项目的命令：

不推荐使用；

npm init react-app my-app
yarn create react-app my-app

1.2 vite

viet：

可以实现 cra 同等能力，相比于 webpack 打包速度更快；

创建项目命令：

// ts
pnpm create vite@latest 项目名称 --template react-ts
// 若要创建 js 项目，就把 react-ts 改成 react 即可

不一定非要用yarn，其他的管理工具也是OK的；

1.3 启动项目eslint报提示处理

当我们创建一个新项目跑起来之后，页面上会展示一个关于eslint的提示；
- 不一定会有，关键看创建项目和下包依赖使用的包管理工具，若一致，应当没有这个提示；
- 这个错误表明项目中存在 ESLint 配置冲突，具体是 react 插件在两个不同的路径中被加载了。这通常是由于依赖版本不一致或安装方式（如 pnpm 和 npm 混用）导致的。

解决方案

清理并重新安装依赖：
- 删除 node_modules 和 package-lock.json （或 pnpm-lock.yaml ）。
- 重新安装依赖。
检查依赖版本：
- 确保所有依赖的版本一致，特别是 eslint-config-react-app 。
统一包管理工具：
- 如果使用了 pnpm ，确保所有依赖都是通过 pnpm 安装的。

二、项目完善

2.1 清除无用文件

第一次创建的项目，在src下有很多文件，对目前的我们来说，有用的只有App.js、index.js，其他的文件都可以删除；
删除其他文件之后，项目就会报错，按照报错信息，清除无效引用；
清除无用文件及无效代码之后，就只剩App.js、index.js这两个文件；

App.js：

function App() {
  return <div className="App">this is App</div>;
}

export default App;

index.js：

// 导入React必要的两个核心包
import React from 'react';
import ReactDOM from 'react-dom/client';

// 导入项目的根组件
import App from './App';

// 把 App 根组件渲染到 id 为 root 的dom节点上
// 哪里有 id=root 的节点？  ===>   public/index.html
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  // 严格模式
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

2.2 按照业务规范整理项目目录

项目的整体目录架构，还是要根据公司来设置；
以下目录只做参考哈；

文件夹	作用
apis	接口函数
assets	静态资源（图片、样式）
components	通用组件
pages	页面级组件
router	路由Router
store	Redux状态
utils	工具函数

2.3 创建 router 及 store

三、依赖介绍

react：该包是核心，提供创建元素、组件等功能；
react-dom：提供DOM相关功能等；

四、配置路径别名及联想

4.1 使用 cra 创建的项目

4.1 参考了这位大佬的文章；

cra 将所有工程化配置都隐藏在react-scripts包中，所以项目中看不到任何配置信息；

如果要修改 cra 的默认配置，有两种方案：

✅ 通过第三方库修改；

@craco/craco；

❌ 通过yarn eject命令（这种方式不用管，项目中用不到）；

该命令会释放react-scripts中的所有配置到项目中，该过程不可逆；

准备工作：
- 下载依赖：pnpm install -D @craco/craco；

4.1.1 路径别名

路径别名：
- 在项目中，通过 @ 来表示 src 目录的绝对路径；

在项目根目录下新建 craco.config.js / ts 文件：

// 从 node 中导入 内置的 path 模块
const path = require('path');

module.exports = {
  // webpack配置
  webpack: {
    // 配置别名
    alias: {
      // 约定使用 @ 表示 src 文件所在目录
      // path.resolve() 该方法将一些的 路径/路径段 合并并解析为绝对路径
      // 大家也可以自定义其他的路径别名，方便开发
      '@': path.resolve(__dirname, 'src/'),
      '@comp': path.resolve(__dirname, 'src', 'components')
    }
  }
};

配置好路径别名之后，需要将项目启动和打包的脚本修改为 craco 的方式：

目标文件：
- package.json；

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

4.1.2 路径联想

路径联想：
- 在项目中当我们输入 @/ 的时候，会自动提示 src 下的文件出来；

4.1.2.1 TS项目

在tsconfig.json中添加配置；

{
    "compilerOptions": {
        ...,
        "baseUrl": ".",
        "paths": {
            "@src/*": ["src/*"],
            "@comp/*": ["src/components/*"],
        },
        ...,
    },
}

若craco.config.ts报关于const的错（eslint）；

我们需要在项目根目录下新建.eslintrc文件：

{
  "parserOptions": {
    "ecmaVersion": 2020 // 或者使用 latest
  }
}

4.1.2.2 JS项目

在项目根目录下创建 jsconfig.json 文件：

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@src/*": ["src/*"],
      "@comp/*": ["src/components/*"]
    }
  }
}

VsCode会自动读取jsconfig.json中的配置，让VsCode知道：
- @就是src目录；
- @comp就是src/components目录；

4.2 使用vite创建的项目

4.2.1 路径别名

目标文件：

vite.config.js / ts；

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
// 需要下载 @types/node 依赖
import { resolve } from 'path'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
      '@': resolve(__dirname, './src'),
      '@comp': resolve(__dirname, './src', 'components')
    }
  }
})

4.2.2 路径联想