DEV Community

WilliamForGit
WilliamForGit

Posted on

Upgrade React 15.6 to the latest

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"
}

Top comments (0)