1. React Scaffolding installation

Yarn add create-react-app -g // Install the react scaffolding create-react-app my-app // Install third-party dependencies required by the react basic development environment CD my-app // Enter the project YARN Start // Run the projectCopy the code

2. Page division

Assets stores static resources, such as CSS, font, and IMG files. Common stores public files. Components stores react JSX files Utils holds the encapsulated utility function views holds the page componentCopy the code

3. Configure the path alias

Yarn add @craco/craco create a new craco.config.js file const path = require("path"); const resolve = dir => path.resolve(__dirname, dir) module.exports = { webpack: { alias: { "@": resolve("src"), "components": resolve("src/components") } } }Copy the code

4. Configure routes

Yarn add react-router-dom yarn add react-router-config // Create an index entry file in the router directory const routers = [{path: '/', exact: True, component: component}]; Import {renderRoutes} from 'react-router-config' import {renderRoutes} from 'react-router-config' import {renderRoutes} from the app. js file <NavLink to={"/"}Copy the code

5. Set styles

Yarn add Styled - Components // Create a style.js file under the folder of the corresponding component to export the corresponding style // Reference the exported file under the corresponding component and replace the corresponding HTML tags // reduce conflicts between multiple style files import Styled from 'styled-components'; Export const HeaderWrapper = styled. Div '/* The style */' can be set hereCopy the code

6. Use ant – design

Yarn add antd/ / use antd yarn add @ant-design/ ICONS // use antD ICONS // import @import "~antd/dist/antd. CSS "in the CSS file;Copy the code

7 Use Redux and middleware

yarn add redux react-redux react-thunk
Copy the code

Note:

import {Fragment} from 'react'; If you don't want the page to render div or other elements, you can use the Fragment tag instead of the react project to import the background image and display background-image: Default background-image: url(${require('@/assets/img/sprite_01.png').default});Copy the code