How to Build a To-Do App Using React

Ever feel like your to-do list is plotting against you? Maybe it’s time to level the playing field—with your very own React-powered to-do app. 🦸‍♂️ Let’s build one together, and who knows? By the end, you might even check “learn React” off your list (and “procrastinate” too, but let’s not get ahead of ourselves).

Step 1: Start with the Basics—Or, How to Befriend create-react-app

Before you can conquer your tasks, you’ll need to conquer your terminal:

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

Congratulations! You’ve just spun up a fresh React project—fresher than my morning cup of chai. ☕️

Step 2: State Management—Because Even To-Do’s Have Trust Issues

React’s useState hook is like the ultra-reliable friend who keeps your plans in check.

import React, { useState } from 'react';

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

Now, “tasks” is your all-knowing list, and “input” is that tiny voice whispering your next brilliant idea (or reminding you to buy milk).

Step 3: Adding Tasks—The Digital Equivalent of Sticky Notes

Let’s add a function that lets users submit tasks:

const addTask = () => {
  if (input.trim()) {
    setTasks([...tasks, input]);
    setInput('');
  }
};

And the input field:

<input 
  value={input}
  onChange={e => setInput(e.target.value)}
  placeholder="What needs doing?"
/>
<button onClick={addTask}>Add</button>

It’s so simple, even your cat could add “nap” to the list. (In fact, she probably will.)

Step 4: Displaying To-Dos—Or, “Look Ma, I’m Productive!”

Map those tasks into existence:

<ul>
  {tasks.map((task, idx) => (
    <li key={idx}>{task}</li>
  ))}
</ul>

Each new task pops up, a tiny digital confetti of accomplishment.

Step 5: Deleting Tasks—Because Sometimes, You Just Change Your Mind

Sometimes a to-do deserves a swift exit. Add a delete button:

const removeTask = idxToRemove => {
  setTasks(tasks.filter((_, idx) => idx !== idxToRemove));
};

And update the render:

<ul>
  {tasks.map((task, idx) => (
    <li key={idx}>
      {task} <button onClick={() => removeTask(idx)}>Delete</button>
    </li>
  ))}
</ul>

Voilà! Now you can banish “clean garage” to the digital abyss, guilt-free.

Step 6: Celebrate—You Just Built a To-Do App!

You’ve wrangled hooks, tamed state, and built something genuinely useful (take that, procrastination!). React makes UI logic fun—even addictive. Next, you could add local storage, due dates, or unicorn emojis. Why not? Innovation is just a feature away.

Remember, every big project starts with a single task. And sometimes, that task is “build a to-do app in React.” Go ahead—check it off!

Happy coding. And don’t forget to add “take a break” to your new to-do list. You’ve earned it. 🚀