As we did before with the blog app, we are going to start by thinking about the basic structure of our app. For this app, we are going to need the following features:
- A header
- A way to add new todo items
- A way to show all todo items in a list
- A filter for the todo items
It is always a good idea to start with a mock-up. So, let's begin:
- We start by drawing a mock-up of an interface for our ToDo app:
Mock-up of our ToDo app
- Next, we define the fundamental components, in a similar way to how we did it with the blog app:
Defining fundamental components in our app mock-up
- Now we can define the container components:
Defining container components in our app mock-up
As we can see, we are going to need the following components:
- App
- Header
- AddTodo
- TodoList
- TodoItem
- TodoFilter (+ TodoFilterItem)
The TodoList component makes use of a TodoItem component, which is used to show an item, with a checkbox to complete and a button to remove it. The TodoFilter component internally uses a TodoFilterItem component to show the various filters.