/intro-react-hooks-todo

Primary LanguageJavaScriptMIT LicenseMIT

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