You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: pages/tutorials/React.md
+10-9Lines changed: 10 additions & 9 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -172,7 +172,7 @@ class Hello extends React.Component<Props, object> {
172
172
Classes are useful [when our component instances have some state](https://facebook.github.io/react/docs/state-and-lifecycle.html).
173
173
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.
174
174
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.
176
176
177
177
Now that we've written our component, let's dive into `index.tsx` and replace our render of `<App />` with a render of `<Hello ... />`.
178
178
@@ -195,10 +195,11 @@ ReactDOM.render(
195
195
196
196
One final thing we'll point out in this section is the line `document.getElementById('root') as HTMLElement`.
197
197
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.
199
199
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.
202
203
203
204
TypeScript also has a trailing "bang" syntax (`!`), which removes `null` and `undefined` from the prior expression.
204
205
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.
312
313
However, React doesn't come with any facility for synchronizing data between your application.
313
314
As far as a React component is concerned, data flows down through its children through the props you specify on each element.
314
315
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.
316
317
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.
318
319
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.
320
321
321
322
[MobX](https://mobx.js.org/) relies on functional reactive patterns where state is wrapped through observables and and passed through as props.
322
323
Keeping state fully synchronized for any observers is done by simply marking state as observable.
0 commit comments