speaking-notes.md

3. 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 isn't likely to 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

4. 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

9. 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