Adjust project structure

Add @ types

Add the typescript global type definition file holder @types to the root directory

Add structure inside SRC

Assets, Components, Constants, layouts, utils, Style, Pages, hooks, etc

The adjusted file directory structure is as follows:

My-app ├─.vsCode # vsCode Config directory │ ├─ Extensions. json # ├─ Settings. json # │ ├─ common.code-Snippets # ├─.@types # Global Type Declaration ├─ node_modules ├─ public # Public files │ ├─ ├─ ├─ favicon. Ico │ ├─ ├─ manifest.html # import │ ├─ ├─ SRC # ├─ Assets │ ├─ Components # Public ├─ ├─ Constants # Store API and other common types of constant files in │ │ ├─ API # Define background API file ├─ layouts # │ ├─ Models # You can use the state and Actions module │ ├─ Pages component Directory │ ├─ For all of these areas, please contact us for more information ├ ─ ─ utils # public utility functions │ ├ ─ ─ App. CSS │ ├ ─ ─ App. Js │ ├ ─ ─ App. Test. The TSX │ ├ ─ ─ index. The CSS │ ├ ─ ─ index. The TSX │ ├ ─ ─ logo. The SVG │ └ ─ ─ ReportWebVitals. Ts │ └ ─ ─ setupTests. Ts ├ ─ ─. # eslintignore eslint ignore file configuration ├ ─ ─. # eslintrc eslint configuration file ├ ─ ─ the gitignore # git ├── Missing file ├─.prettierrc # Prettier ├─.stylelintrc.json # Stylelint ├─ Packa.json ├─ readme.md ├─ Json # Typescript ├─ Yarn Lock # Yarn Lock fileCopy the code

The introduction of ant – design

Install the CRACO module recommended by ANTD

yarn add antd @craco/craco
Copy the code

Modify the startup instructions in 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",}Copy the code

Add craco.config.js to the root directory

Craco.config. js, mainly for the convenience of external modification of webPack configuration without eject exposure in create-React-app

/* craco.config.js */
module.exports = {
  // ...
};
Copy the code

Custom themes

/* src/App.js */
- import './App.css';
+ import './App.less';

/* src/App.less */- the @import '~antd/dist/antd.css';
+ @import '~antd/dist/antd.less';
Copy the code

Install craco – less

yarn add craco-less
Copy the code

Modify the craco.config.js file as follows

+ const CracoLessPlugin = require('craco-less');

+ module.exports = {
      plugins: [{plugin: CracoLessPlugin,
          options: {
            lessLoaderOptions: {
              lessOptions: {
                modifyVars: { '@primary-color': '#1DA57A' },
                javascriptEnabled: true,},},},},],};Copy the code

Support decorator

yarn add @babel/plugin-proposal-decorators --dev
Copy the code

Modify the craco.config.js file as follows

babel:{  
    plugins: [["@babel/plugin-proposal-decorators", { legacy: true}}]].Copy the code

Configure the agent

Modify the craco.config.js file as follows

// Configure proxy resolution across domains
devServer: {
    proxy: {
         "/api": {
             target: "http://baidu.com"./ / target: 'http://192.168.9.19:8080',
             changeOrigin: true.pathRewrite: {
                 "^/api": ""}}}}Copy the code

Configure antD less to load on demand

yarn add babel-plugin-import
Copy the code

Modify the craco.config.js file as follows

babel:{  
    plugins: [["@babel/plugin-proposal-decorators", { legacy: true}]./ / a decorator
      [   
        "import", 
        {
          "libraryName": "antd"."libraryDirectory": "es"."style": true // Set to true to less}}]].Copy the code

@import ‘~antd/dist/antd.less’;

After loading on demand, you just need to import components, no need to import additional style files, Babel will automatically import styles for you on demand. The resulting package will be smaller.

Configure an alias

Purpose: To reduce path complexity for subsequent references

Modify the craco.config.js file as follows

const path = require('path');
webpack: {
    / / alias
    alias: {
      "@": path.resolve("src"),
      "@utils": path.resolve("src/utils"),}},Copy the code

Add ANTD and Ant internationalization

yarn add antd
Copy the code

Index. TSX adds international language packs

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import zhCN from 'antd/lib/locale/zh_CN';// Add language pack support
ReactDOM.render(
  <React.StrictMode>
      <App />
  </React.StrictMode>.document.getElementById('root'));Copy the code

Index.tsx provides uniform global configuration for components

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import zhCN from 'antd/lib/locale/zh_CN'; // Add language pack support
import { ConfigProvider } from 'antd'; // Provide uniform global configuration for components
ReactDOM.render(
  <React.StrictMode>
    <ConfigProvider locale={zhCN}>
      <App />
    </ConfigProvider>
  </React.StrictMode>.document.getElementById('root'));Copy the code