react-class-components.md

React Class Components Instructor Notes

Objectives

• Identify a class component and it's parts
• Use an event to change state
• Use a form to collect data from a user
• Restructure your application using components

Resources

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

Identify a class component and it's parts

• How is class component declared?
• What parameters does the constructor take?
• What is state used for and where is it initially stored?
• What is the name of the method that determines what goes on screen? What does that method return?

Use an event to change state

• Add a button below the list named Complete All
• Add an event handler to the button that updates the state such that the completed property of all items to true
• Add a button to every list item named Complete
• Add an event handler to the Complete button that updates just that one list item
• Add a button to every list item named Delete
• Add an event handler to the Delete button that removes that list item.

Use a form to collect data from a user

• Below the unordered list, create a form that has on input element, and a submit button
• Make the input element a controlled component
• Add an submit event handler to the form
• Add submited list item to the state, such that the new list item is rendered

Restructure your application using components

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