Skip to content

Commit f85a9f5

Browse files
committed
issues are resolved
1 parent 93f6c27 commit f85a9f5

42 files changed

Lines changed: 260 additions & 260 deletions

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

src/content/learn/adding-interactivity.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -257,7 +257,7 @@ Read **[Render and Commit](/learn/render-and-commit)** to learn the lifecycle of
257257

258258
## State as a snapshot {/*state-as-a-snapshot*/}
259259

260-
Unlike regular JavaScript variables, React state behaves more like a snapshot. Setting it does not change the state variable you already have, but instead triggers a re-render. This can be surprising at first!
260+
Unlike regular JavaScript variables, React State behaves more like a snapshot. Setting it does not change the state variable you already have, but instead triggers a re-render. This can be surprising at first!
261261

262262
```js
263263
console.log(count); // 0
@@ -408,7 +408,7 @@ Read **[Queueing a Series of State Updates](/learn/queueing-a-series-of-state-up
408408

409409
## Updating objects in state {/*updating-objects-in-state*/}
410410

411-
State can hold any kind of JavaScript value, including objects. But you shouldn't change objects and arrays that you hold in the React state directly. Instead, when you want to update an object and array, you need to create a new one (or make a copy of an existing one), and then update the state to use that copy.
411+
State can hold any kind of JavaScript value, including objects. But you shouldn't change objects and arrays that you hold in the React State directly. Instead, when you want to update an object and array, you need to create a new one (or make a copy of an existing one), and then update the state to use that copy.
412412

413413
Usually, you will use the `...` spread syntax to copy objects and arrays that you want to change. For example, updating a nested object could look like this:
414414

src/content/learn/escape-hatches.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -99,7 +99,7 @@ Read **[Manipulating the DOM with Refs](/learn/manipulating-the-dom-with-refs)**
9999

100100
## Synchronizing with Effects {/*synchronizing-with-effects*/}
101101

102-
Some components need to synchronize with external systems. For example, you might want to control a non-React component based on the React state, set up a server connection, or send an analytics log when a component appears on the screen. Unlike event handlers, which let you handle particular events, *Effects* let you run some code after rendering. Use them to synchronize your component with a system outside of React.
102+
Some components need to synchronize with external systems. For example, you might want to control a non-React component based on the React State, set up a server connection, or send an analytics log when a component appears on the screen. Unlike event handlers, which let you handle particular events, *Effects* let you run some code after rendering. Use them to synchronize your component with a system outside of React.
103103

104104
Press Play/Pause a few times and see how the video player stays synchronized to the `isPlaying` prop value:
105105

src/content/learn/importing-and-exporting-components.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -59,7 +59,7 @@ These currently live in a **root component file,** named `App.js` in this exampl
5959
What if you want to change the landing screen in the future and put a list of science books there? Or place all the profiles somewhere else? It makes sense to move `Gallery` and `Profile` out of the root component file. This will make them more modular and reusable in other files. You can move a component in three steps:
6060

6161
1. **Make** a new JS file to put the components in.
62-
2. **Export** your function component from that file (using either [default](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/export#using_the_default_export) or [named](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/export#using_named_exports) exports).
62+
2. **Export** your Function Component from that file (using either [default](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/export#using_the_default_export) or [named](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/export#using_named_exports) exports).
6363
3. **Import** it in the file where you’ll use the component (using the corresponding technique for importing [default](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/import#importing_defaults) or [named](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/import#import_a_single_export_from_a_module) exports).
6464

6565
Here both `Profile` and `Gallery` have been moved out of `App.js` into a new file called `Gallery.js`. Now you can change `App.js` to import `Gallery` from `Gallery.js`:

src/content/learn/keeping-components-pure.md

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -87,7 +87,7 @@ You could think of your components as recipes: if you follow them and don't intr
8787

8888
## Side Effects: (un)intended consequences {/*side-effects-unintended-consequences*/}
8989

90-
React's rendering process must always be pure. Components should only *return* their JSX, and not *change* any objects or variables that existed before rendering—that would make them impure!
90+
React's rendering process must always be pure, and components should only *return* their JSX, and not *change* any objects or variables that existed before rendering—that would make them impure!
9191

9292
Here is a component that breaks this rule:
9393

@@ -149,7 +149,7 @@ In general, you should not expect your components to be rendered in any particul
149149

150150
#### Detecting impure calculations with StrictMode {/*detecting-impure-calculations-with-strict-mode*/}
151151

152-
Although you might not have used them all yet, in React there are three kinds of inputs that you can read while rendering: [props](/learn/passing-props-to-a-component), [state](/learn/state-a-components-memory), and [context.](/learn/passing-data-deeply-with-context) You should always treat these inputs as read-only.
152+
Although you might not have used them all yet, in React there are three kinds of inputs that you can read while rendering: [props](/learn/passing-props-to-a-component), [state](/learn/state-a-components-memory), and [Context.](/learn/passing-data-deeply-with-context) You should always treat these inputs as read-only.
153153

154154
When you want to *change* something in response to user input, you should [set state](/learn/state-a-components-memory) instead of writing to a variable. You should never change preexisting variables or objects while your component is rendering.
155155

@@ -219,7 +219,7 @@ Every new React feature we're building takes advantage of purity. From data fetc
219219
* **It minds its own business.** It should not change any objects or variables that existed before rendering.
220220
* **Same inputs, same output.** Given the same inputs, a component should always return the same JSX.
221221
* Rendering can happen at any time, so components should not depend on each others' rendering sequence.
222-
* You should not mutate any of the inputs that your components use for rendering. That includes props, state, and context. To update the screen, ["set" state](/learn/state-a-components-memory) instead of mutating preexisting objects.
222+
* You should not mutate any of the inputs that your components use for rendering. That includes props, state, and Context. To update the screen, ["set" state](/learn/state-a-components-memory) instead of mutating preexisting objects.
223223
* Strive to express your component's logic in the JSX you return. When you need to "change things", you'll usually want to do it in an event handler. As a last resort, you can `useEffect`.
224224
* Writing pure functions takes a bit of practice, but it unlocks the power of React's paradigm.
225225

src/content/learn/lifecycle-of-reactive-effects.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -554,7 +554,7 @@ However, if you [think from the Effect's perspective,](#thinking-from-the-effect
554554

555555
Props and state aren't the only reactive values. Values that you calculate from them are also reactive. If the props or state change, your component will re-render, and the values calculated from them will also change. This is why all variables from the component body used by the Effect should be in the Effect dependency list.
556556
557-
Let's say that the user can pick a chat server in the dropdown, but they can also configure a default server in settings. Suppose you've already put the settings state in a [context](/learn/scaling-up-with-reducer-and-context) so you read the `settings` from that context. Now you calculate the `serverUrl` based on the selected server from props and the default server:
557+
Let's say that the user can pick a chat server in the dropdown, but they can also configure a default server in settings. Suppose you've already put the settings state in a [Context](/learn/scaling-up-with-reducer-and-context) so you read the `settings` from that Context. Now you calculate the `serverUrl` based on the selected server from props and the default server:
558558
559559
```js {3,5,10}
560560
function ChatRoom({ roomId, selectedServerUrl }) { // roomId is reactive

src/content/learn/managing-state.md

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -697,11 +697,11 @@ Read **[Extracting State Logic into a Reducer](/learn/extracting-state-logic-int
697697
698698
</LearnMore>
699699
700-
## Passing data deeply with context {/*passing-data-deeply-with-context*/}
700+
## Passing data deeply with Context {/*passing-data-deeply-with-context*/}
701701
702702
Usually, you will pass information from a parent component to a child component via props. But passing props can become inconvenient if you need to pass some prop through many components, or if many components need the same information. Context lets the parent component make some information available to any component in the tree below it—no matter how deep it is—without passing it explicitly through props.
703703
704-
Here, the `Heading` component determines its heading level by "asking" the closest `Section` for its level. Each `Section` tracks its own level by asking the parent `Section` and adding one to it. Every `Section` provides information to all components below it without passing props--it does that through context.
704+
Here, the `Heading` component determines its heading level by "asking" the closest `Section` for its level. Each `Section` tracks its own level by asking the parent `Section` and adding one to it. Every `Section` provides information to all components below it without passing props--it does that through Context.
705705
706706
<Sandpack>
707707
@@ -795,15 +795,15 @@ export const LevelContext = createContext(0);
795795
796796
<LearnMore path="/learn/passing-data-deeply-with-context">
797797
798-
Read **[Passing Data Deeply with Context](/learn/passing-data-deeply-with-context)** to learn about using context as an alternative to passing props.
798+
Read **[Passing Data Deeply with Context](/learn/passing-data-deeply-with-context)** to learn about using Context as an alternative to passing props.
799799
800800
</LearnMore>
801801
802-
## Scaling up with reducer and context {/*scaling-up-with-reducer-and-context*/}
802+
## Scaling up with reducer and Context {/*scaling-up-with-reducer-and-context*/}
803803
804-
Reducers let you consolidate a component’s state update logic. Context lets you pass information deep down to other components. You can combine reducers and context together to manage state of a complex screen.
804+
Reducers let you consolidate a component’s state update logic. Context lets you pass information deep down to other components. You can combine reducers and Context together to manage state of a complex screen.
805805
806-
With this approach, a parent component with complex state manages it with a reducer. Other components anywhere deep in the tree can read its state via context. They can also dispatch actions to update that state.
806+
With this approach, a parent component with complex state manages it with a reducer. Other components anywhere deep in the tree can read its state via Context. They can also dispatch actions to update that state.
807807
808808
<Sandpack>
809809

0 commit comments

Comments
 (0)