React (react hooks+react-router-dom+mobx+antd) project construction

1. Project construction (not using vite method)

1. Use create-react-app to generate the project npx create-react-app pc

2. enter the root directory cd pc

3. start project npm start

4. Adjust project directory structure

/src 
  /assets project resource files, such as pictures, etc. 
  /components common components 
  /pages page 
  /store mobx state warehouse 
  /utils tools, such as token, axios packaging, etc. 
  App.js root component 
  index.css global style 
  index.js project Entrance

5. Organize the generated file  
src/index.js

import React from 'react'
import ReactDOM from 'react-dom'
import App from './App'

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
)

src/App.js

export default function App() {
  return <div>根组件</div>
}

6. Install the scss preprocessor

npm i sass -D

Create a global style file:index.scss

body {
  margin: 0;
}

#root {
  height: 100%;
}

7. Configure routing

npm i react-router-dom -S

Implementation steps

1. Install routing:yarn add react-router-dom
2. Create two folders in the pages directory: Login, Layout
3. Create index.js files in two directories respectively, and create a simple component to export
4. In the App component, import the routing component and two page components
5. Configure routing rules for Login and Layout

app.js

// 导入路由
import { BrowserRouter, Route, Routes } from 'react-router-dom'

// 导入页面组件
import Login from './pages/Login'
import Layout from './pages/Layout'

// 配置路由规则
function App() {
  return (
    <BrowserRouter>
      <div className="App">
       <Routes>
            <Route path="/" element={<Layout/>}/>
            <Route path="/login" element={<Login/>}/>
        </Routes>
      </div>
    </BrowserRouter>
  )
}

export default App

8. Install the component library antd

npm i antd -S

src/index.js

import 'antd/dist/antd.min.css'
// 再导入全局样式文件，防止样式覆盖！
import './index.css'

9. Configure the alias path

CRA 将所有工程化配置，都隐藏在了 react-scripts 包中，所以项目中看不到任何配置信息
如果要修改 CRA 的默认配置，有以下几种方案：
通过第三方库来修改，比如，@craco/craco （推荐）
通过执行 yarn eject 命令，释放 react-scripts 中的所有配置到项目中

Implementation steps

1. Install packages that modify the CRA configuration:yarn add -D @craco/craco
2. Create a craco configuration file in the project root directory: craco.config.js, and configure the path alias in the configuration file
3. Modifying  package.json script commands
4. In the code,  @ the absolute path of the src directory can be represented by
5. Restart the project for the configuration to take effect

crack.config.js

const path = require('path')

module.exports = {
  // webpack 配置
  webpack: {
    // 配置别名
    alias: {
      // 约定：使用 @ 表示 src 文件所在路径
      '@': path.resolve(__dirname, 'src')
    }
  }
}

package.json

// 将 start/build/test 三个命令修改为 craco 方式
"scripts": {
  "start": "craco start",
  "build": "craco build",
  "test": "craco test",
  "eject": "react-scripts eject"
}

@alias configuration

Implementation steps

1. Create  jsconfig.json a configuration file in the project root directory
2. Add the following configuration in the configuration file

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

vscode will automatically read jsconfig.json the configuration in and let vscode know that @ is the src directory

2. Project construction (using vite method)