React: Use named imports for createRoot/StrictMode (#28690)

Vite create config React template recently updated to use named imports here instead of default imports for React/ReactDOM. Examples changed to reflect what learners will now see in their code.
TheOdinProject · Aug 23, 2024 · 47a3302 · 47a3302
1 parent f17c6ca
commit 47a3302
Show file tree

Hide file tree

Showing 3 changed files with 48 additions and 48 deletions.
diff --git a/react/getting_started_with_react/react_components.md b/react/getting_started_with_react/react_components.md
@@ -66,17 +66,17 @@ export default Greeting;
 Are we done? Well let's think about this - we've declared our component, and exported it, but does `main.jsx` know about it yet? Nope! Let's fix that. Let's look at `main.jsx`, we can see that `render()` is rendering the `App` component. Let's replace that `App` component with our newly created greeting, which we'll have to make sure is first imported properly. The end result should look something like this:
 
 ```jsx
-import React from 'react'
-import ReactDOM from 'react-dom/client'
-import App from './App.jsx'
-import Greeting from './Greeting.jsx'
-import './index.css'
-
-ReactDOM.createRoot(document.getElementById('root')).render(
-  <React.StrictMode>
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import App from "./App.jsx";
+import Greeting from "./Greeting.jsx";
+import "./index.css";
+
+createRoot(document.getElementById("root")).render(
+  <StrictMode>
     <Greeting />
-  </React.StrictMode>,
-)
+  </StrictMode>,
+);
 ```
 
 Remember that `<Greeting />` should be capitalized! Try using lower case for the import, function name and component and see what happens! When the JSX is parsed, React uses the capitalization to tell the difference between an HTML tag and an instance of a React component. `<greeting />` would be interpreted as a normal HTML element with no special meaning, instead of your shiny new React component.
@@ -96,9 +96,9 @@ Otherwise, just like that, you've successfully imported and used your first cust
 
 The following questions are an opportunity to reflect on key topics in this lesson. If you can't answer a question, click on it to review the material, but keep in mind you are not expected to memorize or master this knowledge.
 
-- <a class="knowledge-check-link" href="#what-are-components">What does a React element look like?</a>
-- <a class="knowledge-check-link" href="#how-to-create-components">How would you create a functional component?</a>
-- <a class="knowledge-check-link" href="#where-do-components-live">How do you export and then import a component?</a>
+- [What does a React element look like?](#what-are-components)
+- [How would you create a functional component?](#how-to-create-components)
+- [How do you export and then import a component?](#where-do-components-live)
 
 ### Additional resources
 

diff --git a/react/introduction/setting_up_a_react_environment.md b/react/introduction/setting_up_a_react_environment.md
@@ -104,15 +104,15 @@ The `public` folder is where all of the static assets related to your app will g
 Inside the `src` folder is where you will find the code that runs your app. The `main.jsx` file here serves as the entry point of the application. Let's open the `main.jsx` file and see if we can understand what's going on:
 
 ```jsx
-import React from "react";
-import ReactDOM from "react-dom/client";
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
 import App from "./App.jsx";
 import "./index.css";
 
-ReactDOM.createRoot(document.getElementById("root")).render(
-  <React.StrictMode>
+createRoot(document.getElementById("root")).render(
+  <StrictMode>
     <App />
-  </React.StrictMode>
+  </StrictMode>,
 );
 ```
 

diff --git a/react/the_react_ecosystem/react_router.md b/react/the_react_ecosystem/react_router.md
@@ -87,8 +87,8 @@ Let us install the React Router package:
 Add the following to `main.jsx`, we will talk about what is happening in a little bit.
 
 ```jsx
-import React from "react";
-import ReactDOM from "react-dom/client";
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
 import { createBrowserRouter, RouterProvider } from "react-router-dom";
 import App from "./App";
 import Profile from "./Profile";
@@ -104,10 +104,10 @@ const router = createBrowserRouter([
   },
 ]);
 
-ReactDOM.createRoot(document.getElementById("root")).render(
-  <React.StrictMode>
+createRoot(document.getElementById("root")).render(
+  <StrictMode>
     <RouterProvider router={router} />
-  </React.StrictMode>
+  </StrictMode>
 );
 ```
 
@@ -183,8 +183,8 @@ export default Spinach;
 Now, we can rewrite the routes as given:
 
 ```jsx
-import React from "react";
-import ReactDOM from "react-dom/client";
+import { StrictMode } from "react"
+import { createRoot } from "react-dom/client";
 import { createBrowserRouter, RouterProvider } from "react-router-dom";
 import App from "./App";
 import Profile from "./Profile";
@@ -206,10 +206,10 @@ const router = createBrowserRouter([
   },
 ]);
 
-ReactDOM.createRoot(document.getElementById("root")).render(
-  <React.StrictMode>
+createRoot(document.getElementById("root")).render(
+  <StrictMode>
     <RouterProvider router={router} />
-  </React.StrictMode>
+  </StrictMode>,
 );
 ```
 
@@ -250,8 +250,8 @@ export default DefaultProfile;
 Now, add an index tag with the DefaultProfile as a child to the `/profile` route.
 
 ```jsx
-import React from "react";
-import ReactDOM from "react-dom/client";
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
 import { createBrowserRouter, RouterProvider } from "react-router-dom";
 import App from "./App";
 import Profile from "./Profile";
@@ -275,10 +275,10 @@ const router = createBrowserRouter([
   },
 ]);
 
-ReactDOM.createRoot(document.getElementById("root")).render(
-  <React.StrictMode>
+createRoot(document.getElementById("root")).render(
+  <StrictMode>
     <RouterProvider router={router} />
-  </React.StrictMode>
+  </StrictMode>,
 );
 ```
 
@@ -287,8 +287,8 @@ If you visit the `/profile` path now, you should be able to see some default con
 But this example brings another dilemma. Sometimes, we want to render content according to the URLs. That, here, would mean that we should be able to render content dynamically, from the component itself. Thankfully, you can do so with dynamic segments! Change the routes to be the following:
 
 ```jsx
-import React from "react";
-import ReactDOM from "react-dom/client";
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
 import { createBrowserRouter, RouterProvider } from "react-router-dom";
 import App from "./App";
 import Profile from "./Profile";
@@ -304,10 +304,10 @@ const router = createBrowserRouter([
   },
 ]);
 
-ReactDOM.createRoot(document.getElementById("root")).render(
-  <React.StrictMode>
+createRoot(document.getElementById("root")).render(
+  <StrictMode>
     <RouterProvider router={router} />
-  </React.StrictMode>
+  </StrictMode>,
 );
 ```
 
@@ -366,8 +366,8 @@ export default ErrorPage;
 Add the `errorElement` to the configuration, and verify that it renders an error page by going to the `/profile` path or any unmentioned paths. We'll wire this back up in the assignment.
 
 ```jsx
-import React from "react";
-import ReactDOM from "react-dom/client";
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
 import { createBrowserRouter, RouterProvider } from "react-router-dom";
 import App from "./App";
 import Profile from "./Profile";
@@ -385,10 +385,10 @@ const router = createBrowserRouter([
   },
 ]);
 
-ReactDOM.createRoot(document.getElementById("root")).render(
-  <React.StrictMode>
+createRoot(document.getElementById("root")).render(
+  <StrictMode>
     <RouterProvider router={router} />
-  </React.StrictMode>
+  </StrictMode>,
 );
 ```
 
@@ -421,17 +421,17 @@ export default routes;
 Import the routes to your `main.jsx` file:
 
 ```jsx
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
 import { createBrowserRouter, RouterProvider } from "react-router-dom";
-import React from "react";
-import ReactDOM from "react-dom/client";
 import routes from "./routes";
 
 const router = createBrowserRouter(routes);
 
-ReactDOM.createRoot(document.getElementById("root")).render(
-  <React.StrictMode>
+createRoot(document.getElementById("root")).render(
+  <StrictMode>
     <RouterProvider router={router} />
-  </React.StrictMode>
+  </StrictMode>,
 );
 ```