One, foreword

Technology for business! If the technical framework of an existing project is not too old and can support the business well, there is no need to blindly update the project architecture to the latest version. However, in the spirit of learning at all times and with better execution efficiency of the new version framework, we will update the technical framework of relevant projects within reasonable requirements.

1. Update framework details

< span style = "box-sizing: border-box; color: RGB (74, 74, 74); line-height: 20px; font-size: 14px! Important; word-break: inherit! Important;" "2.13.11", the "immutable" : "^ 3.8.1", "" :" ^ 2.18.1 ", "react" : "^ 15.5.4", "react - color" : "^ 2.11.7", "the react - dom" : "^ 15.5.4 react -", "story" : "^ 5.0.4", "the react - the router" : "^ 4.4.1", "the react - the router - dom" : "^ 4.4.1", "the react - the router - redux" : "^ 5.0.0 - alpha. 6", "story" : "^ 3.6.0", "the story - thunk" : "^ 2.2.0", "reselect" : "^" 3.0.1,} "devDependencies" : {" webpack ": "^ 1.14.0",} / / 2. The Target project version "dependencies" : {" antd ":" 2.13.11 ", the "immutable" : "^ 3.8.1", "" : "^ 2.18.1" and "react", "^ 16.11.0", "react - color" : "^ 2.11.7", "the react - dom" : "^ 16.11.0", "the react - redux" : "^ 5.0.4 react", "- the router" : "^ 4.4.1", "the react - the router - dom" : "^ 4.4.1", "the react - the router - redux" : "^ 5.0.0 - alpha. 6", "story" : "^ 3.6.0 redux -", "thunk" : "^ 2.2.0", "reselect" : "^" 3.0.1,} "devDependencies" : {" webpack ":" ^ 1.14.0 ",}Copy the code

2. Update sequence of project framework

Start with the core package (React, Redux, etc.), then the base package (Echarts, Moment, etc.), and finally the toolkit (Webpack, etc.).

2. Enter the upgrade mode

1. Upgrade the core package

npm install --save react@latest react-dom@latest
Copy the code

The following lifecycle functions will be removed after version 17.0 and will need to be renamed to use them.

  • componentWillMount
  • componentWillReceiveProps
  • componentWillUpdate
cd your_project
npx react-codemod rename-unsafe-lifecycles
Copy the code

When using the HOOKS function, configure the following esLint rules for it. Verification rules:

  • Hooks can only be used at the top level
  • You can only call a Hook in the React function, not in normal JavaScript functions
NPM install eslint-plugin-react-hooks --save-dev // Your ESlint configuration {"plugins": [//... "react-hooks"], "rules": {/ /... }}}}}}}}}}}}}}}}}}}Copy the code

2. Upgrade basic packages

3. Upgrade the tool package