I’m currently working on a large-scale project that uses React 16.12 and Node 14.5, and I would like to upgrade both to their latest versions. I’ve noticed that there have been significant changes and improvements in both React and Node.js since the versions I’m using, and I want to ensure my project takes advantage of these updates.

Could someone guide me through the process of upgrading both React and Node.js?

Specifically, I am looking for advice on:

1. Best practices for upgrading React:

• What are the steps to upgrade React from 16.12 to the latest version?
• Are there any breaking changes or deprecations I should be aware of?
• How can I update my project dependencies accordingly?

2. Best practices for upgrading Node.js:

• How can I safely upgrade Node.js from 14.5 to the latest version?
• What are the potential issues I might encounter during this upgrade?
• Are there any tools or commands that can help streamline this process?

3. General tips:

• How can I test my project thoroughly after the upgrades to ensure nothing is broken?
• Any recommended resources or documentation for further reading on these upgrades?

Here is my current package.json for reference:

{
  "name": "my-project",
  "version": "0.1.10",
  "private": true,
  "engines": {
    "node": ">=13.0.0"
  },
  "dependencies": {
    "@ant-design/charts": "^1.4.2",
    "@ant-design/compatible": "^1.0.2",
    "@ant-design/icons": "^4.1.0",
    "@google/model-viewer": "^1.6.0",
    "@stripe/react-stripe-js": "^1.7.0",
    "@stripe/stripe-js": "^1.11.0",
    "@use-it/event-listener": "^0.1.6",
    "amazon-cognito-identity-js": "^1.19.0",
    "antd": "^4.10.0",
    "array-move": "^4.0.0",
    "axios": "^0.21.1",
    "babel-plugin-import": "^1.13.3",
    "blueimp-load-image": "^5.14.0",
    "body-scroll-lock": "^3.0.3",
    "canvas2pdf": "^1.0.7",
    "chart.js": "^2.9.3",
    "colorette": "^1.2.1",
    "core-js": "^3.25.5",
    "country-state-city": "^3.0.1",
    "crypto-js": "^4.0.0",
    "customize-cra": "^0.9.1",
    "dom-to-image-more": "^2.8.0",
    "exceljs": "^4.3.0",
    "exif-js": "^2.3.0",
    "fabric": "^4.3.0",
    "fabric-webpack": "^1.6.0-rc.1",
    "file-saver": "^2.0.5",
    "formik": "^1.5.8",
    "highcharts": "^8.1.2",
    "highcharts-react-official": "^2.2.2",
    "immutability-helper": "^3.1.1",
    "is-touch-device": "^1.0.1",
    "jquery": "^3.4.1",
    "jspdf": "^1.5.3",
    "jszip": "^3.7.1",
    "jwt-decode": "^2.2.0",
    "lodash.debounce": "^4.0.8",
    "moment": "^2.29.4",
    "moment-timezone": "^0.5.39",
    "pdfjs-dist": "^2.5.207",
    "rc-color-picker": "^1.2.6",
    "react": "^16.12.0",
    "react-app-rewired": "^2.1.8",
    "react-butterfiles": "^1.3.3",
    "react-chartjs-2": "^2.8.0",
    "react-circular-progressbar": "^2.0.2",
    "react-cognito": "^1.5.0",
    "react-color": "^2.19.3",
    "react-csv": "^1.1.2",
    "react-data-export": "^0.6.0",
    "react-dnd": "^11.1.3",
    "react-dnd-html5-backend": "^11.1.3",
    "react-dom": "^16.12.0",
    "react-draggable": "^4.4.5",
    "react-fabricjs": "^0.1.6",
    "react-image-magnifiers": "^1.4.0",
    "react-image-magnify": "^2.7.4",
    "react-image-zoom": "^1.3.1",
    "react-mentions": "^4.4.10",
    "react-multi-carousel": "^2.8.0",
    "react-photo-collage": "^1.0.7",
    "react-player": "^2.7.2",
    "react-promise-tracker": "^2.1.0",
    "react-redux": "^5.0.5",
    "react-router-dom": "^4.1.2",
    "react-scripts": "^3.4.1",
    "react-sortable-hoc": "^2.0.0",
    "react-three-fiber": "^4.2.20",
    "react-to-pdf": "0.0.14",
    "react-virtualized": "^9.22.5",
    "react-virtualized-auto-sizer": "^1.0.15",
    "react-zoom-pan-pinch": "^1.6.1",
    "reactjs-percentage-circle": "^1.0.0",
    "reactour": "^1.18.0",
    "redux": "^3.7.2",
    "redux-observable": "^1.2.0",
    "redux-thunk": "^2.3.0",
    "resolve-url-loader": "^3.1.2",
    "round-slider": "^1.4.1",
    "rxjs": "^6.5.3",
    "rxjs-compat": "^6.5.4",
    "styled-components": "^5.1.0",
    "three": "^0.113.2",
    "uuid": "^8.3.2",
    "xlsx": "^0.17.5"
  },
  "scripts": {
    "start": "react-app-rewired start",
    "build": "set "GENERATE_SOURCEMAP=false" && react-app-rewired build",
    "build:staging": "set REACT_APP_ENV=staging && react-app-rewired build",
    "deploy": "aws s3 sync build/ s3://my-project --acl public-read",
    "deploy-dev": "aws s3 sync build/ s3://my-project-dev-dev --acl public-read",
    "invalidate-dev": "aws cloudfront create-invalidation --distribution-id <DistID> --paths "/*"",
    "invalidate": "aws cloudfront create-invalidation --distribution-id <DistID> --paths "/*"",
    "test": "react-app-rewired test",
    "lint": "eslint src",
    "release": "standard-version",
    "eject": "react-app-rewired eject"
  },
  "devDependencies": {
    "eslint": "^6.6.0",
    "eslint-config-google": "^0.14.0",
    "eslint-plugin-react": "^7.22.0",
    "less": "^3.13.1",
    "less-loader": "^5.0.0",
    "node-sass": "^4.14.1",
    "prop-types": "^15.5.10",
    "standard-version": "^7.1.0"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}