Upgrade React 15.6 to the latest

WilliamForGit — Tue, 16 Apr 2024 07:39:09 +0000

Hi, I hope you guys are doing well.
Currently we have a React web application which using React 15.6.
We plan to upgrade to the latest React version like 18.2 (or direct to React 19?) and with respective packages. At the same time we want to update the UI components also. It will be very grateful that anyone give me some suggestions. Thank you so much.

The packaga.json file like this:
"dependencies": {
"@babel/runtime": "^7.5.5",
"clean-webpack-plugin": "^0.1.17",
"dateformat": "^2.0.0",
"es6-promise": "^4.1.1",
"express": "^4.15.3",
"fuzzy-search": "^3.2.1",
"google-libphonenumber": "^3.2.7",
"immutability-helper": "^2.4.0",
"lightbox-react": "^0.1.5",
"lodash": "^4.17.15",
"material-ui": "^0.18.6",
"memoize-one": "^5.1.1",
"moment": "^2.22.2",
"ngager-commons": "github:ngager-group/ngager-commons#1.0.39",
"ngager-icon": "github:ngager-group/ngager-icon#1.0.8",
"opn": "^5.1.0",
"pdfjs-dist": "^1.8.619",
"prop-types": "^15.5.10",
"pusher-js": "^4.2.1",
"react": "^15.6.1",
"react-color": "^2.13.1",
"react-dnd": "^2.4.0",
"react-dnd-html5-backend": "^2.4.1",
"react-dnd-multi-backend": "^3.1.2",
"react-dnd-scrollzone": "^5.0.0",
"react-dnd-touch-backend": "^0.3.20",
"react-dom": "^15.6.1",
"react-hot-loader": "4.12.9",
"react-player": "^1.14.0",
"react-redux": "^5.0.5",
"react-router": "^4.2.0",
"react-router-dom": "^4.1.1",
"react-tap-event-plugin": "^2.0.1",
"redux": "^3.7.1",
"redux-logger": "^3.0.6",
"redux-persist": "^4.8.2",
"redux-thunk": "^2.2.0",
"resumablejs": "^1.1.0",
"styled-components": "^3.4.9",
"url-loader": "^2.1.0",
"whatwg-fetch": "^2.0.3"
},
"devDependencies": {
"@babel/cli": "^7.5.5",
"@babel/core": "^7.5.5",
"@babel/plugin-proposal-object-rest-spread": "^7.5.5",
"@babel/plugin-transform-async-to-generator": "^7.5.0",
"@babel/plugin-transform-runtime": "^7.5.5",
"@babel/preset-env": "^7.5.5",
"@babel/preset-react": "^7.0.0",
"@babel/traverse": "^7.5.5",
"ajv": "^6.10.2",
"autoprefixer": "^9.6.1",
"babel-eslint": "^10.0.2",
"babel-loader": "^8.0.6",
"case-sensitive-paths-webpack-plugin": "^2.2.0",
"css-loader": "^3.1.0",
"eslint": "^6.1.0",
"eslint-config-airbnb": "^17.1.1",
"eslint-loader": "^2.2.1",
"eslint-plugin-import": "^2.18.2",
"eslint-plugin-jsx-a11y": "^6.2.3",
"eslint-plugin-react": "^7.14.3",
"exports-loader": "^0.7.0",
"file-loader": "4.1.0",
"html-webpack-plugin": "^3.2.0",
"imports-loader": "0.8.0",
"moment-locales-webpack-plugin": "^1.1.2",
"less": "^2.7.2",
"less-loader": "^5.0.0",
"mini-css-extract-plugin": "^0.8.0",
"postcss-loader": "^3.0.0",
"style-loader": "^0.23.1",
"terser-webpack-plugin": "1.3.0",
"webpack": "^4.38.0",
"webpack-cli": "^3.3.6",
"webpack-dev-middleware": "^3.7.0",
"webpack-hot-middleware": "^2.25.0",
"webpack-merge": "^4.1.0"
}

DEV Community: WilliamForGit

Upgrade React 15.6 to the latest