Simple Todos App built with React, Tailwind CSS and Vite

I read some articles saying that we should try to make our React components as independent as possible. For example, if we want to create a List component to list our todos, we should not implement the logic about manipulating todos inside this component. Doing so will make our List component non-reusable.

To make the List component more reusable, we can implement the logic about manipulating todos in its parent component, and pass the todos data to it. All the List component should do is to list the data which are passed by its parent component. As a result, if we want the List component to list the other data, we can just pass the data to it.

I totally agree with this design pattern, so I built this project to practice this pattern.