Merge pull request #71 from apollographql/update-react

update react, create root
apollographql · Feb 23, 2024 · c6f00b8 · c6f00b8
2 parents 87e9f9c + 863f95e
commit c6f00b8
Show file tree

Hide file tree

Showing 8 changed files with 4,779 additions and 6,066 deletions.
diff --git a/client/package-lock.json b/client/package-lock.json
diff --git a/client/package.json b/client/package.json
@@ -11,11 +11,11 @@
     "@emotion/react": "^11.4.0",
     "@emotion/styled": "^11.3.0",
     "graphql": "^15.3.0",
-    "react": "^16.13.1",
-    "react-dom": "^16.13.1",
-    "react-markdown": "^6.0.2",
-    "react-player": "^2.6.0",
-    "react-router-dom": "^6.8.0"
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-markdown": "^9.0.1",
+    "react-player": "^2.14.1",
+    "react-router-dom": "^6.22.0"
   },
   "scripts": {
     "test": "vitest",

diff --git a/client/src/index.js b/client/src/index.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client'
 import GlobalStyles from './styles';
 import Pages from './pages';
 import { ApolloProvider, ApolloClient, InMemoryCache } from '@apollo/client';
@@ -9,10 +9,11 @@ const client = new ApolloClient({
   cache: new InMemoryCache(),
 });
 
-ReactDOM.render(
+const root = createRoot(document.getElementById('root'));
+
+root.render(
   <ApolloProvider client={client}>
     <GlobalStyles />
     <Pages />
-  </ApolloProvider>,
-  document.getElementById('root')
+  </ApolloProvider>
 );
diff --git a/final/client/package-lock.json b/final/client/package-lock.json
diff --git a/final/client/package.json b/final/client/package.json
@@ -11,11 +11,11 @@
     "@emotion/react": "^11.4.0",
     "@emotion/styled": "^11.3.0",
     "graphql": "^15.3.0",
-    "react": "^16.13.1",
-    "react-dom": "^16.13.1",
-    "react-markdown": "^6.0.2",
-    "react-player": "^2.6.0",
-    "react-router-dom": "^6.8.0"
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-markdown": "^9.0.1",
+    "react-player": "^2.14.1",
+    "react-router-dom": "^6.22.0"
   },
   "scripts": {
     "test": "vitest",

diff --git a/final/client/src/index.js b/final/client/src/index.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client'
 import GlobalStyles from './styles';
 import Pages from './pages';
 import { ApolloProvider, ApolloClient, InMemoryCache } from '@apollo/client';
@@ -9,10 +9,11 @@ const client = new ApolloClient({
   cache: new InMemoryCache(),
 });
 
-ReactDOM.render(
+const root = createRoot(document.getElementById('root'));
+
+root.render(
   <ApolloProvider client={client}>
     <GlobalStyles />
     <Pages />
-  </ApolloProvider>,
-  document.getElementById('root')
+  </ApolloProvider>
 );
diff --git a/final/server/package-lock.json b/final/server/package-lock.json