feat: upgrade to react 18, react-router v6, react-redux v8

Author: alexandr-g

package.json

@@ -4,7 +4,7 @@
   "license": "MIT",
   "author": "Alexander Grischuk <alexgrischuk@gmail.com",
   "engines": {
-    "node": ">=10"
+    "node": ">=16"
   },
   "main": "template.json",
   "description": "A quick start Create React App template with React Router, Redux, TypeScript, Enzyme and custom ESlint configurations",
@@ -35,18 +35,15 @@
     "url": "https://github.com/alexandr-g/cra-template-typescript-redux/issues"
   },
   "dependencies": {
-    "@types/enzyme": "^3.10.4",
-    "@types/jest": "^27.0.0",
+    "@babel/runtime": "^7.21.5",
+    "@testing-library/react": "^14.0.0",
     "@types/node": "^14.0.0",
-    "@types/react": "^17.0.0",
-    "@types/react-dom": "^17.0.0",
-    "@types/react-redux": "^7.1.5",
-    "@types/react-router-dom": "^5.1.3",
+    "@types/react": "^18.2.6",
+    "@types/react-dom": "^18.2.4",
+    "@types/react-router-dom": "^5.3.3",
     "@types/redux-mock-store": "^1.0.1",
     "@typescript-eslint/eslint-plugin": "^5.59.5",
     "@typescript-eslint/parser": "5.9.1",
-    "@wojtekmaj/enzyme-adapter-react-17": "^0.6.0",
-    "enzyme": "^3.11.0",
     "eslint": "^8.6.0",
     "eslint-config-airbnb-typescript": "^16.1.0",
     "eslint-config-prettier": "^8.0.0",
@@ -56,11 +53,11 @@
     "eslint-plugin-react": "^7.21.5",
     "eslint-plugin-react-hooks": "^4.0.8",
     "prettier": "^2.0.0",
-    "react": "^17.0.0",
-    "react-dom": "^17.0.0",
-    "react-redux": "^7.1.3",
-    "react-router-dom": "^5.1.2",
-    "react-scripts": "5.0.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-redux": "^8.0.5",
+    "react-router-dom": "^6.11.1",
+    "react-scripts": "^5.0.1",
     "redux": "^4.0.5",
     "redux-devtools-extension": "^2.13.8",
     "redux-mock-store": "^1.5.4",
@@ -113,6 +110,7 @@
     "@semantic-release/changelog": "6.0.1",
     "@semantic-release/git": "10.0.1",
     "@semantic-release/github": "8.0.2",
+    "@testing-library/jest-dom": "^5.16.5",
     "codecov": "3.8.3",
     "commitizen": "4.2.4",
     "cypress": "9.4.1",

src/App.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { BrowserRouter, Switch, Route } from 'react-router-dom'
+import { BrowserRouter, Routes, Route } from 'react-router-dom'
 
 import { Navbar } from './components/Navbar'
 import { About } from './pages/About'
@@ -10,10 +10,10 @@ const App: React.FC = () => {
     <BrowserRouter>
       <Navbar />
       <div className="container">
-        <Switch>
-          <Route path="/" component={Home} exact />
-          <Route path="/about" component={About} />
-        </Switch>
+        <Routes>
+          <Route path="/" element={<Home />} />
+          <Route path="/about" element={<About />} />
+        </Routes>
       </div>
     </BrowserRouter>
   )

src/index.tsx

@@ -1,15 +1,16 @@
-import React from 'react'
-import ReactDOM from 'react-dom'
+import { createRoot } from 'react-dom/client'
 import { Provider } from 'react-redux'
 import store from './store'
 
 import './index.css'
 
 import App from './App'
 
-ReactDOM.render(
+const container = document.getElementById('root') as HTMLDivElement
+const root = createRoot(container!)
+
+root.render(
   <Provider store={store}>
     <App />
-  </Provider>,
-  document.getElementById('root')
+  </Provider>
 )