[examples] Update to use React 18's createRoot (#32506)

mui · May 11, 2022 · 0d37ced · 0d37ced
1 parent 0dad28e
commit 0d37ced
Show file tree

Hide file tree

Showing 10 changed files with 64 additions and 17 deletions.
diff --git a/examples/cdn/index.html b/examples/cdn/index.html
@@ -101,13 +101,13 @@
         );
       }
 
-      ReactDOM.render(
+      const root = ReactDOM.createRoot(document.getElementById('root'));
+      root.render(
         <ThemeProvider theme={theme}>
           {/* CssBaseline kickstart an elegant, consistent, and simple baseline to build upon. */}
           <CssBaseline />
           <App />
         </ThemeProvider>,
-        document.querySelector('#root'),
       );
     </script>
   </body>

diff --git a/examples/create-react-app-with-typescript/package.json b/examples/create-react-app-with-typescript/package.json
@@ -18,5 +18,17 @@
     "build": "react-scripts build",
     "test": "react-scripts test",
     "eject": "react-scripts eject"
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
   }
 }
diff --git a/examples/create-react-app-with-typescript/src/index.tsx b/examples/create-react-app-with-typescript/src/index.tsx
@@ -1,15 +1,17 @@
 import * as React from 'react';
-import ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import CssBaseline from '@mui/material/CssBaseline';
 import { ThemeProvider } from '@mui/material/styles';
 import App from './App';
 import theme from './theme';
 
-ReactDOM.render(
+const rootElement = document.getElementById('root');
+const root = createRoot(rootElement!);
+
+root.render(
   <ThemeProvider theme={theme}>
     {/* CssBaseline kickstart an elegant, consistent, and simple baseline to build upon. */}
     <CssBaseline />
     <App />
   </ThemeProvider>,
-  document.querySelector('#root'),
 );
diff --git a/examples/create-react-app/package.json b/examples/create-react-app/package.json
@@ -15,5 +15,17 @@
     "react": "latest",
     "react-dom": "latest",
     "react-scripts": "latest"
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
   }
 }
diff --git a/examples/create-react-app/src/index.js b/examples/create-react-app/src/index.js
@@ -1,15 +1,17 @@
 import * as React from 'react';
-import ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import CssBaseline from '@mui/material/CssBaseline';
 import { ThemeProvider } from '@mui/material/styles';
 import App from './App';
 import theme from './theme';
 
-ReactDOM.render(
+const rootElement = document.getElementById('root');
+const root = createRoot(rootElement);
+
+root.render(
   <ThemeProvider theme={theme}>
     {/* CssBaseline kickstart an elegant, consistent, and simple baseline to build upon. */}
     <CssBaseline />
     <App />
   </ThemeProvider>,
-  document.querySelector('#root'),
 );
diff --git a/examples/joy-cra-typescript/package.json b/examples/joy-cra-typescript/package.json
@@ -18,5 +18,17 @@
     "build": "react-scripts build",
     "test": "react-scripts test",
     "eject": "react-scripts eject"
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
   }
 }
diff --git a/examples/joy-cra-typescript/src/index.tsx b/examples/joy-cra-typescript/src/index.tsx
@@ -1,5 +1,8 @@
 import * as React from 'react';
-import ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import App from './App';
 
-ReactDOM.render(<App />, document.querySelector('#root'));
+const rootElement = document.getElementById('root');
+const root = createRoot(rootElement!);
+
+root.render(<App />);
diff --git a/examples/tailwind-css/src/index.tsx b/examples/tailwind-css/src/index.tsx
@@ -1,19 +1,21 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import { StyledEngineProvider } from '@mui/material/styles';
 import { CssBaseline } from '@mui/material';
 import './index.css';
 import App from './App';
 import reportWebVitals from './reportWebVitals';
 
-ReactDOM.render(
+const rootElement = document.getElementById('root');
+const root = createRoot(rootElement!);
+
+root.render(
   <React.StrictMode>
     <StyledEngineProvider injectFirst>
       <CssBaseline />
       <App />
     </StyledEngineProvider>
   </React.StrictMode>,
-  document.getElementById('root'),
 );
 
 // If you want to start measuring performance in your app, pass a function

diff --git a/examples/vitejs/src/App.jsx b/examples/vitejs/src/App.jsx
@@ -10,7 +10,7 @@ export default function App() {
     <Container maxWidth="sm">
       <Box sx={{ my: 4 }}>
         <Typography variant="h4" component="h1" gutterBottom>
-          Vite.js v5-beta example
+          Vite.js example
         </Typography>
         <ProTip />
         <Copyright />

diff --git a/examples/vitejs/src/main.jsx b/examples/vitejs/src/main.jsx
@@ -1,11 +1,14 @@
 import * as React from 'react';
-import ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import CssBaseline from '@mui/material/CssBaseline';
 import { ThemeProvider } from '@mui/material/styles';
 import App from './App';
 import theme from './theme';
 
-ReactDOM.render(
+const rootElement = document.getElementById('root');
+const root = createRoot(rootElement);
+
+root.render(
   <React.StrictMode>
     <ThemeProvider theme={theme}>
       {/* CssBaseline kickstart an elegant, consistent, and simple baseline to build upon. */}
@@ -14,5 +17,4 @@ ReactDOM.render(
     </ThemeProvider>
     ,
   </React.StrictMode>,
-  document.getElementById('root'),
 );