Building a Simple To-Do App

Want to learn React FAST? Build a To-Do app — it’s one of the best beginner projects ever. Seriously, it’s fun, easy, and teaches you everything you need to get started with React.

Why a To-Do App?

Because it covers all the essentials:

How to manage data (state)
How to handle user input
How to update UI automatically
And how to keep your code clean & reusable

What Can You Do in This To-Do App?

Add tasks
Mark tasks as done
Delete tasks
Watch the list update in real-time

What You’ll Learn (No Boring Theory)

useState Hook:
This is how React keeps track of your tasks and input text.
Controlled Input:
Your input box is “controlled” by React — it knows what you type.
Add Tasks:
Use the spread operator (...) to add tasks without breaking your existing list.
Delete Tasks:
Use the .filter() method to remove tasks you don’t want.
Complete Tasks:
Use .map() to update the status of a task without messing up the rest.
Dynamic Styling:
Change colors and add strikethroughs to completed tasks — looks slick!

The Magic of Immutable Updates

React loves immutable updates — that means instead of changing data directly, you create a new copy with changes.

Why? Because React detects changes better, so your app updates fast and correctly.

For example, to add a task:

const newList = [...oldList, newTask];
setTodolist(newList);

To mark a task completed:

const updatedList = todolist.map((task, idx) =>
  idx === targetIndex ? {...task, completed: true} : task
);
setTodolist(updatedList);

The Full Code — Copy, Paste & Run!

import { useState } from "react";

export default function App() {
  const [Todolist, setTodolist] = useState([]);
  const [newTodo, setnewTodo] = useState("");

  function getText(e) {
    setnewTodo(e.target.value);
  }

  function addingTodo() {
    if(newTodo.trim() === "") return; // no empty tasks
    const updateTodo = [...Todolist, { text: newTodo, completed: false }];
    setTodolist(updateTodo);
    setnewTodo("");
  }

  function deleteTodo(index) {
    const updatedTodo = Todolist.filter((_, i) => i !== index);
    setTodolist(updatedTodo);
  }

  function completedTodo(index) {
    const updatedTodo = Todolist.map((todo, i) =>
      i === index ? { ...todo, completed: true } : todo
    );
    setTodolist(updatedTodo);
  }

  return (
    <div style={{ padding: "20px", fontFamily: "Arial" }}>
      <h2>🔥 React To-Do App 🔥</h2>
      <input
        type="text"
        placeholder="Add a task..."
        onChange={getText}
        value={newTodo}
        style={{ padding: "10px", width: "250px", marginRight: "10px" }}
      />
      <button onClick={addingTodo} style={{ padding: "10px" }}>
        Add
      </button>

      <div style={{ marginTop: "20px" }}>
        {Todolist.map((todo, index) => (
          <div key={index} style={{ display: "flex", alignItems: "center", marginBottom: "10px" }}>
            <span
              style={{
                flex: 1,
                textDecoration: todo.completed ? "line-through" : "none",
                color: todo.completed ? "green" : "black",
                fontWeight: todo.completed ? "bold" : "normal"
              }}
            >
              {todo.text}
            </span>
            <button onClick={() => deleteTodo(index)} style={{ marginRight: "5px" }}>
              ❌
            </button>
            <button onClick={() => completedTodo(index)}>✅</button>
          </div>
        ))}
      </div>
    </div>
  );
}

Pro Tips to Level Up

Prevent adding empty tasks (we did it with a simple if).
Add editing tasks feature.
Save your list in localStorage so it stays after refreshing.
Add cool animations for a slicker UI.
Connect with a backend to save tasks permanently.

If you found this helpful, smash that share button!
Let’s help more beginners learn React the fun way 🚀

Would you like me to help write tutorials on these next features? Just ask! 😊