Upgrades to React 18.

Author: wilkie

.eslintrc.js

@@ -23,14 +23,11 @@ module.exports = {
       "version": "detect"
     }
   },
-  "parser": "babel-eslint",
+  "parser": "@babel/eslint-parser",
   "parserOptions": {
     "sourceType": "module",
     "ecmaFeatures": {
-      "jsx": true,
-      "modules": true,
-      "ecmaVersion": 6,
-      "experimentalObjectRestSpread": true
+      "jsx": true
     }
   },
   "rules": {

package.json

@@ -32,26 +32,26 @@
   },
   "devDependencies": {
     "@babel/core": "^7.29.0",
+    "@babel/eslint-parser": "^7.28.6",
     "@babel/preset-env": "^7.29.2",
     "@babel/preset-react": "^7.28.5",
-    "babel-eslint": "^9.0.0",
     "babel-jest": "29",
     "babel-loader": "^10.1.1",
     "copy-webpack-plugin": "11",
     "core-js": "^3",
     "css-loader": "^7.1.4",
-    "eslint": "6.1.0",
-    "eslint-plugin-jsx-a11y": "^6.4.1",
-    "eslint-plugin-react": "7.14.3",
+    "eslint": "8",
+    "eslint-plugin-jsx-a11y": "^6.10.2",
+    "eslint-plugin-react": "^7.37.5",
     "identity-obj-proxy": "^3.0.0",
     "jest": "29",
     "messageformat": "2.3.0",
     "ml-knn": "^3.0.0",
     "query-string": "4.1.0",
-    "react": "~15.4.0",
-    "react-dom": "~15.4.0",
+    "react": "18",
+    "react-dom": "18",
     "react-papaparse": "^3.8.0",
-    "react-redux": "^5.0.0",
+    "react-redux": "9",
     "redux": "^4.0.5",
     "style-loader": "^4.0.0",
     "webpack": "5",

src/UIComponents/DataTable.jsx

@@ -143,7 +143,7 @@ class DataTable extends Component {
                       onKeyDown={() => this.setCurrentColumn(columnId)}
                       onMouseEnter={() => this.setHighlightColumn(columnId)}
                       onMouseLeave={() => this.setHighlightColumn(undefined)}
-                      role="presentation"
+                      role="gridcell"
                     >
                       {startingRow !== undefined && index <= startingRow ? (
                         <span>&nbsp;</span>

src/index.js

@@ -1,5 +1,5 @@
 import React from "react";
-import ReactDOM from "react-dom";
+import { createRoot } from "react-dom/client";
 import App from "./App.js";
 import { Provider } from "react-redux";
 import { createStore } from "redux";
@@ -42,15 +42,15 @@ export const initAll = function (options) {
   store.dispatch(setMode(mode));
   processMode(mode);
 
-  ReactDOM.render(
+  const root = createRoot(document.getElementById("root"));
+  root.render(
     <Provider store={store}>
       <App
         mode={mode}
         onContinue={onContinue}
         startSaveTrainedModel={startSaveTrainedModel}
       />
-    </Provider>,
-    document.getElementById("root")
+    </Provider>
   );
 };