Start adopting React 18

Author: captbaritone

packages/webamp/demo/js/index.tsx

@@ -159,9 +159,9 @@ async function main() {
     if (backgroundColor != null) {
       window.document.body.style.backgroundColor = backgroundColor;
     }
-    ReactDOM.render(
-      <DemoDesktop webamp={webamp} soundCloudPlaylist={soundcloudPlaylist} />,
-      document.getElementById("demo-desktop")
+    const root = ReactDOM.createRoot(document.getElementById("demo-desktop"));
+    root.render(
+      <DemoDesktop webamp={webamp} soundCloudPlaylist={soundcloudPlaylist} />
     );
   }
 }

packages/webamp/js/playlistHtml.tsx

@@ -1,4 +1,4 @@
-import { render } from "react-dom";
+import { createRoot } from "react-dom";
 
 interface Props {
   averageTrackLength: string;
@@ -159,7 +159,8 @@ const Playlist = (props: Props) => (
 
 const createPlaylistHTML = (props: Props): string => {
   const node = document.createElement("div");
-  render(<Playlist {...props} />, node);
+  const root = createRoot(node);
+  root.render(<Playlist {...props} />);
   return node.innerHTML;
 };
 

packages/webamp/js/webampLazy.tsx

@@ -443,11 +443,11 @@ class Webamp {
       }
     });
 
-    ReactDOM.render(
+    const root = ReactDOM.createRoot(node);
+    root.render(
       <Provider store={this.store}>
         <App media={this.media} filePickers={this.options.filePickers || []} />
-      </Provider>,
-      node
+      </Provider>
     );
   }
 

packages/webamp/package.json

@@ -134,6 +134,9 @@
     "trailingComma": "es5"
   },
   "dependencies": {
+    "@babel/core": "^7.16.0",
+    "@types/react": "^17.0.35",
+    "@types/react-dom": "^17.0.11",
     "ani-cursor": "^0.0.4",
     "butterchurn": "^3.0.0-beta.3",
     "butterchurn-presets": "3.0.0-beta.4",
@@ -144,10 +147,11 @@
     "lodash": "^4.17.21",
     "milkdrop-preset-converter-aws": "^0.1.6",
     "music-metadata-browser": "^0.6.1",
-    "react": "^18.0.0-alpha-9c8161ba8-20211028",
-    "react-dom": "^18.0.0-alpha-9c8161ba8-20211028",
-    "react-redux": "^8.0.0-alpha.0",
-    "redux": "^4.1.0-alpha.0",
+    "react": "^18.0.0-beta-149b420f6-20211119",
+    "react-dom": "^18.0.0-beta-149b420f6-20211119",
+    "react-redux": "^8.0.0-beta.1",
+    "redux": "^5.0.0-alpha.0",
+    "redux-devtools-extension": "^2.13.9",
     "redux-thunk": "^2.4.0",
     "reselect": "^3.0.1",
     "tinyqueue": "^1.2.3",