Todo List Web App With React And Vite – PART 5: Components Building

In this tutorial, we will continue building our Todo List web app using React and Vite. In this part, we will focus on building the components for our app.

Creating the todo item component

The first component we will create is the todo item component. This component will be responsible for rendering a single todo item in the list. We will create a new file called TodoItem.js and define our component like this:


<div>
<input type="checkbox" />
<p>Todo item text goes here</p>
<button>Delete</button>
</div>


This component will render a checkbox, the todo item text and a delete button. We will later add the functionality to mark the todo item as completed and to delete it.

Creating the todo list component

Next, we will create the todo list component. This component will be responsible for rendering the list of todo items. We will create a new file called TodoList.js and define our component like this:


<div>
<h2>Todo List</h2>
<div>
<TodoItem />
<TodoItem />
<TodoItem />
</div>
</div>


This component will render a heading and a list of todo items. In the future, we will update this component to dynamically render the todo items based on the data we have in our app.

Creating the add todo component

Finally, we will create the add todo component. This component will be responsible for adding new todo items to the list. We will create a new file called AddTodo.js and define our component like this:


<div>
<input type="text" />
<button>Add Todo</button>
</div>


This component will render an input field and a button. When the button is clicked, it will add a new todo item to the list with the text from the input field.

With these components in place, we now have the basic structure for our Todo List web app. In the next part of this tutorial, we will add functionality to our components and start building the logic for our app.