Skip to content

Commit f352e29

Browse files
Addressed feedback.
1 parent f583017 commit f352e29

1 file changed

Lines changed: 10 additions & 9 deletions

File tree

pages/tutorials/React.md

Lines changed: 10 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -172,7 +172,7 @@ class Hello extends React.Component<Props, object> {
172172
Classes are useful [when our component instances have some state](https://facebook.github.io/react/docs/state-and-lifecycle.html).
173173
But we don't really need to think about state in this example - in fact, we specified it as `object` in `React.Component<Props, object>`, so writing an SFC tends to be shorter.
174174
Local component state is more useful at the presentational level when creating generic UI elements that can be shared between libraries.
175-
For our application's lifecycle, we will revisit how applications manage general state with Redux in a bit,
175+
For our application's lifecycle, we will revisit how applications manage general state with Redux in a bit.
176176

177177
Now that we've written our component, let's dive into `index.tsx` and replace our render of `<App />` with a render of `<Hello ... />`.
178178

@@ -195,10 +195,11 @@ ReactDOM.render(
195195

196196
One final thing we'll point out in this section is the line `document.getElementById('root') as HTMLElement`.
197197
This syntax is called a *type assertion*, sometimes also called a *cast*.
198-
This is a useful way of telling TypeScript that you know a little more about the type than the type checker does.
198+
This is a useful way of telling TypeScript what the real type of an expression is when you know better than the type checker.
199199

200-
The reason we need to do so in this case is that `getElementById`'s return type is `HTMLElement | null`, meaning that it can return `null`.
201-
We're operating under the assumption that `getElementById` will actually succeed, so we need convince TypeScript of that using the `as` syntax.
200+
The reason we need to do so in this case is that `getElementById`'s return type is `HTMLElement | null`.
201+
Put simply, `getElementById` returns `null` when it can't find an element with a given `id`.
202+
We're assuming that `getElementById` will actually succeed, so we need convince TypeScript of that using the `as` syntax.
202203

203204
TypeScript also has a trailing "bang" syntax (`!`), which removes `null` and `undefined` from the prior expression.
204205
So we *could* have written `document.getElementById('root')!`, but in this case we wanted to be a bit more explicit.
@@ -312,11 +313,11 @@ On its own, React is a useful library for creating composable views.
312313
However, React doesn't come with any facility for synchronizing data between your application.
313314
As far as a React component is concerned, data flows down through its children through the props you specify on each element.
314315

315-
Because React on its own does not provide a built-in support for state management, the React community uses libraries like Redux and MobX.
316+
Because React on its own does not provide built-in support for state management, the React community uses libraries like Redux and MobX.
316317

317-
[Redux](http://redux.js.org) relies on synchronizing data through a centralized and immutable store of data, and updates to that data will trigger a re-render our application.
318+
[Redux](http://redux.js.org) relies on synchronizing data through a centralized and immutable store of data, and updates to that data will trigger a re-render of our application.
318319
State is updated in an immutable fashion by sending explicit action messages which must be handled by functions called reducers.
319-
Because of the explicit nature, it is often be easier to reason about how an action will affect the state of your program.
320+
Because of the explicit nature, it is often easier to reason about how an action will affect the state of your program.
320321

321322
[MobX](https://mobx.js.org/) relies on functional reactive patterns where state is wrapped through observables and and passed through as props.
322323
Keeping state fully synchronized for any observers is done by simply marking state as observable.
@@ -379,7 +380,7 @@ export const DECREMENT_ENTHUSIASM = 'DECREMENT_ENTHUSIASM';
379380
export type DECREMENT_ENTHUSIASM = typeof DECREMENT_ENTHUSIASM;
380381
```
381382

382-
This `const`/`type` pattern allows us to use TypeScript's string literal types in an easily accessible & refactorable way.
383+
This `const`/`type` pattern allows us to use TypeScript's string literal types in an easily accessible and refactorable way.
383384

384385
Next, we'll create a set of actions and functions that can create these actions in `src/actions/index.tsx`.
385386

@@ -626,7 +627,7 @@ npm run eject
626627
and you should be good to go!
627628

628629
As a heads up, you may want to commit all your work before running an eject.
629-
You cannot undo an eject command, so opting out is permanent without committing.
630+
You cannot undo an eject command, so opting out is permanent unless you can recover from a commit prior to running an eject.
630631

631632
# Next steps
632633

0 commit comments

Comments
 (0)