vince7650 / intro-react-todo Goto Github PK

HTML 16.54% JavaScript 81.76% CSS 1.70%

intro-react-todo's Introduction

Intro to React - Build a TODO App

What is react?
What is JSX?
create-react-app
Show message from state on page
Create New Todo Form
Call a function when the form is submitted
Create a string property on our state 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 property on our state 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

Recommend Projects