【React】从零开始搭建 react 项目（初始化+路由）

创建 React 项目

创建项目的方式：create-react-app 项目名称

如果没有安装 react 脚手架，请先安装

npm isntall create-react-app -g

安装成功后，开始配置项目

配置项目的 icon 和标题

配置 jsconfig.json

目的：用于配置 JavaScript 或 TypeScript 项目的根目录和其他一些选项，以帮助编辑器（如 VS Code）更好地理解项目的结构和提供智能提示

更多可以查看【React 】react 创建项目配置 jsconfig.json 的作用

{
   
  "compilerOptions": {
   
    "target": "es5",
    "module": "esnext",
    "baseUrl": "./",
    "moduleResolution": "node",
    "paths": {
   
      "@/*": [
        "src/*"
      ]
    },
    "jsx": "preserve",
    "lib": [
      "esnext",
      "dom",
      "dom.iterable",
      "scripthost"
    ]
  }
}

配置 craco.config.js

CRACO（Create React App Configuration Override）是一个易于理解且强大的工具，它提供了一种简单的方法来覆盖和自定义 Create React App 的配置，而无需执行“eject”操作。这种方法让你能够保留 Create React App 提供的所有优势，同时还能根据需要修改配置。

目的：用于配置 webpack 和一些 react 插件的配置

npm i -D @craco/craco craco-less

安装 craco-less 主要是为了使用 less

const path = require('path')