reactjs · anthonylaflamme · Mar 27, 2024 · Mar 27, 2024 · Mar 27, 2024 · Mar 27, 2024
diff --git a/README.md b/README.md
@@ -38,7 +38,7 @@ The documentation is divided into several sections with a different tone and pur
 
 1. Follow the ["Running locally"](#running-locally) instructions
 1. Save the files and check in the browser
- 1. Changes to React components in `src` will hot-reload
+ 1. Changes to React Components in `src` will hot-reload
  1. Changes to markdown files in `content` will hot-reload
  1. If working with plugins, you may need to remove the `.cache` directory and restart the server
 

diff --git a/src/components/Seo.tsx b/src/components/Seo.tsx
@@ -55,7 +55,7 @@ export const Seo = withRouter(
  // Twitter's meta parser is not very good.
  const twitterTitle = pageTitle.replace(/[<>]/g, '');
  let description = isHomePage
- ? 'React is the library for web and native user interfaces. Build user interfaces out of individual pieces called components written in JavaScript. React is designed to let you seamlessly combine components written by independent people, teams, and organizations.'
+ ? 'React is the library for web and native user interfaces. Build user interfaces out of individual pieces called Components written in JavaScript. React is designed to let you seamlessly combine Components written by independent people, teams, and organizations.'
  : 'The library for web and native user interfaces';
  return (
  <Head>

diff --git a/src/content/learn/add-react-to-an-existing-project.md b/src/content/learn/add-react-to-an-existing-project.md
@@ -4,7 +4,7 @@ title: Add React to an Existing Project
 
 <Intro>
 
-If you want to add some interactivity to your existing project, you don't have to rewrite it in React. Add React to your existing stack, and render interactive React components anywhere.
+If you want to add some interactivity to your existing project, you don't have to rewrite it in React. Add React to your existing stack, and render interactive React Components anywhere.
 
 </Intro>
 
@@ -30,18 +30,18 @@ Many React-based frameworks are full-stack and let your React app take advantage
 
 ## Using React for a part of your existing page {/*using-react-for-a-part-of-your-existing-page*/}
 
-Let's say you have an existing page built with another technology (either a server one like Rails, or a client one like Backbone), and you want to render interactive React components somewhere on that page. That's a common way to integrate React--in fact, it's how most React usage looked at Meta for many years!
+Let's say you have an existing page built with another technology (either a server one like Rails, or a client one like Backbone), and you want to render interactive React Components somewhere on that page. That's a common way to integrate React--in fact, it's how most React usage looked at Meta for many years!
 
 You can do this in two steps:
 
 1. **Set up a JavaScript environment** that lets you use the [JSX syntax](/learn/writing-markup-with-jsx), split your code into modules with the [`import`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import) / [`export`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/export) syntax, and use packages (for example, React) from the [npm](https://www.npmjs.com/) package registry.
-2. **Render your React components** where you want to see them on the page.
+2. **Render your React Components** where you want to see them on the page.
 
 The exact approach depends on your existing page setup, so let's walk through some details.
 
 ### Step 1: Set up a modular JavaScript environment {/*step-1-set-up-a-modular-javascript-environment*/}
 
-A modular JavaScript environment lets you write your React components in individual files, as opposed to writing all of your code in a single file. It also lets you use all the wonderful packages published by other developers on the [npm](https://www.npmjs.com/) registry--including React itself! How you do this depends on your existing setup:
+A modular JavaScript environment lets you write your React Components in individual files, as opposed to writing all of your code in a single file. It also lets you use all the wonderful packages published by other developers on the [npm](https://www.npmjs.com/) registry--including React itself! How you do this depends on your existing setup:
 
 * **If your app is already split into files that use `import` statements,** try to use the setup you already have. Check whether writing `<div />` in your JS code causes a syntax error. If it causes a syntax error, you might need to [transform your JavaScript code with Babel](https://babeljs.io/setup), and enable the [Babel React preset](https://babeljs.io/docs/babel-preset-react) to use JSX.
 
@@ -73,7 +73,7 @@ import { createRoot } from 'react-dom/client';
 // Clear the existing HTML content
 document.body.innerHTML = '<div id="app"></div>';
 
-// Render your React component instead
+// Render your React Component instead
 const root = createRoot(document.getElementById('app'));
 root.render(<h1>Hello, world</h1>);
 ```
@@ -88,7 +88,7 @@ Integrating a modular JavaScript environment into an existing project for the fi
 
 </Note>
 
-### Step 2: Render React components anywhere on the page {/*step-2-render-react-components-anywhere-on-the-page*/}
+### Step 2: Render React Components anywhere on the page {/*step-2-render-react-components-anywhere-on-the-page*/}
 
 In the previous step, you put this code at the top of your main file:
 
@@ -98,7 +98,7 @@ import { createRoot } from 'react-dom/client';
 // Clear the existing HTML content
 document.body.innerHTML = '<div id="app"></div>';
 
-// Render your React component instead
+// Render your React Component instead
 const root = createRoot(document.getElementById('app'));
 root.render(<h1>Hello, world</h1>);
 ```
@@ -107,15 +107,15 @@ Of course, you don't actually want to clear the existing HTML content!
 
 Delete this code.
 
-Instead, you probably want to render your React components in specific places in your HTML. Open your HTML page (or the server templates that generate it) and add a unique [`id`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id) attribute to any tag, for example:
+Instead, you probably want to render your React Components in specific places in your HTML. Open your HTML page (or the server templates that generate it) and add a unique [`id`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id) attribute to any tag, for example:
 
 ```html
 <!-- ... somewhere in your html ... -->
 <nav id="navigation"></nav>
 <!-- ... more html ... -->
 ```
 
-This lets you find that HTML element with [`document.getElementById`](https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById) and pass it to [`createRoot`](/reference/react-dom/client/createRoot) so that you can render your own React component inside:
+This lets you find that HTML element with [`document.getElementById`](https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById) and pass it to [`createRoot`](/reference/react-dom/client/createRoot) so that you can render your own React Component inside:
 
 <Sandpack>
 
@@ -146,7 +146,7 @@ root.render(<NavigationBar />);
 
 </Sandpack>
 
-Notice how the original HTML content from `index.html` is preserved, but your own `NavigationBar` React component now appears inside the `<nav id="navigation">` from your HTML. Read the [`createRoot` usage documentation](/reference/react-dom/client/createRoot#rendering-a-page-partially-built-with-react) to learn more about rendering React components inside an existing HTML page.
+Notice how the original HTML content from `index.html` is preserved, but your own `NavigationBar` React Component now appears inside the `<nav id="navigation">` from your HTML. Read the [`createRoot` usage documentation](/reference/react-dom/client/createRoot#rendering-a-page-partially-built-with-react) to learn more about rendering React Components inside an existing HTML page.
 
 When you adopt React in an existing project, it's common to start with small interactive components (like buttons), and then gradually keep "moving upwards" until eventually your entire page is built with React. If you ever reach that point, we recommend migrating to [a React framework](/learn/start-a-new-react-project) right after to get the most out of React.
 

diff --git a/src/content/learn/adding-interactivity.md b/src/content/learn/adding-interactivity.md
@@ -4,14 +4,14 @@ title: Adding Interactivity
 
 <Intro>
 
-Some things on the screen update in response to user input. For example, clicking an image gallery switches the active image. In React, data that changes over time is called *state.* You can add state to any component, and update it as needed. In this chapter, you'll learn how to write components that handle interactions, update their state, and display different output over time.
+Some things on the screen update in response to user input. For example, clicking an image gallery switches the active image. In React, data that changes over time is called *state.* You can add state to any Component, and update it as needed. In this chapter, you'll learn how to write Components that handle interactions, update their state, and display different output over time.
 
 </Intro>
 
 <YouWillLearn isChapter={true}>
 
 * [How to handle user-initiated events](/learn/responding-to-events)
-* [How to make components "remember" information with state](/learn/state-a-components-memory)
+* [How to make Components "remember" information with state](/learn/state-a-components-memory)
 * [How React updates the UI in two phases](/learn/render-and-commit)
 * [Why state doesn't update right after you change it](/learn/state-as-a-snapshot)
 * [How to queue multiple state updates](/learn/queueing-a-series-of-state-updates)
@@ -24,7 +24,7 @@ Some things on the screen update in response to user input. For example, clickin
 
 React lets you add *event handlers* to your JSX. Event handlers are your own functions that will be triggered in response to user interactions like clicking, hovering, focusing on form inputs, and so on.
 
-Built-in components like `<button>` only support built-in browser events like `onClick`. However, you can also create your own components, and give their event handler props any application-specific names that you like.
+Built-in components like `<button>` only support built-in browser events like `onClick`. However, you can also create your own Components, and give their event handler props any application-specific names that you like.
 
 <Sandpack>
 
@@ -72,11 +72,11 @@ Read **[Responding to Events](/learn/responding-to-events)** to learn how to add
 
 </LearnMore>
 
-## State: a component's memory {/*state-a-components-memory*/}
+## State: a Component's memory {/*state-a-components-memory*/}
 
-Components often need to change what's on the screen as a result of an interaction. Typing into the form should update the input field, clicking "next" on an image carousel should change which image is displayed, clicking "buy" puts a product in the shopping cart. Components need to "remember" things: the current input value, the current image, the shopping cart. In React, this kind of component-specific memory is called *state.*
+Components often need to change what's on the screen as a result of an interaction. Typing into the form should update the input field, clicking "next" on an image carousel should change which image is displayed, clicking "buy" puts a product in the shopping cart. Components need to "remember" things: the current input value, the current image, the shopping cart. In React, this kind of Component-specific memory is called *state.*
 
-You can add state to a component with a [`useState`](/reference/react/useState) Hook. *Hooks* are special functions that let your components use React features (state is one of those features). The `useState` Hook lets you declare a state variable. It takes the initial state and returns a pair of values: the current state, and a state setter function that lets you update it.
+You can add state to a Component with a [`useState`](/reference/react/useState) Hook. *Hooks* are special functions that let your Components use React features (state is one of those features). The `useState` Hook lets you declare a state variable. It takes the initial state and returns a pair of values: the current state, and a state setter function that lets you update it.
 
 ```js
 const [index, setIndex] = useState(0);
@@ -235,17 +235,17 @@ Read **[State: A Component's Memory](/learn/state-a-components-memory)** to lear
 
 ## Render and commit {/*render-and-commit*/}
 
-Before your components are displayed on the screen, they must be rendered by React. Understanding the steps in this process will help you think about how your code executes and explain its behavior.
+Before your Components are displayed on the screen, they must be rendered by React. Understanding the steps in this process will help you think about how your code executes and explain its behavior.
 
-Imagine that your components are cooks in the kitchen, assembling tasty dishes from ingredients. In this scenario, React is the waiter who puts in requests from customers and brings them their orders. This process of requesting and serving UI has three steps:
+Imagine that your Components are cooks in the kitchen, assembling tasty dishes from ingredients. In this scenario, React is the waiter who puts in requests from customers and brings them their orders. This process of requesting and serving UI has three steps:
 
 1. **Triggering** a render (delivering the diner's order to the kitchen)
-2. **Rendering** the component (preparing the order in the kitchen)
+2. **Rendering** the Component (preparing the order in the kitchen)
 3. **Committing** to the DOM (placing the order on the table)
 
 <IllustrationBlock sequential>
  <Illustration caption="Trigger" alt="React as a server in a restaurant, fetching orders from the users and delivering them to the Component Kitchen." src="/images/docs/illustrations/i_render-and-commit1.png" />
- <Illustration caption="Render" alt="The Card Chef gives React a fresh Card component." src="/images/docs/illustrations/i_render-and-commit2.png" />
+ <Illustration caption="Render" alt="The Card Chef gives React a fresh Card Component." src="/images/docs/illustrations/i_render-and-commit2.png" />
  <Illustration caption="Commit" alt="React delivers the Card to the user at their table." src="/images/docs/illustrations/i_render-and-commit3.png" />
 </IllustrationBlock>
 
@@ -320,7 +320,7 @@ Read **[State as a Snapshot](/learn/state-as-a-snapshot)** to learn why state ap
 
 ## Queueing a series of state updates {/*queueing-a-series-of-state-updates*/}
 
-This component is buggy: clicking "+3" increments the score only once.
+This Component is buggy: clicking "+3" increments the score only once.
 
 <Sandpack>