Frameworks and tools: React, mirrors, react-app-rewired, customize-cra, ANTD

Reference: gykj.yuque.com/gugcdf/ybmk…

Juejin. Cn/post / 684490…

Steps:

1) NPM install -g create-react-app

2) create the react – app newapp

  1. npm install yarn -g

  2. Yarn add react-app-rewired

  3. Yarn add customize-cra

  4. Yarn add less less-loader -D

  5. yarn add compression-webpack-plugin -D

  6. Modify package.json file:

“scripts”: {

​ “start”: “react-app-rewired start”,

​ “build”: “react-app-rewired build”,

​ “test”: “react-app-rewired test”,

​ “eject”: “react-app-rewired eject”

},

  1. Add the config-overrides. Js file to the root directory

  2. Configure webpack with customize-cra+react-app-rewired

  3. Configure and. : NPM I –save-dev babel-plugin-import

​ nom i –save antd

  1. Add the react-hot-reloader command: NPM I react-hot-loader -d

​ npm i react-app-rewire-hot-loader @hot-loader/react-dom -D

  1. Yarn add lodash-webpack-plugin –dev,

  2. Create a.bable file

React-app-rewired React-app-rewired react-app-rewired react-app-rewired react-app-rewired

Route configuration:

  1. Install mirror for state, routing, and redux management:

npm i –save-dev mirrorx

  1. New model js, container. Js, service, js, the router. Js file,

Mirror.model (),

connect(),

mirror.default({historyModel:”hash”}),

render(,document.getElementById(‘root’)),

Mirror.hook()

Guide to Pit Climbing: a)Invalid options object. Less Loader has been initialized using an options object that does not match the API schema. NPM install [email protected];

B)Cannot find module ‘less’,解决 : NPM I –save-dev less

C) React project less style px unit is changed to check whether addPostcssPlugins are used;

D) Route jump, but the page needs to be manually refreshed. Solve this problem: The Router can only contain a div, and it cannot be a custom component. At the same time, Link and Route should be under the same Router. The path of the path and the url cannot be./ URL