Building a Simple Todo List App with React: A Beginner's Guide

In the world of web development, mastering React opens the door to creating powerful and dynamic user interfaces. Whether you're a seasoned developer or just starting your journey, building a simple project like a todo list app can be a great way to get hands-on experience with React. In this beginner's guide, we'll walk through the process of creating a todo list app from scratch using React.

Why Build a Todo List App?

A todo list app may seem trivial at first glance, but it serves as an excellent introduction to React's core concepts and features. By building a todo list app, you'll learn about component-based architecture, state management, event handling, and more—all essential skills for any React developer.

Setting Up Your Development Environment

Before we dive into coding, make sure you have Node.js and npm (Node Package Manager) installed on your machine. These tools will allow us to create and manage our React project seamlessly.

To create a new React app, open your terminal or command prompt and run the following command:

npx create-react-app todo-list

Once the setup process is complete, navigate into the newly created todo-list directory:

cd todo-list

Writing the Todo List Component

Now, let's open the src/App.js file and replace its contents with the code provided below. This code defines our todo list component, complete with functionality for adding, marking as completed, and deleting tasks.

import React, { useState } from 'react';
import './App.css';

function App() {
  const [tasks, setTasks] = useState([]);
  const [newTask, setNewTask] = useState('');

  const handleChange = (event) => {
    setNewTask(event.target.value);
  };

  const handleSubmit = (event) => {
    event.preventDefault();
    if (newTask.trim() !== '') {
      setTasks([...tasks, { id: Date.now(), text: newTask, completed: false }]);
      setNewTask('');
    }
  };

  const toggleComplete = (taskId) => {
    setTasks(
      tasks.map((task) =>
        task.id === taskId ? { ...task, completed: !task.completed } : task
      )
    );
  };

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

  return (
    <div className="App">
      <h1>Todo List</h1>
      <form onSubmit={handleSubmit}>
        <input
          type="text"
          value={newTask}
          onChange={handleChange}
          placeholder="Add a new task"
        />
        <button type="submit">Add Task</button>
      </form>
      <ul>
        {tasks.map((task) => (
          <li key={task.id}>
            <input
              type="checkbox"
              checked={task.completed}
              onChange={() => toggleComplete(task.id)}
            />
            <span
              style={{ textDecoration: task.completed ? 'line-through' : 'none' }}
            >
              {task.text}
            </span>
            <button onClick={() => deleteTask(task.id)}>Delete</button>
          </li>
        ))}
      </ul>
    </div>
  );
}

export default App;

Running Your Todo List App

With the todo list component in place, let's start our development server by running the following command:

npm start

This will launch your todo list app in a new browser window. You can now add new tasks, mark tasks as completed by checking the checkbox, and delete tasks by clicking the delete button.

Conclusion

Congratulations! You've successfully built a simple todo list app using React. This project serves as a solid foundation for further exploration into React's vast ecosystem. As you continue your journey, consider adding new features, experimenting with styling, or integrating additional libraries to enhance your todo list app further.

Stay curious, keep coding, and happy building!