From 9ad0353b3624b257a7854f45140a71c2c5886446 Mon Sep 17 00:00:00 2001 From: Jay Singh <140599484+mathdebate09@users.noreply.github.com> Date: Fri, 23 Aug 2024 17:13:30 +0530 Subject: [PATCH 1/3] update boilerplate for intro/setting_up_react --- react/introduction/setting_up_a_react_environment.md | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/react/introduction/setting_up_a_react_environment.md b/react/introduction/setting_up_a_react_environment.md index f28050c89de..5a19f52f931 100644 --- 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( - +createRoot(document.getElementById("root")).render( + - + , ); ``` From bb5979724685101d9a5105b37b525b19d5374578 Mon Sep 17 00:00:00 2001 From: Jay Singh <140599484+mathdebate09@users.noreply.github.com> Date: Fri, 23 Aug 2024 17:15:00 +0530 Subject: [PATCH 2/3] Update boilerplate for Components lesson --- .../react_components.md | 26 +++++++++---------- 1 file changed, 13 insertions(+), 13 deletions(-) diff --git a/react/getting_started_with_react/react_components.md b/react/getting_started_with_react/react_components.md index 531bb0dfbde..d1a5c8c015b 100644 --- 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( - +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( + - , -) + , +); ``` Remember that `` 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. `` 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. -- What does a React element look like? -- How would you create a functional component? -- How do you export and then import a component? +- [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 From 8039775bb48455dea18b64884c10825e3701c2f9 Mon Sep 17 00:00:00 2001 From: Jay Singh <140599484+mathdebate09@users.noreply.github.com> Date: Fri, 23 Aug 2024 17:15:20 +0530 Subject: [PATCH 3/3] Update boilerplate for react-router lesson --- react/the_react_ecosystem/react_router.md | 60 +++++++++++------------ 1 file changed, 30 insertions(+), 30 deletions(-) diff --git a/react/the_react_ecosystem/react_router.md b/react/the_react_ecosystem/react_router.md index b35e5a0983b..a0e7d6d0fe2 100644 --- 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( - +createRoot(document.getElementById("root")).render( + - + ); ``` @@ -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( - +createRoot(document.getElementById("root")).render( + - + , ); ``` @@ -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( - +createRoot(document.getElementById("root")).render( + - + , ); ``` @@ -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( - +createRoot(document.getElementById("root")).render( + - + , ); ``` @@ -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( - +createRoot(document.getElementById("root")).render( + - + , ); ``` @@ -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( - +createRoot(document.getElementById("root")).render( + - + , ); ```