- 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