How to Create a Todo List Using React

So far, we've explored all the key concepts of React, including JSX, components, props, state management, reducers, context, refs, and effects. We also delved into creating custom hooks. Now, it's time to put these skills into practice. In this lesson, we'll build a todo list using React, allowing us to reinforce everything we've learned.

Our todo list will have the following features:

• Add a new task
• Delete a task
• Edit a task
• Mark a task as complete
• Filter the task list to view only the pending tasks

Creating a new React project

First of all, let's initialize a new React project. Go to your work directory and run the following command:

1npm create vite@latest <my_project>

This command allows you to initialize a project using Vite. You will be prompted to select a framework. Navigate using the ↑ and ↓ keys, select React and hit Enter.

1? Select a framework: › - Use arrow-keys. Return to submit.
2    Vanilla
3    Vue
4❯   React
5    Preact
6    Lit
7    Svelte
8    Solid
9    Qwik
10    Others

Next, Vite will ask if you opt to use TypeScript and SWC (Speedy Web Compiler). For now, let's stick to JavaScript and SWC.

1? Select a variant: › - Use arrow-keys. Return to submit.
2    TypeScript
3    TypeScript + SWC
4    JavaScript
5❯   JavaScript + SWC
6    Remix ↗