Discuss component state.

Author: DanielRosenwasser

README.md

@@ -139,7 +139,7 @@ but it is useful if you need to measure things like the final size of your app.
 # Creating a component
 
 We're going to write a `Hello` component.
-The component will take the name of whatever we want to greet (which we'll call `name`), and optionally the number of exclamation marks to trail with (`enthusiasmLevel`).
+The component will take the name of whoever we want to greet (which we'll call `name`), and optionally, the number of exclamation marks to trail with (`enthusiasmLevel`).
 
 When we write something like `<Hello name="Daniel" enthusiasmLevel={3} />`, the component should render to something like `<div>Hello Daniel!!!</div>`.
 If `enthusiasmLevel` isn't specified, the component should default to showing one exclamation mark.
@@ -184,7 +184,7 @@ Notice that we defined a type named `Props` that specifies the properties our co
 `name` is a required `string`, and `enthusiasmLevel` is an optional `number` (which you can tell from the `?` that we wrote out after its name).
 
 We also wrote `Hello` as a stateless function component (an SFC).
-To be specific, `Hello` is a function that takes a `Props` object, and destructures it.
+To be specific, `Hello` is a function that takes a `Props` object, and picks apart (or "destructures") all the properties that it will be passed.
 If `enthusiasmLevel` isn't given in our `Props` object, it will default to `1`.
 
 Writing functions is one of two primary [ways React allows us to make components]((https://facebook.github.io/react/docs/components-and-props.html#functional-and-class-components)).
@@ -210,10 +210,13 @@ class Hello extends React.Component<Props, object> {
 }
 ```
 
-Classes are useful [when our component instances have some state](https://facebook.github.io/react/docs/state-and-lifecycle.html).
-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.
-Local component state is more useful at the presentational level when creating generic UI elements that can be shared between libraries.
-For our application's lifecycle, we will revisit how applications manage general state with Redux in a bit.
+Classes are useful [when our component instances have some state or need to handle lifecycle hooks](https://facebook.github.io/react/docs/state-and-lifecycle.html).
+But we don't really need to think about state in this specific example - in fact, we specified it as `object` in `React.Component<Props, object>`, so writing an SFC makes more sense here, but it's important to know how to write a class component.
+
+Notice that the class extends `React.Component<Props, object>`.
+The TypeScript-specific bit here are the type arguments we're passing to `React.Component`: `Props` and `object`.
+Here, `Props` is the type of our class's `this.props`, and `object` is the type of `this.state`.
+We'll return to component state in a bit.
 
 Now that we've written our component, let's dive into `index.tsx` and replace our render of `<App />` with a render of `<Hello ... />`.
 
@@ -234,7 +237,7 @@ ReactDOM.render(
 
 ## Type assertions
 
-One final thing we'll point out in this section is the line `document.getElementById('root') as HTMLElement`.
+One thing we'll point out in this section is the line `document.getElementById('root') as HTMLElement`.
 This syntax is called a *type assertion*, sometimes also called a *cast*.
 This is a useful way of telling TypeScript what the real type of an expression is when you know better than the type checker.
 
@@ -245,6 +248,86 @@ We're assuming that `getElementById` will actually succeed, so we need convince
 TypeScript also has a trailing "bang" syntax (`!`), which removes `null` and `undefined` from the prior expression.
 So we *could* have written `document.getElementById('root')!`, but in this case we wanted to be a bit more explicit.
 
+## Stateful components
+
+We mentioned earlier that our component didn't need state.
+What if we wanted to be able to update our components based on user interaction over time?
+At that point, state becomes more important.
+
+Deeply understanding best practices around component state in React are out of the scope of this starter, but let's quickly peek at a *stateful* version of our `Hello` component to see what adding state looks like.
+We're going to render two `<button>`s which update the number of exclamation marks that a `Hello` component displays.
+
+To do that, we're going to
+
+1. Define a type for our state (i.e. `this.state`)
+1. Initialize `this.state` based on the props we're given in our constructor.
+1. Create two event handlers for our buttons (`onIncrement` and `onDecrement`).
+
+```ts
+// src/components/StatefulHello.tsx
+
+import * as React from "react";
+
+export interface Props {
+  name: string;
+  enthusiasmLevel?: number;
+}
+
+interface State {
+  currentEnthusiasm: number;
+}
+
+class Hello extends React.Component<Props, State> {
+  constructor(props: Props) {
+    super(props);
+    this.state = { currentEnthusiasm: props.enthusiasmLevel || 1 };
+  }
+
+  onIncrement = () => this.updateEnthusiasm(this.state.currentEnthusiasm + 1);
+  onDecrement = () => this.updateEnthusiasm(this.state.currentEnthusiasm - 1);
+
+  render() {
+    const { name } = this.props;
+
+    if (this.state.currentEnthusiasm <= 0) {
+      throw new Error('You could be a little more enthusiastic. :D');
+    }
+
+    return (
+      <div className="hello">
+        <div className="greeting">
+          Hello {name + getExclamationMarks(this.state.currentEnthusiasm)}
+        </div>
+        <button onClick={this.onDecrement}>-</button>
+        <button onClick={this.onIncrement}>+</button>
+      </div>
+    );
+  }
+
+  updateEnthusiasm(currentEnthusiasm: number) {
+    this.setState({ currentEnthusiasm });
+  }
+}
+
+export default Hello;
+
+function getExclamationMarks(numChars: number) {
+  return Array(numChars + 1).join('!');
+}
+```
+
+Notice:
+
+1. Much like with `Props`, we had to define a new type for our state: `State`.
+1. To update state in React, we use `this.setState` - we don't set it directly except in the constructor. `setState` only takes the properties we're interested in updating and our component will re-render as appropriate.
+1. We're using class property initializers with arrow functions (e.g. `onIncrement = () => ...`).
+  * Declaring these as arrow functions avoids issues with orphaned uses of `this`.
+  * Setting them as instance properties creates them only once - a common mistake is to initialize them in the `render` method which allocates closures one every call to `render`.
+
+We won't use this stateful component any further in this starter.
+Stateful components are great for creating components that focus solely on presenting content (as opposed to handling core application state).
+In some contexts, it can be used for handling your entire application's state, with one central component passing down functions that can call `setState` appropriately; however, for much larger applications, a dedicated state manager might be preferable (as we'll discuss below).
+
 # Adding style 😎
 
 Styling a component with our setup is easy.
@@ -351,10 +434,11 @@ But if you're developing an app that's more interactive, then you may need to ad
 ## State management in general
 
 On its own, React is a useful library for creating composable views.
-However, React doesn't come with any facility for synchronizing data between your application.
+However, React doesn't prescribe any specific way of synchronizing data throughout your application.
 As far as a React component is concerned, data flows down through its children through the props you specify on each element.
+Some of those props might be functions that update the state one way or another, but how that happens is an open question.
 
-Because React on its own does not provide built-in support for state management, the React community uses libraries like Redux and MobX.
+Because React on its own does not focus on application state management, the React community uses libraries like Redux and MobX.
 
 [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.
 State is updated in an immutable fashion by sending explicit action messages which must be handled by functions called reducers.