How to Build a Simple To-Do App in React (2025 Edition)

Learn how to build a simple yet powerful To-Do app in React.js from scratch — perfect for beginners in 2025!

Why a To-Do App?

The To-Do List is a classic beginner project that teaches you:

React components & props
useState hook for state management
Handling form input
Rendering lists
Adding/removing tasks

Prerequisites

Before we begin, make sure you have:

Node.js and npm installed
Basic knowledge of JavaScript and React

If you don’t have React set up, use this:

Step 1: Create the Project Structure

Inside the src/ folder, create two new files:

src/
├── App.js
├── TodoList.js
└── TodoItem.js

Step 2: App.js

import React, { useState } from "react";
import TodoList from "./TodoList";

function App() {
  const [tasks, setTasks] = useState([]);
  const [input, setInput] = useState("");

  const addTask = () => {
    if (input.trim() !== "") {
      setTasks([...tasks, { id: Date.now(), text: input }]);
      setInput("");
    }
  };

  const deleteTask = (id) => {
    setTasks(tasks.filter((task) => task.id !== id));
  };

  return (
    <div className="App">
      <h2>React To-Do App (2025)</h2>
      <input
        type="text"
        placeholder="Add a task"
        value={input}
        onChange={(e) => setInput(e.target.value)}
      />
      <button onClick={addTask}>Add</button>

      <TodoList tasks={tasks} deleteTask={deleteTask} />
    </div>
  );
}

export default App;

Step 3: TodoList.js

import React from "react";
import TodoItem from "./TodoItem";

function TodoList({ tasks, deleteTask }) {
  return (
    <ul>
      {tasks.map((task) => (
        <TodoItem key={task.id} task={task} deleteTask={deleteTask} />
      ))}
    </ul>
  );
}

export default TodoList;

Step 4: TodoItem.js

import React from "react";

function TodoItem({ task, deleteTask }) {
  return (
    <li>
      {task.text}
      <button onClick={() => deleteTask(task.id)}>❌</button>
    </li>
  );
}

export default TodoItem;

Optional: Add Styling (CSS)

Add this to App.css for a basic look:

.App {
  text-align: center;
  padding: 2rem;
}

input {
  padding: 0.5rem;
  margin-right: 0.5rem;
}

button {
  padding: 0.5rem;
  cursor: pointer;
}

Final Result

Add tasks ✅
Remove tasks ❌
Simple and fully working!

Try adding features like:

Task completion toggle
Local storage saving
Editing tasks

SEO Keywords Used:

React to-do app tutorial
React beginner project 2025
How to build a to-do list in React
useState in React example
React project ideas

Conclusion

This To-Do App is the perfect React project to start with. It’s small, simple, and teaches the most important concepts of React in 2025. Keep building on it — maybe add Firebase, Material UI, or Redux!

Search This Blog

blog