Creating a React Todo Component with React Todo Component List is one of the best beginner-friendly projects to understand the power of React. In this tutorial, you’ll build a complete React JS Todo List application — functional, stylish, and enhanced with features like local storage and task editing. This is a great way to master concepts like state management, components, event handling, and local persistence.

Whether you’re just starting out or brushing up your skills, this React Todo List Component tutorial will walk you through every step of building a real-world app.

Installing Node.js and npm

Download and Install Node.js: Head over to the official Node.js website to download the installer. Opt for the LTS (Long Term Support) version for better reliability and ongoing updates.
Install npm: Alongside Node.js, the installation automatically includes npm (Node Package Manager), an essential tool for handling JavaScript libraries and dependencies.

Creating a New React Application

Install Create React App: Open your terminal and use the command npm install -g create-react-app to globally install this utility for scaffolding React projects.
Generate Your Application: Run the command npx create-react-app my-app to set up a new directory named my-app, preconfigured with everything you need to start coding.

Understanding the Application Structure

Review the Setup: Enter your project folder and examine the default structure created by Create React App. The key directories include public, which stores static assets, src, which holds the app’s source code, and node_modules, where the app’s dependencies are located.
Important Files: Inside the src folder, you’ll find App.js, the main component of your application, and index.js, which mounts the root component to the DOM.

Running the Development Server

Start the Server: Within your project folder, use the npm start command to initiate the development server. This will build the application and open it in your default web browser.
Live Updates: Any edits made to your source files will instantly update in the browser, courtesy of React’s hot reloading feature.

This streamlined setup process, powered by Create React App, removes the hassle of manual configuration and gives you a ready-to-use project structure, so you can dive straight into building your React application.

To build your React Todo Component, you need a working environment with Node.js and npm.

Prerequisites:

• Basic JavaScript & HTML knowledge

• Node.js and npm installed

• Code editor like VS Code

Step 1: Setting Up Your React Todo Component

npx create-react-app todo-app
cd todo-app
npm start

Step 2: Creating the ToDo Component Structure

Let’s create the core of our React JS Todo List. Inside the src folder, create a new file ToDo.js:

import React from 'react';

const ToDo = () => {
    return (
        <div className="todo-container">
            <h1>ToDo List</h1>
        </div>
    );
};
export default ToDo;

Now import it into App.js:

import React from 'react';
import ToDo from './ToDo';

const App = () => (
    <div>
        <ToDo />
    </div>
);
export default App;

Step 3: Adding State for the React Todo List Component

We’ll now manage tasks using useState:

import React, { useState } from 'react';

const ToDo = () => {
    const [tasks, setTasks] = useState([]);
    const [task, setTask] = useState("");
    const addTask = () => {
        if (task) {
            setTasks([...tasks, task]);
            setTask("");
        }
    };
    return (
        <div className="todo-container">
            <h1>React JS ToDo List</h1>
            <input value={task} onChange={(e) => setTask(e.target.value)} />
            <button onClick={addTask}>Add Task</button>
            <ul>
                {tasks.map((t, i) => <li key={i}>{t}</li>)}
            </ul>
        </div>
    );
};
export default ToDo;

Step 4: Styling Your React Todo Component

Create a ToDo.css file:

.todo-container {
    max-width: 500px;
    margin: 50px auto;
    text-align: center;
}
input {
    width: 70%;
    padding: 10px;
    margin-right: 10px;
}
button {
    padding: 10px 20px;
    background-color: #28a745;
    color: white;
    border: none;
}
ul {
    list-style-type: none;
    padding: 0;
}
li {
    background: #f8f9fa;
    margin: 5px 0;
    padding: 10px;
}

Then import it in ToDo.js:

import './ToDo.css';

Step 5: Deleting Tasks in React JS Todo List

Now allow task deletion in the React Todo List Component:

const deleteTask = (index) => {
    setTasks(tasks.filter((_, i) => i !== index));
};

Modify the list rendering:

<li key={index}>
    {t} <button onClick={() => deleteTask(index)}>Delete</button>
</li>

Step 6: Save Tasks Using Local Storage

Add persistence to your React JS Todo List:

useEffect(() => {
    localStorage.setItem("tasks", JSON.stringify(tasks));
}, [tasks]);

const [tasks, setTasks] = useState(() => {
    const saved = localStorage.getItem("tasks");
    return saved ? JSON.parse(saved) : [];
});

This allows your React Todo Component to remember tasks after reloads.

Step 7: Editing Tasks in React Todo Component

Add task editing support for better UX:

const [editingIndex, setEditingIndex] = useState(null);

const editTask = (index) => {
    setTask(tasks[index]);
    setEditingIndex(index);
};

const addTask = () => {
    if (task) {
        if (editingIndex !== null) {
            const updated = [...tasks];
            updated[editingIndex] = task;
            setTasks(updated);
            setEditingIndex(null);
        } else {
            setTasks([...tasks, task]);
        }
        setTask("");
    }
};

Inside your ul:

<li key={index}>
    {t}
    <button onClick={() => editTask(index)}>Edit</button>
    <button onClick={() => deleteTask(index)}>Delete</button>
</li>

Conclusion