Merge pull request #1036 from wellyshen/feature/react-v17

Feat: migrate to React v17 & upgrade deps

.eslintrc.js

@@ -9,8 +9,6 @@ module.exports = {
     "plugin:jest-dom/recommended",
     "plugin:testing-library/react",
     "prettier",
-    "prettier/@typescript-eslint",
-    "prettier/react",
   ],
   plugins: ["@typescript-eslint", "jest", "jest-dom", "testing-library"],
   settings: {
@@ -25,11 +23,12 @@ module.exports = {
     jest: true,
   },
   rules: {
-    "no-use-before-define": "off",
     "global-require": "off",
+    "no-use-before-define": "off",
     "no-console": "off",
     "no-underscore-dangle": "off",
     "no-param-reassign": "off",
+    "react/react-in-jsx-scope": "off",
     "react/jsx-props-no-spreading": "off",
     "react/jsx-filename-extension": [
       "error",
@@ -44,10 +43,11 @@ module.exports = {
         devDependencies: true,
       },
     ],
-    "@typescript-eslint/no-use-before-define": "error",
     "@typescript-eslint/ban-ts-comment": "off",
     "@typescript-eslint/no-explicit-any": "off",
     "@typescript-eslint/no-var-requires": "off",
+    "testing-library/no-node-access": "off",
+    "testing-library/render-result-naming-convention": "off",
   },
   globals: {
     __CLIENT__: true,

.github/ISSUE_TEMPLATE/feature_request.md

@@ -1,10 +1,9 @@
 ---
 name: "\U0001F4A1 Feature Request"
 about: Suggest an idea for this project
-title: ''
-labels: ''
-assignees: ''
-
+title: ""
+labels: ""
+assignees: ""
 ---
 
 # Feature Request

.github/ISSUE_TEMPLATE/question.md

@@ -1,10 +1,9 @@
 ---
 name: "\U0001F914 Questions and Help"
 about: This issue tracker is not for questions. Please ask questions at https://stackoverflow.com/questions/tagged/react.
-title: ''
-labels: ''
-assignees: ''
-
+title: ""
+labels: ""
+assignees: ""
 ---
 
 GitHub Issues are reserved for Bug reports and Feature requests. Support requests that are created as issues are likely to be closed. We want to make sure you are able to find the help you seek. Please take a look at the following resources.

README.md

@@ -505,7 +505,7 @@ In this starter, you can see I use [React.PureComponent](https://reactjs.org/doc
 - `React.PureComponent` is used for React class components. It can do shallow prop and state comparison for a performance boost:
 
 ```js
-import React, { PureComponent } from "react";
+import { PureComponent } from "react";
 
 class MyComponent extends PureComponent {
   // Only re-renders if props change
@@ -515,7 +515,7 @@ class MyComponent extends PureComponent {
 - `React.memo` is used for functional components. It plays the same role as `React.PureComponent`:
 
 ```js
-import React, { memo } from "react";
+import { memo } from "react";
 
 const MyComponent = memo((props) => {
   // Only re-renders if props change
@@ -525,7 +525,7 @@ const MyComponent = memo((props) => {
 - In addition, you can also use React hooks like [useMemo](https://reactjs.org/docs/hooks-reference.html#usememo) or [useCallback](https://reactjs.org/docs/hooks-reference.html#usecallback) to avoid expensive calculations on every render:
 
 ```js
-import React, { useMemo, useCallback } from "react";
+import { useMemo, useCallback } from "react";
 
 // Performance optimizing via useMemo()
 const ParentComponent = (props) => (

babel.config.json

@@ -1,14 +1,19 @@
 {
   "presets": [
     [
-      "@babel/env",
+      "@babel/preset-env",
       {
         "useBuiltIns": "usage",
         "corejs": 3
       }
     ],
-    "@babel/typescript",
-    "@babel/react"
+    "@babel/preset-typescript",
+    [
+      "@babel/preset-react",
+      {
+        "runtime": "automatic"
+      }
+    ]
   ],
   "plugins": ["@loadable/babel-plugin", "@babel/plugin-transform-runtime"],
   "env": {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-cool-starter",
-  "version": "4.0.0",
+  "version": "4.1.0",
   "private": true,
   "description": "A starter boilerplate for a universal web application with the best development experience and best practices.",
   "license": "MIT",
@@ -67,119 +67,119 @@
     "last 2 versions"
   ],
   "dependencies": {
-    "@babel/preset-env": "^7.12.7",
-    "@babel/preset-react": "^7.12.7",
-    "@babel/preset-typescript": "^7.12.7",
-    "@babel/register": "^7.12.1",
-    "@babel/runtime": "^7.12.5",
+    "@babel/preset-env": "^7.13.15",
+    "@babel/preset-react": "^7.13.13",
+    "@babel/preset-typescript": "^7.13.0",
+    "@babel/register": "^7.13.14",
+    "@babel/runtime": "^7.13.10",
     "@dr.pogodin/css-modules-require-hook": "^4.5.1",
     "@loadable/babel-plugin": "^5.13.2",
     "@loadable/component": "^5.14.1",
     "@loadable/server": "^5.14.2",
-    "@reduxjs/toolkit": "^1.5.0",
+    "@reduxjs/toolkit": "^1.5.1",
     "asset-require-hook": "^1.2.0",
-    "autoprefixer": "^10.0.4",
+    "autoprefixer": "^10.2.5",
     "axios": "^0.21.1",
     "babel-plugin-transform-remove-console": "^6.9.4",
     "chalk": "^4.1.0",
     "compression": "^1.7.4",
-    "connected-react-router": "^6.8.0",
-    "core-js": "^3.8.0",
+    "connected-react-router": "^6.9.1",
+    "core-js": "^3.10.1",
     "cross-env": "^7.0.3",
     "eslint-plugin-react-hooks": "^4",
     "express": "^4.17.1",
-    "helmet": "^4.2.0",
+    "helmet": "^4.5.0",
     "history": "^4.10.1",
     "hpp": "^0.2.3",
     "html-minifier": "^4.0.0",
     "morgan": "^1.10.0",
     "node-sass": "^5.0.0",
     "normalize.css": "^8.0.1",
-    "react": "^16.14.0",
-    "react-dom": "^16.14.0",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
     "react-helmet": "^6.1.0",
-    "react-redux": "^7.2.2",
+    "react-redux": "^7.2.3",
     "react-router": "^5.2.0",
     "react-router-config": "^5.1.1",
     "react-router-dom": "^5.2.0",
     "redux-thunk": "^2.3.0",
     "serialize-javascript": "^5.0.1",
     "serve-favicon": "^2.5.0",
-    "ts-node": "^9.1.0"
+    "ts-node": "^9.1.1"
   },
   "devDependencies": {
-    "@babel/core": "^7.12.9",
-    "@babel/plugin-transform-runtime": "^7.12.1",
+    "@babel/core": "^7.13.15",
+    "@babel/plugin-transform-runtime": "^7.13.15",
     "@loadable/webpack-plugin": "^5.14.2",
     "@pmmmwh/react-refresh-webpack-plugin": "^0.4.3",
-    "@testing-library/jest-dom": "^5.11.6",
-    "@testing-library/react": "^11.2.2",
+    "@testing-library/jest-dom": "^5.11.10",
+    "@testing-library/react": "^11.2.6",
     "@types/compression": "^1.7.0",
-    "@types/express": "^4.17.9",
+    "@types/express": "^4.17.11",
     "@types/helmet": "^0.0.48",
     "@types/hpp": "^0.2.1",
     "@types/html-minifier": "^4.0.0",
-    "@types/jest": "^26.0.16",
+    "@types/jest": "^26.0.22",
     "@types/loadable__component": "^5.13.3",
     "@types/loadable__server": "^5.12.5",
     "@types/morgan": "^1.9.2",
-    "@types/react": "^16.14.0",
-    "@types/react-dom": "^16.9.9",
-    "@types/react-helmet": "^6.1.0",
-    "@types/react-redux": "^7.1.11",
-    "@types/react-router": "^5.1.8",
-    "@types/react-router-config": "^5.0.1",
-    "@types/react-router-dom": "^5.1.6",
-    "@types/react-test-renderer": "^16.9.3",
+    "@types/react": "^17.0.3",
+    "@types/react-dom": "^17.0.3",
+    "@types/react-helmet": "^6.1.1",
+    "@types/react-redux": "^7.1.16",
+    "@types/react-router": "^5.1.13",
+    "@types/react-router-config": "^5.0.2",
+    "@types/react-router-dom": "^5.1.7",
+    "@types/react-test-renderer": "^17.0.1",
     "@types/redux-mock-store": "^1.0.2",
-    "@types/serialize-javascript": "^4.0.0",
+    "@types/serialize-javascript": "^5.0.0",
     "@types/serve-favicon": "^2.5.2",
-    "@typescript-eslint/eslint-plugin": "^4.9.1",
-    "@typescript-eslint/parser": "^4.9.0",
+    "@typescript-eslint/eslint-plugin": "^4.22.0",
+    "@typescript-eslint/parser": "^4.22.0",
     "babel-loader": "^8.2.2",
     "compression-webpack-plugin": "^7.1.2",
     "css-loader": "^5.2.2",
     "css-minimizer-webpack-plugin": "^2.0.0",
     "eslint": "^7.14.0",
     "eslint-config-airbnb": "^18.2.1",
-    "eslint-config-prettier": "^6.15.0",
-    "eslint-import-resolver-typescript": "^2.3.0",
+    "eslint-config-prettier": "^8.2.0",
+    "eslint-import-resolver-typescript": "^2.4.0",
     "eslint-plugin-import": "^2.22.1",
-    "eslint-plugin-jest": "^24.1.3",
-    "eslint-plugin-jest-dom": "^3.6.0",
+    "eslint-plugin-jest": "^24.3.5",
+    "eslint-plugin-jest-dom": "^3.8.0",
     "eslint-plugin-jsx-a11y": "^6.4.1",
-    "eslint-plugin-react": "^7.21.5",
-    "eslint-plugin-testing-library": "^3.10.1",
+    "eslint-plugin-react": "^7.23.2",
+    "eslint-plugin-testing-library": "^4.0.2",
     "fork-ts-checker-webpack-plugin": "^6.2.1",
-    "husky": "^5.1.3",
+    "husky": "^6.0.0",
     "identity-obj-proxy": "^3.0.0",
     "image-minimizer-webpack-plugin": "^2.2.0",
     "imagemin-gifsicle": "^7.0.0",
     "imagemin-jpegtran": "^7.0.0",
     "imagemin-optipng": "^8.0.0",
     "imagemin-svgo": "^9.0.0",
     "jest": "^26.6.3",
-    "lint-staged": "^10.5.3",
+    "lint-staged": "^10.5.4",
     "mini-css-extract-plugin": "^1.5.0",
-    "nodemon": "^2.0.6",
+    "nodemon": "^2.0.7",
     "npm-run-all": "^4.1.5",
-    "postcss": "^8.1.14",
+    "postcss": "^8.2.10",
     "postcss-loader": "^5.2.0",
     "prettier": "^2.2.1",
     "react-refresh": "^0.10.0",
-    "react-test-renderer": "^16.14.0",
+    "react-test-renderer": "^17.0.2",
     "redux-mock-store": "^1.5.4",
     "rimraf": "^3.0.2",
     "sass-loader": "^11.0.1",
     "source-map-loader": "^2.0.1",
-    "stylelint": "^13.8.0",
+    "stylelint": "^13.12.0",
     "stylelint-config-prettier": "^8.0.2",
     "stylelint-config-recommended-scss": "^4.2.0",
-    "stylelint-config-standard": "^20.0.0",
-    "stylelint-scss": "^3.18.0",
+    "stylelint-config-standard": "^21.0.0",
+    "stylelint-scss": "^3.19.0",
     "terser-webpack-plugin": "^5.1.1",
-    "ts-jest": "^26.4.4",
-    "typescript": "^4.1.2",
+    "ts-jest": "^26.5.5",
+    "typescript": "^4.2.4",
     "webpack": "^5.33.2",
     "webpack-bundle-analyzer": "^4.4.1",
     "webpack-cli": "^4.6.0",

src/app/__tests__/App.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import renderer from "react-test-renderer";
 import { Provider } from "react-redux";
 import { MemoryRouter } from "react-router-dom";

src/app/index.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import { Link } from "react-router-dom";
 import { RouteConfig, renderRoutes } from "react-router-config";
 import { Helmet } from "react-helmet";

src/client/index.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import ReactDOM from "react-dom";
 import { Provider } from "react-redux";
 import { ConnectedRouter } from "connected-react-router";

src/components/ErrorBoundary/__tests__/ErrorBoundary.tsx

@@ -1,4 +1,4 @@
-import React, { ReactNode } from "react";
+import { ReactNode } from "react";
 import { render, screen } from "@testing-library/react";
 import { MemoryRouter } from "react-router-dom";
 

src/components/ErrorBoundary/index.tsx

@@ -1,4 +1,4 @@
-import React, { ReactNode, PureComponent } from "react";
+import { ReactNode, PureComponent } from "react";
 
 interface Props {
   children?: ReactNode;

src/components/Info/__tests__/Info.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import { render } from "@testing-library/react";
 import { MemoryRouter } from "react-router-dom";
 

src/components/Info/index.tsx

@@ -1,4 +1,4 @@
-import React, { memo } from "react";
+import { memo } from "react";
 
 import { User } from "../../services/jsonPlaceholder";
 import styles from "./styles.module.scss";

src/components/List/__tests__/List.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import { render } from "@testing-library/react";
 import { MemoryRouter } from "react-router-dom";
 

src/components/List/index.tsx

@@ -1,4 +1,4 @@
-import React, { memo } from "react";
+import { memo } from "react";
 import { Link } from "react-router-dom";
 
 import { User } from "../../services/jsonPlaceholder";

src/components/Loading/__tests__/Loading.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import { render } from "@testing-library/react";
 import { MemoryRouter } from "react-router-dom";
 

src/components/Loading/index.tsx

@@ -1,5 +1,3 @@
-import React from "react";
-
 import styles from "./styles.module.scss";
 
 export default (): JSX.Element => (

src/pages/Home/Home.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, memo } from "react";
+import { useEffect, memo } from "react";
 import { useDispatch, useSelector, shallowEqual } from "react-redux";
 import { Helmet } from "react-helmet";
 

src/pages/Home/__tests__/Home.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import { render } from "@testing-library/react";
 import { MemoryRouter } from "react-router-dom";
 

src/pages/NotFound/__tests__/NotFound.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import { render } from "@testing-library/react";
 import { MemoryRouter } from "react-router-dom";
 

src/pages/NotFound/index.tsx

@@ -1,4 +1,4 @@
-import React, { memo } from "react";
+import { memo } from "react";
 import { Helmet } from "react-helmet";
 
 import styles from "./styles.module.scss";

src/pages/UserInfo/UserInfo.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, memo } from "react";
+import { useEffect, memo } from "react";
 import { useDispatch, useSelector, shallowEqual } from "react-redux";
 import { Helmet } from "react-helmet";
 

src/pages/UserInfo/__tests__/UserInfo.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import { render } from "@testing-library/react";
 import { MemoryRouter } from "react-router-dom";
 

src/server/renderHtml.ts

@@ -59,6 +59,6 @@ export default (
     minifyURLs: true,
   };
 
-  // Minify html in production
+  // Minify HTML in production
   return __DEV__ ? html : minify(html, minifyConfig);
 };

src/server/ssr.tsx

@@ -1,5 +1,4 @@
 import path from "path";
-import React from "react";
 import { renderToString } from "react-dom/server";
 import { StaticRouter } from "react-router-dom";
 import { renderRoutes, matchRoutes } from "react-router-config";