Update createRoot examples

Author: markerikson

docs/tutorials/essentials/part-2-app-structure.md

@@ -880,7 +880,7 @@ root.render(
 )
 ```
 
-We always have to call `ReactDOM.render(<App />)` to tell React to start rendering our root `<App>` component. In order for our hooks like `useSelector` to work right, we need to use a component called `<Provider>` to pass down the Redux store behind the scenes so they can access it.
+We always have to call `root.render(<App />)` to tell React to start rendering our root `<App>` component. In order for our hooks like `useSelector` to work right, we need to use a component called `<Provider>` to pass down the Redux store behind the scenes so they can access it.
 
 We already created our store in `app/store.js`, so we can import it here. Then, we put our `<Provider>` component around the whole `<App>`, and pass in the store: `<Provider store={store}>`.
 

docs/tutorials/essentials/part-5-async-logic.md

@@ -961,13 +961,14 @@ async function start() {
   // highlight-next-line
   store.dispatch(fetchUsers())
 
-  ReactDOM.render(
+  const root = createRoot(document.getElementById('root')!)
+
+  root.render(
     <React.StrictMode>
       <Provider store={store}>
         <App />
       </Provider>
-    </React.StrictMode>,
-    document.getElementById('root')
+    </React.StrictMode>
   )
 }
 

docs/tutorials/essentials/part-8-rtk-query-advanced.md

@@ -354,13 +354,14 @@ async function main() {
   // highlight-next-line
   store.dispatch(apiSlice.endpoints.getUsers.initiate())
 
-  ReactDOM.render(
+  const root = createRoot(document.getElementById('root')!)
+
+  root.render(
     <React.StrictMode>
       <Provider store={store}>
         <App />
       </Provider>
-    </React.StrictMode>,
-    document.getElementById('root')
+    </React.StrictMode>
   )
 }
 main()

docs/tutorials/fundamentals/part-3-state-actions-reducers.md

@@ -68,7 +68,7 @@ The Redux template for CRA comes with Redux Toolkit and React-Redux already conf
 - Wrap your root React component with the `<Provider>` component from React-Redux, like:
 
 ```jsx
-ReactDOM.render(
+root.render(
   <Provider store={store}>
     <App />
   </Provider>,

docs/tutorials/fundamentals/part-5-ui-and-react.md

@@ -288,24 +288,25 @@ Let's add that to our main `index.js` file:
 
 ```jsx title="src/index.js"
 import React from 'react'
-import ReactDOM from 'react-dom'
+import { createRoot } from 'react-dom/client'
 // highlight-next-line
 import { Provider } from 'react-redux'
 
 import App from './App'
 import store from './store'
 
-ReactDOM.render(
+const root = createRoot(document.getElementById('root'))
+
+root.render(
   // highlight-start
   // Render a `<Provider>` around the entire `<App>`,
   // and pass the Redux store to it as a prop
   <React.StrictMode>
     <Provider store={store}>
       <App />
     </Provider>
-  </React.StrictMode>,
+  </React.StrictMode>
   // highlight-end
-  document.getElementById('root')
 )
 ```
 

docs/tutorials/fundamentals/part-6-async-logic.md

@@ -251,7 +251,7 @@ For now, let's try putting this directly in `index.js`:
 
 ```js title="src/index.js"
 import React from 'react'
-import ReactDOM from 'react-dom'
+import { createRoot } from 'react-dom/client'
 import { Provider } from 'react-redux'
 import './index.css'
 import App from './App'
@@ -265,13 +265,14 @@ import { fetchTodos } from './features/todos/todosSlice'
 store.dispatch(fetchTodos)
 // highlight-end
 
-ReactDOM.render(
+const root = createRoot(document.getElementById('root'))
+
+root.render(
   <React.StrictMode>
     <Provider store={store}>
       <App />
     </Provider>
-  </React.StrictMode>,
-  document.getElementById('root')
+  </React.StrictMode>
 )
 ```
 

docs/tutorials/quick-start.md

@@ -62,20 +62,23 @@ Once the store is created, we can make it available to our React components by p
 
 ```js title="index.js"
 import React from 'react'
-import ReactDOM from 'react-dom'
+import { createRoot } from 'react-dom/client'
 import './index.css'
 import App from './App'
 // highlight-start
 import store from './app/store'
 import { Provider } from 'react-redux'
 // highlight-end
 
-ReactDOM.render(
-  // highlight-next-line
-  <Provider store={store}>
-    <App />
-  </Provider>,
-  document.getElementById('root')
+const root = createRoot(document.getElementById('root')!)
+
+root.render(
+  <React.StrictMode>
+    // highlight-next-line
+    <Provider store={store}>
+      <App />
+    </Provider>
+  </React.StrictMode>,
 )
 ```