From 9b0a22f9c6e2456a86856aa0ee51ec6ffeb2322d Mon Sep 17 00:00:00 2001 From: Austin Lai <76412946+alai97@users.noreply.github.com> Date: Wed, 12 Mar 2025 11:54:52 -0700 Subject: [PATCH 1/5] Update Code Snippet Updated the code sample for the `main.jsx` file. --- .../react_getting_started/index.md | 28 ++++++++++--------- 1 file changed, 15 insertions(+), 13 deletions(-) diff --git a/files/en-us/learn_web_development/core/frameworks_libraries/react_getting_started/index.md b/files/en-us/learn_web_development/core/frameworks_libraries/react_getting_started/index.md index f39eb7b6474e2d8..22b52cd7fef3b65 100644 --- a/files/en-us/learn_web_development/core/frameworks_libraries/react_getting_started/index.md +++ b/files/en-us/learn_web_development/core/frameworks_libraries/react_getting_started/index.md @@ -320,25 +320,25 @@ This export statement makes our `App()` function available to other modules. We' Let's open `src/main.jsx`, because that's where the `` component is being used. This file is the entry point for our app, and it initially looks like this: ```jsx -import React from "react"; -import ReactDOM from "react-dom/client"; -import App from "./App.jsx"; -import "./index.css"; +import { StrictMode } from 'react' +import { createRoot } from 'react-dom/client' +import './index.css' +import App from './App.jsx' -ReactDOM.createRoot(document.getElementById("root")).render( - +createRoot(document.getElementById('root')).render( + - , -); + , +) ``` -As with `App.jsx`, the file starts by importing all the JS modules and other assets it needs to run. +As with `App.jsx`, the file starts by importing all the JavaScript modules and other assets it needs to run. -The first two statements import the `React` and `ReactDOM` libraries because they are referenced later in the file. We don't write a path or extension when importing these libraries because they are not local files. In fact, they are listed as dependencies in our `package.json` file. Be careful of this distinction as you work through this lesson! +The first two statements import `StrictMode` and `createRoot` from the `React` and `ReactDOM` libraries because they are referenced later in the file. We don't write a path or extension when importing these libraries because they are not local files. In fact, they are listed as dependencies in our `package.json` file. Be careful of this distinction as you work through this lesson! We then import our `App()` function and `index.css`, which holds global styles that are applied to our whole app. -We then call the `ReactDOM.createRoot()` function, which defines the root node of our application. This takes as an argument the DOM element inside which we want our React app to be rendered. In this case, that's the DOM element with an ID of `root`. Finally, we chain the `render()` method onto the `createRoot()` call, passing it the JSX expression that we want to render inside our root. By writing `` as this JSX expression, we're telling React to call the `App()` _function_ which renders the `App` _component_ inside the root node. +We then call the `ReactDOM.createRoot()` function, which defines the root node of our application. This takes as an argument the DOM element inside which we want our React app to be rendered. In this case, that's the DOM element with an ID of `root`. Finally, we chain the `render()` method onto the `createRoot()` call, passing it the JSX expression that we want to render inside our root. By writing `` as this JSX expression, we're telling React to call the `App()` _function_, which renders the `App` _component_ inside the root node. > **Note:** `` is rendered inside a special `` component. This component helps developers catch potential problems in their code. @@ -395,9 +395,11 @@ Some attributes are different than their HTML counterparts. For example, the `cl ### JavaScript expressions as content -Unlike HTML, JSX allows us to write variables and other JavaScript expressions right alongside our other content. Let's declare a variable called `subject` just above the `App()` function: +Unlike HTML, JSX allows us to write variables and other JavaScript expressions right alongside our other content. Let's declare a variable called `subject` just above the `App()` function in your `App.jsx` file: ```jsx +import "./App.css"; + const subject = "React"; function App() { // code omitted for brevity @@ -500,6 +502,6 @@ In React: ## See also - [Learn React](https://v2.scrimba.com/learn-react-c0e?via=mdn) _MDN learning partner_ - - : [Scrimba's](https://scrimba.com?via=mdn) _Learn React_ course is the ultimate React 101 — the perfect starting point for any React beginner. Learn the basics of modern React by solving 140+ interactive coding challenges and building eight fun projects. +- [Scrimba's](https://scrimba.com?via=mdn) _Learn React_ course is the ultimate React 101 — the perfect starting point for any React beginner. Learn the basics of modern React by solving 140+ interactive coding challenges and building eight fun projects. {{PreviousMenuNext("Learn_web_development/Core/Frameworks_libraries/Main_features","Learn_web_development/Core/Frameworks_libraries/React_todo_list_beginning", "Learn_web_development/Core/Frameworks_libraries")}} From 39e85f127eb3fd10e420c3fddd09effce0dcd30d Mon Sep 17 00:00:00 2001 From: Austin Lai <76412946+alai97@users.noreply.github.com> Date: Wed, 12 Mar 2025 23:13:12 -0700 Subject: [PATCH 2/5] Accept Linter Suggestions Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> --- .../react_getting_started/index.md | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/files/en-us/learn_web_development/core/frameworks_libraries/react_getting_started/index.md b/files/en-us/learn_web_development/core/frameworks_libraries/react_getting_started/index.md index 22b52cd7fef3b65..8c64ac6ad6bdcfb 100644 --- a/files/en-us/learn_web_development/core/frameworks_libraries/react_getting_started/index.md +++ b/files/en-us/learn_web_development/core/frameworks_libraries/react_getting_started/index.md @@ -320,16 +320,16 @@ This export statement makes our `App()` function available to other modules. We' Let's open `src/main.jsx`, because that's where the `` component is being used. This file is the entry point for our app, and it initially looks like this: ```jsx -import { StrictMode } from 'react' -import { createRoot } from 'react-dom/client' -import './index.css' -import App from './App.jsx' +import { StrictMode } from "react"; +import { createRoot } from "react-dom/client"; +import "./index.css"; +import App from "./App.jsx"; -createRoot(document.getElementById('root')).render( +createRoot(document.getElementById("root")).render( , -) +); ``` As with `App.jsx`, the file starts by importing all the JavaScript modules and other assets it needs to run. From 2d1bcf1c26c2ee84c05fab46343d9a36902145a8 Mon Sep 17 00:00:00 2001 From: Austin Lai <76412946+alai97@users.noreply.github.com> Date: Wed, 12 Mar 2025 23:14:17 -0700 Subject: [PATCH 3/5] Undo This --- .../core/frameworks_libraries/react_getting_started/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/en-us/learn_web_development/core/frameworks_libraries/react_getting_started/index.md b/files/en-us/learn_web_development/core/frameworks_libraries/react_getting_started/index.md index 8c64ac6ad6bdcfb..5dd37c2c735fe8e 100644 --- a/files/en-us/learn_web_development/core/frameworks_libraries/react_getting_started/index.md +++ b/files/en-us/learn_web_development/core/frameworks_libraries/react_getting_started/index.md @@ -502,6 +502,6 @@ In React: ## See also - [Learn React](https://v2.scrimba.com/learn-react-c0e?via=mdn) _MDN learning partner_ -- [Scrimba's](https://scrimba.com?via=mdn) _Learn React_ course is the ultimate React 101 — the perfect starting point for any React beginner. Learn the basics of modern React by solving 140+ interactive coding challenges and building eight fun projects. + - :[Scrimba's](https://scrimba.com?via=mdn) _Learn React_ course is the ultimate React 101 — the perfect starting point for any React beginner. Learn the basics of modern React by solving 140+ interactive coding challenges and building eight fun projects. {{PreviousMenuNext("Learn_web_development/Core/Frameworks_libraries/Main_features","Learn_web_development/Core/Frameworks_libraries/React_todo_list_beginning", "Learn_web_development/Core/Frameworks_libraries")}} From d74a8772967e9c2281597f563ad52d0c704ec6ee Mon Sep 17 00:00:00 2001 From: Austin Lai <76412946+alai97@users.noreply.github.com> Date: Wed, 12 Mar 2025 23:14:44 -0700 Subject: [PATCH 4/5] One More --- .../core/frameworks_libraries/react_getting_started/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/en-us/learn_web_development/core/frameworks_libraries/react_getting_started/index.md b/files/en-us/learn_web_development/core/frameworks_libraries/react_getting_started/index.md index 5dd37c2c735fe8e..835e42cdaca1c8e 100644 --- a/files/en-us/learn_web_development/core/frameworks_libraries/react_getting_started/index.md +++ b/files/en-us/learn_web_development/core/frameworks_libraries/react_getting_started/index.md @@ -502,6 +502,6 @@ In React: ## See also - [Learn React](https://v2.scrimba.com/learn-react-c0e?via=mdn) _MDN learning partner_ - - :[Scrimba's](https://scrimba.com?via=mdn) _Learn React_ course is the ultimate React 101 — the perfect starting point for any React beginner. Learn the basics of modern React by solving 140+ interactive coding challenges and building eight fun projects. + - : [Scrimba's](https://scrimba.com?via=mdn) _Learn React_ course is the ultimate React 101 — the perfect starting point for any React beginner. Learn the basics of modern React by solving 140+ interactive coding challenges and building eight fun projects. {{PreviousMenuNext("Learn_web_development/Core/Frameworks_libraries/Main_features","Learn_web_development/Core/Frameworks_libraries/React_todo_list_beginning", "Learn_web_development/Core/Frameworks_libraries")}} From b652a18e9fa79bcdad3ed97d834f88532e267875 Mon Sep 17 00:00:00 2001 From: Austin Lai <76412946+alai97@users.noreply.github.com> Date: Thu, 13 Mar 2025 17:37:13 -0700 Subject: [PATCH 5/5] Accept Suggestions Co-authored-by: Joshua Chen --- .../frameworks_libraries/react_getting_started/index.md | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/files/en-us/learn_web_development/core/frameworks_libraries/react_getting_started/index.md b/files/en-us/learn_web_development/core/frameworks_libraries/react_getting_started/index.md index 835e42cdaca1c8e..8a85fefbaaa567d 100644 --- a/files/en-us/learn_web_development/core/frameworks_libraries/react_getting_started/index.md +++ b/files/en-us/learn_web_development/core/frameworks_libraries/react_getting_started/index.md @@ -334,11 +334,11 @@ createRoot(document.getElementById("root")).render( As with `App.jsx`, the file starts by importing all the JavaScript modules and other assets it needs to run. -The first two statements import `StrictMode` and `createRoot` from the `React` and `ReactDOM` libraries because they are referenced later in the file. We don't write a path or extension when importing these libraries because they are not local files. In fact, they are listed as dependencies in our `package.json` file. Be careful of this distinction as you work through this lesson! +The first two statements import `StrictMode` and `createRoot` from the `react` and `react-dom` libraries because they are referenced later in the file. We don't write a path or extension when importing these libraries because they are not local files. In fact, they are listed as dependencies in our `package.json` file. Be careful of this distinction as you work through this lesson! We then import our `App()` function and `index.css`, which holds global styles that are applied to our whole app. -We then call the `ReactDOM.createRoot()` function, which defines the root node of our application. This takes as an argument the DOM element inside which we want our React app to be rendered. In this case, that's the DOM element with an ID of `root`. Finally, we chain the `render()` method onto the `createRoot()` call, passing it the JSX expression that we want to render inside our root. By writing `` as this JSX expression, we're telling React to call the `App()` _function_, which renders the `App` _component_ inside the root node. +We then call the `createRoot()` function, which defines the root node of our application. This takes as an argument the DOM element inside which we want our React app to be rendered. In this case, that's the DOM element with an ID of `root`. Finally, we chain the `render()` method onto the `createRoot()` call, passing it the JSX expression that we want to render inside our root. By writing `` as this JSX expression, we're telling React to call the `App()` _function_, which renders the `App` _component_ inside the root node. > **Note:** `` is rendered inside a special `` component. This component helps developers catch potential problems in their code. @@ -398,8 +398,6 @@ Some attributes are different than their HTML counterparts. For example, the `cl Unlike HTML, JSX allows us to write variables and other JavaScript expressions right alongside our other content. Let's declare a variable called `subject` just above the `App()` function in your `App.jsx` file: ```jsx -import "./App.css"; - const subject = "React"; function App() { // code omitted for brevity