Feature/APPEALS-43728-react-18-upgrade-release (#1729)

* Shaw/APPEALS-44523 react upgrade 10 23 (#1726)

* inital commit

* updated react-redux to match frontend toolkit

* lint fix

* remove comments

* modified: package.json with new Caseflow-frontend-toolkit branch

* update toolkit hash

---------

Co-authored-by: hawkespoulterva <hawkes.poulter@va.gov>

* cashflow-frontend-toolkit commit hash updated

* updated yarn.lock

---------

Co-authored-by: AdamShawBAH <136732962+AdamShawBAH@users.noreply.github.com>
Co-authored-by: hawkespoulterva <hawkes.poulter@va.gov>

client/package.json

@@ -37,19 +37,19 @@
     "@babel/preset-react": "^7.0.0",
     "@babel/register": "^7.7.0",
     "@babel/runtime-corejs2": "^7.0.0",
-    "@department-of-veterans-affairs/caseflow-frontend-toolkit": "https://github.com/department-of-veterans-affairs/caseflow-frontend-toolkit#a05abe6",
+    "@department-of-veterans-affairs/caseflow-frontend-toolkit": "https://github.com/department-of-veterans-affairs/caseflow-frontend-toolkit#23189e99",
     "babel-loader": "^8.0.0",
     "es5-shim": "^4.5.10",
     "glamor": "^2.20.40",
     "history": "^4.7.2",
     "imports-loader": "^0.7.1",
     "prop-types": "^15.6.0",
-    "react": "^16.2.0",
+    "react": "18.2.0",
     "react-copy-to-clipboard": "^5.0.1",
-    "react-dom": "^16.2.0",
+    "react-dom": "18.2.0",
     "react-hot-loader": "^4.12.18",
-    "react-redux": "^5.0.6",
-    "react-router-dom": "^4.2.2",
+    "react-redux": "7.2.0",
+    "react-router-dom": "5.3.4",
     "redux": "^3.7.2",
     "redux-thunk": "^2.2.0",
     "superagent": "^3.8.2",

client/src/index.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { render } from 'react-dom';
+import { createRoot } from 'react-dom/client';
 
 import ReduxBase from '@department-of-veterans-affairs/caseflow-frontend-toolkit/components/ReduxBase';
 
@@ -8,14 +8,16 @@ import InitContainer from './containers/InitContainer';
 
 const efolderExpress = {
   init(props) {
-    render(
+    const container = document.getElementById('efolder_express_app');
+    const root = createRoot(container);
+
+    root.render(
       <ReduxBase reducer={reducer} initialState={{
         ...initState,
         ...props
       }}>
         <InitContainer />
-      </ReduxBase>,
-      document.getElementById('efolder_express_app')
+      </ReduxBase>
     );
   }
 };