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

In the previous article, we set up our development environment with React and Vite and created the basic structure for our todo list web app. Now, it’s time to start building the components that will make up our app.

Creating the TodoItem Component

Let’s start by creating the `TodoItem` component. This component will be responsible for rendering each individual todo item in our list.

“`html

“`

First, we create a `div` with the class `todo-item` to contain our todo item. Inside the `div`, we have an `input` element with a type of `checkbox`, a `span` element to display the todo item text, and two `button` elements for editing and deleting the todo item.

Creating the TodoList Component

Next, we’ll create the `TodoList` component. This component will be responsible for rendering the list of todo items and handling the logic for adding, editing, and deleting items.

“`html

“`

Similarly, we create a `div` with the class `todo-list` to contain our todo list. Inside the `div`, we have an `h2` element to display the title, another `div` with the class `todo-items` where the `TodoItem` components will be rendered, an `input` element for adding new todo items, and a `button` for adding the new todo item.

Putting it All Together

Now that we have our `TodoItem` and `TodoList` components, we can start putting them together in our main app component.

“`html

“`

Here, we create a `div` with the class `app` to contain our entire app. Inside the `div`, we simply render the `TodoList` component.

Conclusion

With the `TodoItem` and `TodoList` components in place, we now have the basic building blocks for our todo list web app. In the next article, we’ll add functionality to our components and make our app fully interactive.