react-components-part2.md

React Components Part 2 Instructor Notes

Objectives

• Create a class component
• Attach a event to a component
• Use setState to trigger a rerender of a component
• Use props to update classes
• Restructure your application to have more components

Resources

• https://github.com/rogerwschmidt/react-components

Create a class component

• Create a class component with a render method that has (from example)
  • Add todo (form)
  • Checkbox and delete button
  • List of to do items

Attach a event to a component

• Add an event to the form
• Have it console.log the contents of the input box

Use setState to trigger a rerender of a component

• Add a state to the constructor
• use setState in the addTodo method to add a todo to your list
• Add a method that will handle a checkbox for every item, use setState to update state
• Add a method that will handle the toolbar checkbox, use setState to update state
• Add a method

Use data to update classes

• Use the checked property on a list to modify classes on a component

Restructure your application to have more components

• Pass methods and data as props
• Refactor your application to use components.