Intro to React + Hooks - Build a TODO App

• What is react?
• What is JSX?
• What is the "Virtual DOM"?
• create-react-app
• Show message from state on page
  • What is useState?
• Create New Todo Form
• Call a function when the form is submitted
  • What is useCallback?
• Create a string state value to store the user input
• Listen for when the input changes and update state
• Log the user input when the form is submitted
• Create an array state value for todos
• Add a new todo into the todos array, with done: false
• Show the todos in a list
• Check done on a todo to mark it as done
  • Show a line through the todo text
• Add a button to remove a todo
• Add a button to mark all todos as done
• What are components?
• What are props?
• Create a TodoList Component
  • Pass the todo array down with props
  • Pass the mark done function down with props
  • Pass the remove todo function down with props
• Create a TodoItem Component
  • Pass the todo down with props
  • Pass the mark done function down with props
  • Pass the remove todo function down with props
• Create a Form Component
  • Pass the add todo function down with props

References

• https://reactjs.org/docs/getting-started.html
• https://reactjs.org/docs/hooks-reference.html
• https://reactjs.org/docs/react-api.html
• https://reactjs.org/tutorial/tutorial.html#developer-tools