Posted on Aug 11

✨ React To-Do App: A Beginner’s Thinking Guide to Building from Scratch

“How do I even start building something in React?”

If you've asked yourself that question, you’re not alone. React can feel intimidating at first, but when you break it down one thought at a time, it becomes a superpower.

Let’s walk through building a To-Do App — not just the code, but the thinking process behind every line. This blog isn’t about copy-pasting; it’s about helping you develop a builder’s mindset.

🧠 Step 1: Think in Components

"What am I building?"
A To-Do App is a perfect starter project because it helps you practice:

Displaying a list
Adding new items
Updating item state (like marking it done)
Removing items

So let’s break it into components:

App: The heart that holds everything.
TodoList: Displays the list of items.
TodoItem: Represents one task.

⚙️ Step 2: Set Up the Project

We’re using Vite for a fast and modern React setup.

npm create vite@latest react-todo-app -- --template react cd react-todo-app npm install npm run dev

Open src/App.jsx — that’s where your app lives.

📦 Step 3: Start from the Middle — The App.jsx
When I build something new, I don’t write everything at once. I start with what I understand best — in this case, managing the list of todos.

Here’s the code (with thought bubbles):

import { useState } from 'react'; import TodoList from './components/TodoList'; function App() { const [todos, setTodos] = useState([]); // 🧠 The to-do list const [text, setText] = useState(''); // ✍️ What the user is typing const addTodo = (e) => { e.preventDefault(); // ⛔ Prevent page refresh when form is submitted if (text.trim()) { const newTodo = { id: Date.now(), // Unique ID using current timestamp text, // The text the user typed completed: false // New tasks are not completed by default }; setTodos([...todos, newTodo]); // ✅ Add the new task to the existing list setText(''); // 🔄 Clear input field } }; // Toggle completion const toggleComplete = (id) => { setTodos(todos.map(todo => todo.id === id ? { ...todo, completed: !todo.completed } : todo )); }; // Delete a task const deleteTodo = (id) => { setTodos(todos.filter(todo => todo.id !== id)); }; return ( <div> <h1>React To-Do App</h1> {/* 🧠 Add a task */} <form onSubmit={addTodo}> <input type="text" value={text} placeholder="Add a new task" onChange={(e) => setText(e.target.value)} /> <button type="submit">Add</button> </form> {/* 🧠 Show the list */} <TodoList todos={todos} onToggle={toggleComplete} onDelete={deleteTodo} /> </div> ); } export default App;

🔍 What’s happening:

The form is submitted → The addTodo function is called.
If there's something typed (text.trim()), it creates a new todo object.
The new task is added to the existing todos array using the spread operator.
setText('') clears the input so the user can type the next task.
Every task has a unique ID.
In deleteTodo → filter() creates a new array excluding the task with the matching ID.
The new filtered array is set back into the state using setTodos().
map() goes through all tasks.
In toggleComplete → when it finds the one with the matching ID, it flips the value of completed.
The ...todo keeps everything else the same, only changing completed.

🔄 Step 4: Build TodoList & TodoItem

Why separate them?

Because every task can be reused, styled, or enhanced on its own. Keeping things modular = clean code.

TodoList.jsx

import TodoItem from './TodoItem'; function TodoList({ todos, onToggle, onDelete }) { return ( <ul> {todos.map(todo => ( <TodoItem key={todo.id} todo={todo} onToggle={onToggle} onDelete={onDelete} /> ))} </ul> ); } export default TodoList;

TodoItem.jsx

function TodoItem({ todo, onToggle, onDelete }) { return ( <li> <span onClick={() => onToggle(todo.id)} style={{ textDecoration: todo.completed ? 'line-through' : 'none', cursor: 'pointer', marginRight: '10px' }} > {todo.text} </span> <button onClick={() => onDelete(todo.id)}>❌</button> </li> ); } export default TodoItem;

🧩 Step 5: Test the Flow (and Think Like the User)