Learn React Hooks

Designing the app structure

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:

1. We start by drawing a mock-up of an interface for our ToDo app:

Mock-up of our ToDo app

2. 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

3. Now we can define the container components: ...