### 4. Component state  
  
##### 01-component-state  
  * Slide, then...   
  * Difference between props and state is change over time. If I were a React component, my name is a good property because that doens't change. My level of thirst is good state, because that changes

##### 03-set-state  
  * Slide, then...  
  * setState is passed an object with keys that you want to change. In this example, it would be incrementing this.state.counter by one. This component might have other pieces of state, but this call to setState doesn't affect them

##### 05-app-data  
  * Deciding on your application's data model is crucial to building a good app. In this case, a todo item should be represented by an object with two keys: task, which is a description of the todo item, and done, which keeps track of whether the todo is completed

##### 07-app-data-as-state  
  * Slide, then..
  * We're going to keep the todos in one place, a single source of truth
  
  
 
### 5. Data as props
  
##### 01-architecture
  * Slide then
  * By keeping components small and isolated, they're easier to write, easier to understand, and easier to test

  

### 6. Displaying Todos

##### 05-output
  * Slide then
  * This may look weird seeing an array of JSX here, but remember that Babel turns them into function calls

##### 06-render-array  
  * Slide then
  * React will render each of them as sibling elements

### 7. Styling

##### 05-classnames-value  
  * Slide then
  * With only one conditional class, string manipulation works. But it quickly gets messy with multiple classes.


### 8. Adding todos

##### 08-app-onsubmit
  * Slide then
  * We're going to pass `addTodo` as a prop to TodoInput, but we're going to use the name `onSubmit` - this is because TodoInput shouldn't know about adding todos. We might want to use a TodoInput component later for a search input. TodoInput gets passed a function to call when a user submits the input, hence the name `onSubmit`.

##### 10-todoinput-onkeydown
  * To figure out when we should fire `this.props.onSubmit`, we'll add an `onKeyDown` handler in TodoInput
  * We'll listen for the ENTER key, which has a keycode of 13
  * If the user has hit the ENTER key, then we call `this.props.onSubmit` with the current value, and then and clear it to leave an empty input ready for the next todo item

##### 12-app-addtodo

  * Now we have to actually _do_ something in `App.addTodo`
  * We create a new todo object with the task that was passed in from TodoInput
  * Then we add the newTodo to the end of our current list - the ... is called the spread operator because it "spreads" its contents into an array. This will create a new array comprised of this.state.todos, with the newTodo added
  * Finally, we setState to update our app

### 09 Toggling todos

##### 02-data-down-actions-up
  * We have to pass `toggleTodo` from App to TodoList, then from TodoList to every TodoItem
  * Just like when adding todos, we're going to use different names for the properties in each step - TodoList doesn't know about "toggling todos", it just wants a function to call when a todo gets clicked, so `onTodoClick` is a good name. Same with the TodoItems - they just want a function to call on click, so `onClick` is a good name.


### 10 Wrapping up

##### 01-which-todo
  * Which TodoItem called App.toggleTodo? Every TodoItem calls exact same function in the same way, no way for App to know
  * Need TodoItem to "tell" App which one was clicked
  * Add argument to `toggleTodo()`, and have TodoItem pass that argument when calling

##### 02-which-todo-cont  
  * Let's use position in the list to identify
  * Can get that position from `index` in the TodoItems map function, just like we used for the key
  * Can't pass in `this.props.onTodoClick` directly - this would call `this.props.onTodoClick` and pass the result as a prop, but what we want is to pass the function itself

##### 03-closures
  * Functions that "saves" some data for another time or place where we don't have access to it
  * The name comes from the function "closing" over a variable
  * In this example, we have a variable, `msg`, and a function, `logMsg` that closes over it
  * If we passed `logMsg` to MyComponent, it will still console.log 'hey there' even though MyComponent doesn't have access to the `msg` variable

##### 04-new-onclick  
  * We're going to make a new function to pass into each TodoItem that calls `app.toggleTodo`
  * We use a fat arrow function because we want to make sure that `this` really points to the TodoList component - sometimes when you have event handlers, `this` can end up pointing to the wrong thing
  * Now instead of calling `App.toggleTodo` directly when a user clicks on a TodoItem, it will call our new function with the proper index

05-toggle-todo
  
{markdownSlide("# Todone!\n\n### Where to go from here")}  
{markdownSlide(require("raw!./slides/outro/01-summary  
{markdownSlide(require("raw!./slides/outro/02-further-development  
{markdownSlide(require("raw!./slides/outro/03-only-beginning  
{markdownSlide(require("raw!./slides/outro/04-thanks