Building a Simple Todo App with React: A Step-by-Step Guide

Create a powerful React todo app: streamline your tasks, boost productivity, and stay organized. Follow our step-by-step guide now!

Tweet
Share
Share
Pin

Introduction: In this tutorial, we’ll walk you through the process of building a simple yet functional todo app using React. By the end of this guide, you’ll have a solid understanding of React’s core concepts and be able to create your own interactive web applications. Let’s get started!

Prerequisites: Before we begin, make sure you have the following prerequisites installed on your system:

  • Node.js (with npm or Yarn)
  • Code editor of your choice (e.g., Visual Studio Code, Sublime Text)

Step 1: Set Up a React Project

  1. Open your terminal or command prompt and navigate to the directory where you want to create your project.
  2. Run the following command to create a new React project using Create React App:
npx create-react-app todo-app

Once the project is created, navigate into the project directory:

cd todo-app

Start the development server by running the following command:

npm start

This will launch your React application in a development server, and you’ll be able to see it running in your browser.

Step 2: Create the TodoApp Component

  1. Open your code editor and navigate to the src folder in your project.
  2. Create a new file called TodoApp.js and open it in your code editor.
  3. Copy and paste the following code into the TodoApp.js file:
import React, { useState } from "react";

const TodoApp = () => {
  const [todos, setTodos] = useState([]);
  const [input, setInput] = useState("");

  const addTodo = (e) => {
    e.preventDefault();
    if (!input) return;
    setTodos([...todos, { id: Date.now(), text: input, done: false }]);
    setInput("");
  };

  const deleteTodo = (id) => {
    setTodos(todos.filter((todo) => todo.id !== id));
  };

  const markTodo = (id) => {
    setTodos(
      todos.map((todo) => (todo.id === id ? { ...todo, done: !todo.done } : todo))
    );
  };

  return (
    <div className="container">
      <h1>Todo App</h1>
      <form onSubmit={addTodo}>
        <input
          type="text"
          value={input}
          onChange={(e) => setInput(e.target.value)}
          placeholder="Add a new todo"
        />
        <button type="submit">Add Todo</button>
      </form>
      <ul>
        {todos.map((todo) => (
          <li key={todo.id} className={`todo-item ${todo.done ? "done" : ""}`}>
            <span onClick={() => markTodo(todo.id)}>{todo.text}</span>
            <button className="delete" onClick={() => deleteTodo(todo.id)}>
              Delete
            </button>
          </li>
        ))}
      </ul>
    </div>
  );
};

export default TodoApp;

Save the file.

Step 3: Run the Todo App

  1. Go back to your terminal or command prompt.
  2. If you haven’t already done so, make sure you’re inside the project directory (todo-app).
  3. Stop the development server by pressing Ctrl + C.
  4. Run the following command to start the development server again:
npm start

Open your browser and visit http://localhost:3000 to see the todo app in action.

Conclusion: Congratulations! You’ve successfully built a simple todo app using React. Throughout this tutorial, you learned how to set up a React project, create functional components, use state hooks (useState), handle form submissions, and update the UI based on state changes.

Feel free to enhance this app further by adding additional features, such as editing todos, sorting or filtering functionality, or persisting data using a backend or local storage.

Remember, this is just the beginning of your journey into React development. Explore the official React documentation and experiment with more complex applications to deepen your knowledge and skills.