1 the scaffold

  • CRA (common)

    • Global scaffolding installation (once only)
      • npm i create-react-app -g
    • Set up the project
      • The create – react – app project name
    • Go to project folder
      • CD project name

  • Create regular folders manually

    • Components project common component library
    • Assets project static resources folder, such as IMG, style, third-party JS, font files
    • Views /pages Component directory corresponding to the project route
    • Utils project public wrapper libraries such as rem.js and request.js
    • The router routing
    • Store Status Management

2 Import the component library

  • PC – such as antd

  • App-antd-mobile (this component is used as an example)

  • Configure ANTD-Mobile (Imported on Demand)

    • yarn add antd-mobile -D
    • yarn add react-app-rewired customize-cra -D
    • Go to package.json and change the quick startup commands for scripts react-scripts to react-app-rewired
    • Create the config-overrides. Js file in the root directory of the project to modify the default configuration
    • Yarn add babel-plugin-import -d
    • Write code in the config-overrides. Js file
    const { override, fixBabelImports } = require('customize-cra');

module.exports = override(
  fixBabelImports('import', {
    libraryName: 'antd-mobile'.style: 'css',}));Copy the code

  • The configuration is complete, and the reference component is

import { Button, WhiteSpace } from 'antd-mobile';
Copy the code

3 webpack configuration

3.1 Configuring a Path Alias

  • Enter the config – overrides. Js
  • The addWebpackAlias module is imported from customize-cra to configure the path alias
  • Configuration method
const { override, fixBabelImports, addWebpackAlias } = require('customize-cra');

const path = require('path')

function pathFn (pathUrl) {// Simplify the code
  return path.join(__dirname, pathUrl)
}

module.exports = override(
  fixBabelImports('import', {
    libraryName: 'antd-mobile'.style: 'css',
  }),
  addWebpackAlias({
    The '@' : pathFn('./src'),
    'assets' : pathFn('./src/assets'),
    'components' : pathFn('./src/components'),
    'router' : pathFn('./src/router'),
    'utils' : pathFn('./src/utils'),
    'views' : pathFn('./src/views'),
    'store' : pathFn('./src/store')}));Copy the code

3.2 sass configuration

  • yarn add node-sass sass-loader -D
    • If the node – sass installation, replacement download source yarn config set sass – binary – site npm.taobao.org/mirrors/nod…

3.3 Reverse Proxy

  • Create the setupproxy.js file in the SRC directory
  • Install middleware yarn add HTTP-proxy-middleware
  • Write the code in setupproxy.js
  • The following configuration methods are applicable to HTTP-proxy-Middleware ^0.20.0 and have been updated to ^1.0.0. Please refer to the documentation for the new configuration methods
const proxy = require('http-proxy-middleware')

module.exports = function (app) {
  app.use(proxy(
    '/ajax', {
      target: 'http://m.maoyan.com'.// The requested domain name
      changeOrigin: true// Use our current http://localhost:3000 instead of the target source
    }
  ))

  app.use(proxy(
    '/ajax', {
      target: 'http://m.maoyan.com'.// The requested domain name
      changeOrigin: true// Use our current http://localhost:3000 instead of the target source}}))Copy the code

The basic mechanism of react project has been set up. To configure SPA routing, you need to configure spa routing

The foundation determines the future, one step at a time