Fixed typos in the documentation

src/content/learn/conditional-rendering.md

@@ -52,7 +52,7 @@ export default function PackingList() {
 
 </Sandpack>
 
-Notice that some of the `Item` components have their `isPacked` prop set to `true` instead of `false`. You want to add a checkmark (✔) to packed items if `isPacked={true}`.
+Notice that some of the `Item` components have their `isPacked` prop set to `true` instead of `false`. You want to add a check mark (✔) to packed items if `isPacked={true}`.
 
 You can write this as an [`if`/`else` statement](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/if...else) like so:
 
@@ -63,7 +63,7 @@ if (isPacked) {
 return <li className="item">{name}</li>;
 ```
 
-If the `isPacked` prop is `true`, this code **returns a different JSX tree.** With this change, some of the items get a checkmark at the end:
+If the `isPacked` prop is `true`, this code **returns a different JSX tree.** With this change, some of the items get a check mark at the end:
 
 <Sandpack>
 
@@ -260,7 +260,7 @@ This style works well for simple conditions, but use it in moderation. If your c
 
 ### Logical AND operator (`&&`) {/*logical-and-operator-*/}
 
-Another common shortcut you'll encounter is the [JavaScript logical AND (`&&`) operator.](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Logical_AND#:~:text=The%20logical%20AND%20(%20%26%26%20)%20operator,it%20returns%20a%20Boolean%20value.) Inside React components, it often comes up when you want to render some JSX when the condition is true, **or render nothing otherwise.** With `&&`, you could conditionally render the checkmark only if `isPacked` is `true`:
+Another common shortcut you'll encounter is the [JavaScript logical AND (`&&`) operator.](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Logical_AND#:~:text=The%20logical%20AND%20(%20%26%26%20)%20operator,it%20returns%20a%20Boolean%20value.) Inside React components, it often comes up when you want to render some JSX when the condition is true, **or render nothing otherwise.** With `&&`, you could conditionally render the check mark only if `isPacked` is `true`:
 
 ```js
 return (
@@ -270,7 +270,7 @@ return (
 );
 ```
 
-You can read this as *"if `isPacked`, then (`&&`) render the checkmark, otherwise, render nothing"*.
+You can read this as *"if `isPacked`, then (`&&`) render the check mark, otherwise, render nothing"*.
 
 Here it is in action:
 
@@ -310,7 +310,7 @@ export default function PackingList() {
 
 </Sandpack>
 
-A [JavaScript && expression](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Logical_AND) returns the value of its right side (in our case, the checkmark) if the left side (our condition) is `true`. But if the condition is `false`, the whole expression becomes `false`. React considers `false` as a "hole" in the JSX tree, just like `null` or `undefined`, and doesn't render anything in its place.
+A [JavaScript && expression](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Logical_AND) returns the value of its right side (in our case, the check mark) if the left side (our condition) is `true`. But if the condition is `false`, the whole expression becomes `false`. React considers `false` as a "hole" in the JSX tree, just like `null` or `undefined`, and doesn't render anything in its place.
 
 
 <Pitfall>

src/content/learn/describing-the-ui.md

@@ -319,7 +319,7 @@ Read **[Passing Props to a Component](/learn/passing-props-to-a-component)** to
 
 Your components will often need to display different things depending on different conditions. In React, you can conditionally render JSX using JavaScript syntax like `if` statements, `&&`, and `? :` operators.
 
-In this example, the JavaScript `&&` operator is used to conditionally render a checkmark:
+In this example, the JavaScript `&&` operator is used to conditionally render a check mark:
 
 <Sandpack>
 

src/content/learn/extracting-state-logic-into-a-reducer.md

@@ -477,7 +477,7 @@ with `useReducer` like so:
 const [tasks, dispatch] = useReducer(tasksReducer, initialTasks);
 ```
 
-The `useReducer` Hook is similar to `useState`—you must pass it an initial state and it returns a stateful value and a way to set state (in this case, the dispatch function). But it's a little different.
+The `useReducer` Hook is similar to `useState` — you must pass it an initial state and it returns a stateful value and a way to set state (in this case, the dispatch function). But it's a little different.
 
 The `useReducer` Hook takes two arguments:
 

src/content/learn/javascript-in-jsx-with-curly-braces.md

@@ -223,7 +223,7 @@ const person = {
 };
 ```
 
-The component can use these values from `person` like so:
+The component can use these values from a `person` like so:
 
 ```js
 <div style={person.theme}>

src/content/learn/passing-props-to-a-component.md

@@ -263,7 +263,7 @@ It is common to nest built-in browser tags:
 </div>
 ```
 
-Sometimes you'll want to nest your own components the same way:
+Sometimes you'll want to nest your components the same way:
 
 ```js
 <Card>
@@ -419,7 +419,7 @@ However, props are [immutable](https://en.wikipedia.org/wiki/Immutable_object)
 * To read props, use the `function Avatar({ person, size })` destructuring syntax.
 * You can specify a default value like `size = 100`, which is used for missing and `undefined` props.
 * You can forward all props with `<Avatar {...props} />` JSX spread syntax, but don't overuse it!
-* Nested JSX like `<Card><Avatar /></Card>` will appear as `Card` component's `children` prop.
+* Nested JSX like `<Card><Avatar /></Card>` will appear as the `Card` component's `children` prop.
 * Props are read-only snapshots in time: every render receives a new version of props.
 * You can't change props. When you need interactivity, you'll need to set state.
 

src/content/learn/render-and-commit.md

@@ -193,7 +193,7 @@ export default function App() {
 
 </Sandpack>
 
-This works because during this last step, React only updates the content of `<h1>` with the new `time`. It sees that the `<input>` appears in the JSX in the same place as last time, so React doesn't touch the `<input>`—or its `value`!
+This works because during this last step, React only updates the content of `<h1>` with the new `time`. It sees that the `<input>` appears in the JSX in the same place as last time, so React doesn't touch the `<input>` — or its `value`!
 ## Epilogue: Browser paint {/*epilogue-browser-paint*/}
 
 After rendering is done and React updated the DOM, the browser will repaint the screen. Although this process is known as "browser rendering", we'll refer to it as "painting" to avoid confusion throughout the docs.

src/content/learn/rendering-lists.md

@@ -30,7 +30,7 @@ Say that you have a list of content.
 </ul>
 ```
 
-The only difference among those list items is their contents, their data. You will often need to show several instances of the same component using different data when building interfaces: from lists of comments to galleries of profile images. In these situations, you can store that data in JavaScript objects and arrays and use methods like [`map()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map) and [`filter()`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/filter) to render lists of components from them.
+The only difference among those list items is their contents, and their data. You will often need to show several instances of the same component using different data when building interfaces: from lists of comments to galleries of profile images. In these situations, you can store that data in JavaScript objects and arrays and use methods like [`map()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map) and [`filter()`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/filter) to render lists of components from them.
 
 Here’s a short example of how to generate a list of items from an array:
 

src/content/learn/understanding-your-ui-as-a-tree.md

@@ -255,7 +255,7 @@ In this example, depending on what `inspiration.type` is, we may render `<FancyT
 
 Although render trees may differ across render passes, these trees are generally helpful for identifying what the *top-level* and *leaf components* are in a React app. Top-level components are the components nearest to the root component and affect the rendering performance of all the components beneath them and often contain the most complexity. Leaf components are near the bottom of the tree and have no child components and are often frequently re-rendered.
 
-Identifying these categories of components are useful for understanding data flow and performance of your app.
+Identifying these categories of components is useful for understanding data flow and performance of your app.
 
 ## The Module Dependency Tree {/*the-module-dependency-tree*/}
 
@@ -275,7 +275,7 @@ The root node of the tree is the root module, also known as the entrypoint file.
 
 Comparing to the render tree of the same app, there are similar structures but some notable differences:
 
-* The nodes that make-up the tree represent modules, not components.
+* The nodes that make up the tree represent modules, not components.
 * Non-component modules, like `inspirations.js`, are also represented in this tree. The render tree only encapsulates components.
 * `Copyright.js` appears under `App.js` but in the render tree, `Copyright`, the component, appears as a child of `InspirationGenerator`. This is because `InspirationGenerator` accepts JSX as [children props](/learn/passing-props-to-a-component#passing-jsx-as-children), so it renders `Copyright` as a child component but does not import the module.
 

src/content/learn/writing-markup-with-jsx.md

@@ -18,7 +18,7 @@ title: Writing Markup with JSX
 
 ## JSX: Putting markup into JavaScript {/*jsx-putting-markup-into-javascript*/}
 
-The Web has been built on HTML, CSS, and JavaScript. For many years, web developers kept content in HTML, design in CSS, and logic in JavaScript—often in separate files! Content was marked up inside HTML while the page's logic lived separately in JavaScript:
+The Web has been built on HTML, CSS, and JavaScript. For many years, web developers kept content in HTML, design in CSS, and logic in JavaScript—often in separate files! The content was marked up inside HTML while the page's logic lived separately in JavaScript:
 
 <DiagramGroup>
 
@@ -36,7 +36,7 @@ JavaScript
 
 </DiagramGroup>
 
-But as the Web became more interactive, logic increasingly determined content. JavaScript was in charge of the HTML! This is why **in React, rendering logic and markup live together in the same place—components.**
+But as the Web became more interactive, logic increasingly determined content. JavaScript was in charge of the HTML! This is why **in React, rendering logic and markup live together in the same place — components.**
 
 <DiagramGroup>
 
@@ -54,7 +54,7 @@ But as the Web became more interactive, logic increasingly determined content. J
 
 </DiagramGroup>
 
-Keeping a button's rendering logic and markup together ensures that they stay in sync with each other on every edit. Conversely, details that are unrelated, such as the button's markup and a sidebar's markup, are isolated from each other, making it safer to change either of them on their own.
+Keeping a button's rendering logic and markup together ensures that they stay in sync with each other on every edit. Conversely, unrelated details, such as the button's markup and a sidebar's markup, are isolated from each other, making it safer to change either of them on their own.
 
 Each React component is a JavaScript function that may contain some markup that React renders into the browser. React components use a syntax extension called JSX to represent that markup. JSX looks a lot like HTML, but it is a bit stricter and can display dynamic information. The best way to understand this is to convert some HTML markup to JSX markup.
 
@@ -136,7 +136,7 @@ Most of the time, React's on-screen error messages will help you find where the
 
 To return multiple elements from a component, **wrap them with a single parent tag.**
 
-For example, you can use a `<div>`:
+For example, you can use a `<div>` tag:
 
 ```js {1,11}
 <div>
@@ -153,7 +153,7 @@ For example, you can use a `<div>`:
 ```
 
 
-If you don't want to add an extra `<div>` to your markup, you can write `<>` and `</>` instead:
+If you don't want to add an extra `<div>` to your markup, you can write an empty tag `<></>` instead:
 
 ```js {1,11}
 <>
@@ -202,9 +202,9 @@ This is how Hedy Lamarr's image and list items look closed:
 
 ### 3. camelCase <s>all</s> most of the things! {/*3-camelcase-salls-most-of-the-things*/}
 
-JSX turns into JavaScript and attributes written in JSX become keys of JavaScript objects. In your own components, you will often want to read those attributes into variables. But JavaScript has limitations on variable names. For example, their names can't contain dashes or be reserved words like `class`.
+JSX turns into JavaScript and attributes written in JSX become keys of JavaScript objects. In your components, you will often want to read those attributes into variables. However, JavaScript has limitations on variable names. For example, their names can't contain dashes or be reserved words like `class`.
 
-This is why, in React, many HTML and SVG attributes are written in camelCase. For example, instead of `stroke-width` you use `strokeWidth`. Since `class` is a reserved word, in React you write `className` instead, named after the [corresponding DOM property](https://developer.mozilla.org/en-US/docs/Web/API/Element/className):
+This is why, in React, many HTML and SVG attributes are written in camelCase. For example, instead of `stroke-width`, you use `strokeWidth`. Since `class` is a reserved word, in React you write `className` instead, named after the [corresponding DOM property](https://developer.mozilla.org/en-US/docs/Web/API/Element/className):
 
 ```js {4}
 <img 

src/content/learn/your-first-component.md

@@ -80,7 +80,7 @@ And here's how to build a component:
 
 ### Step 1: Export the component {/*step-1-export-the-component*/}
 
-The `export default` prefix is a [standard JavaScript syntax](https://developer.mozilla.org/docs/web/javascript/reference/statements/export) (not specific to React). It lets you mark the main function in a file so that you can later import it from other files. (More on importing in [Importing and Exporting Components](/learn/importing-and-exporting-components)!)
+The `export default` prefix is a [standard JavaScript syntax](https://developer.mozilla.org/docs/web/javascript/reference/statements/export) (not specific to React). It lets you mark the main function in a file so that you can later import it from other files. For more information about the importing, see [Importing and Exporting Components](/learn/importing-and-exporting-components).
 
 ### Step 2: Define the function {/*step-2-define-the-function*/}