Construcción del proyecto React (react hooks+react-router-dom+mobx+antd)

1. Construcción del proyecto (sin utilizar el método vite)

1. Utilice create-react-app para generar el proyecto npx create-react-app pc

2. ingrese al directorio raíz cd pc

3. iniciar proyecto npm start

4. Ajustar la estructura del directorio del proyecto

/src 
  /assets archivos de recursos del proyecto, como imágenes, etc. 
  /components componentes comunes 
  /pages página 
  /store mobx state warehouse 
  /utils herramientas, como token, paquete axios, etc. 
  App.js componente raíz 
  index.css 
  índice de estilo global Entrada al proyecto .js

5. Organice el archivo generado  
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. Instale el preprocesador scss

npm i sass -D

Cree un archivo de estilo global:index.scss

body {
  margin: 0;
}

#root {
  height: 100%;
}

7. Configurar el enrutamiento

npm i react-router-dom -S

Pasos de implementación

1. Instalar enrutamiento:yarn add react-router-dom
2. Cree dos carpetas en el directorio de páginas: Inicio de sesión, Diseño
3. Cree archivos index.js en dos directorios respectivamente y cree un componente simple para exportar
4. En el componente de la aplicación, importe el componente de enrutamiento y dos componentes de página.
5. Configurar reglas de enrutamiento para inicio de sesión y diseño

aplicación.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. Instale la biblioteca de componentes antd.

npm i antd -S

src/index.js

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

9. Configure la ruta del alias

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

Pasos de implementación

1. Instale paquetes que modifiquen la configuración de CRA:yarn add -D @craco/craco
2. Cree un archivo de configuración de craco en el directorio raíz del proyecto: craco.config.jsy configure el alias de ruta en el archivo de configuración
3. Modificar  package.json comandos de script
4. En el código,  @ la ruta absoluta del directorio src se puede representar mediante
5. Reinicie el proyecto para que la configuración surta efecto.

crack.config.js

const path = require('path')

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

paquete.json

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

configuración @alias

Pasos de implementación

1. Cree  jsconfig.json un archivo de configuración en el directorio raíz del proyecto.
2. Agregue la siguiente configuración en el archivo de configuración.

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

vscode leerá automáticamente jsconfig.json la configuración y le permitirá saber a vscode que @ es el directorio src

2. Construcción del proyecto (usando el método vite)