Back
Learn › React — Build Modern Web Apps › Build a To-Do App in React

Build a To-Do App in React

2 min read

Let us build a real React app

Time to combine everything — components, state, events, lists, and conditional rendering — into a working To-Do app. You can add tasks, see them in a list, and delete them.

The full component

import { useState } from "react";

function TodoApp() {
  const [tasks, setTasks] = useState([]);
  const [text, setText] = useState("");

  function addTask() {
    if (text.trim() === "") return;
    setTasks([...tasks, { id: Date.now(), title: text }]);
    setText("");
  }

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

  return (
    <div>
      <h1>My Tasks</h1>

      <input
        value={text}
        onChange={(e) => setText(e.target.value)}
        placeholder="New task"
      />
      <button onClick={addTask}>Add</button>

      {tasks.length === 0 && <p>No tasks yet. Add one!</p>}

      <ul>
        {tasks.map((task) => (
          <li key={task.id}>
            {task.title}
            <button onClick={() => deleteTask(task.id)}>❌</button>
          </li>
        ))}
      </ul>
    </div>
  );
}

See every concept working together

  • state (tasks, text) → useState
  • controlled input → value + onChange
  • events → onClick to add and delete
  • immutable updates → [...tasks, newTask] to add, filter to delete (we make a new array, never change the old one — that is the React rule)
  • lists & keys → map with key={task.id}
  • conditional rendering → the "No tasks yet" message with &&

One golden rule you just used

Notice we never did tasks.push(...). In React you never change state directly — you create a new array ([...tasks, item] or tasks.filter(...)) and pass it to the setter. This is exactly why React knows to re-render.

Where to go from here

  • Add an "edit" or "mark complete" feature.
  • Save tasks to localStorage with useEffect so they survive a refresh.
  • Split it into smaller components (TaskItem, TaskList).
  • Then take the React test on this platform and earn your certificate.

🎉 You built a real React app! You now know components, JSX, props, state, events, rendering lists, conditions, and effects — the complete core of React. Keep building; that is how it truly sticks.

A real app = state + events + immutable updates + lists + conditions, composed into components. You just used all of React's core in one place.

Log in to track progress
← Previous
Fetching data from an API
Tip