Build a Simple React To-Do List App: A Beginner’s Guide

Written by

javascriptfundamentals

in

In the fast-paced world of web development, managing tasks effectively is crucial. Whether you’re organizing your daily schedule, tracking project progress, or simply jotting down grocery lists, a to-do list application is an indispensable tool. React, with its component-based architecture and declarative approach, provides an excellent framework for building interactive and dynamic user interfaces. In this comprehensive guide, we’ll walk through the process of creating a simple yet functional to-do list app using React, perfect for beginners and intermediate developers looking to hone their skills.

Why Build a To-Do List App with React?

React’s popularity stems from its efficiency in building user interfaces. Here’s why React is an ideal choice for this project:

  • Component-Based Architecture: React allows you to break down the UI into reusable components, making your code organized and maintainable.
  • Virtual DOM: React uses a virtual DOM to efficiently update the actual DOM, leading to improved performance.
  • Declarative Programming: You describe what you want the UI to look like, and React takes care of updating it based on the data changes.
  • Large Community and Ecosystem: React has a vast community and a wealth of libraries and resources, making it easier to find solutions and support.

Building a to-do list app will not only teach you the fundamentals of React but also provide a practical understanding of state management, event handling, and component composition.

Prerequisites

Before we begin, ensure you have the following prerequisites:

  • Node.js and npm (or yarn) installed: These are essential for managing project dependencies and running the development server.
  • A basic understanding of HTML, CSS, and JavaScript: Familiarity with these languages is necessary to understand the code.
  • A code editor: Choose your preferred code editor (e.g., VS Code, Sublime Text, Atom) for writing and editing code.

Setting Up Your React Project

Let’s start by creating a new React project using Create React App, a popular tool for scaffolding React applications:

  1. Open your terminal or command prompt.
  2. Navigate to the directory where you want to create your project.
  3. Run the following command: npx create-react-app todo-app
  4. Navigate into your project directory: cd todo-app

This command creates a new directory called todo-app and sets up the basic structure of a React application. You’ll find several files and folders, including src, which contains the main source code.

Project Structure

The project structure will look something like this:

todo-app/
 ├── node_modules/
 ├── public/
 │   ├── index.html
 │   └── ...
 ├── src/
 │   ├── App.js
 │   ├── App.css
 │   ├── index.js
 │   └── ...
 ├── package.json
 └── ...

The key files we’ll be working with are:

  • src/App.js: This is where we’ll write the main component of our to-do list app.
  • src/App.css: This file will contain the styles for our app.
  • src/index.js: This file renders the App component into the DOM.

Building the To-Do List Components

Our to-do list app will consist of several components:

  • App: The main component that manages the state and renders other components.
  • TodoItem: Represents a single to-do item.
  • TodoForm: Handles adding new to-do items.

1. Creating the TodoItem Component

Let’s create the TodoItem component. This component will display each to-do item and include a checkbox to mark it as completed. Create a new file named TodoItem.js inside the src directory:

// src/TodoItem.js
import React from 'react';

function TodoItem({ todo, onComplete, onDelete }) {
  return (
    <div className="todo-item">
      <input
        type="checkbox"
        checked={todo.completed}
        onChange={() => onComplete(todo.id)}
      />
      <span className={todo.completed ? 'completed' : ''}>{todo.text}</span>
      <button onClick={() => onDelete(todo.id)}>×</button>
    </div>
  );
}

export default TodoItem;

In this component:

  • We receive a todo object, onComplete function, and onDelete function as props.
  • The checkbox’s checked attribute is bound to todo.completed.
  • The span element displays the to-do text, with a class of completed if the item is marked as complete.
  • The delete button calls the onDelete function when clicked.

2. Creating the TodoForm Component

Next, let’s create the TodoForm component. This component will provide an input field for users to add new to-do items. Create a new file named TodoForm.js inside the src directory:

// src/TodoForm.js
import React, { useState } from 'react';

function TodoForm({ onAdd }) {
  const [text, setText] = useState('');

  const handleSubmit = (e) => {
    e.preventDefault();
    if (text.trim() !== '') {
      onAdd(text);
      setText('');
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        value={text}
        onChange={(e) => setText(e.target.value)}
        placeholder="Add a new task"
      />
      <button type="submit">Add</button>
    </form>
  );
}

export default TodoForm;

In this component:

  • We use the useState hook to manage the input field’s value.
  • The handleSubmit function is called when the form is submitted. It prevents the default form submission behavior, calls the onAdd function (passed as a prop), and clears the input field.
  • The input field’s value is bound to the text state, and the onChange event updates the state.

3. Building the App Component

Now, let’s modify the App component (src/App.js) to bring everything together:

// src/App.js
import React, { useState, useEffect } from 'react';
import TodoItem from './TodoItem';
import TodoForm from './TodoForm';
import './App.css';

function App() {
  const [todos, setTodos] = useState([]);

  useEffect(() => {
    // Load todos from local storage on component mount
    const storedTodos = JSON.parse(localStorage.getItem('todos')) || [];
    setTodos(storedTodos);
  }, []);

  useEffect(() => {
    // Save todos to local storage whenever todos change
    localStorage.setItem('todos', JSON.stringify(todos));
  }, [todos]);

  const addTodo = (text) => {
    const newTodo = {
      id: Date.now(),
      text: text,
      completed: false,
    };
    setTodos([...todos, newTodo]);
  };

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

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

  return (
    <div className="app">
      <h1>To-Do List</h1>
      <TodoForm onAdd={addTodo} />
      <div className="todo-list">
        {todos.map((todo) => (
          <TodoItem
            key={todo.id}
            todo={todo}
            onComplete={toggleComplete}
            onDelete={deleteTodo}
          />
        ))}
      </div>
    </div>
  );
}

export default App;

In this component:

  • We use the useState hook to manage the todos state, which is an array of to-do objects.
  • We load todos from local storage in the first useEffect hook.
  • We save todos to local storage in the second useEffect hook whenever the todos change.
  • The addTodo function adds a new to-do item to the todos array.
  • The toggleComplete function toggles the completed status of a to-do item.
  • The deleteTodo function removes a to-do item from the todos array.
  • We render the TodoForm and iterate over the todos array to render TodoItem components.

4. Adding Styles (App.css)

Let’s add some basic styling to make our app look appealing. Open src/App.css and add the following CSS:

/* src/App.css */
.app {
  font-family: sans-serif;
  max-width: 600px;
  margin: 20px auto;
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

h1 {
  text-align: center;
}

.todo-form {
  margin-bottom: 20px;
}

.todo-form input {
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  width: 70%;
  margin-right: 10px;
}

.todo-form button {
  padding: 10px 20px;
  background-color: #4caf50;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.todo-item {
  display: flex;
  align-items: center;
  padding: 10px;
  border-bottom: 1px solid #eee;
}

.todo-item input[type="checkbox"] {
  margin-right: 10px;
}

.todo-item span {
  flex-grow: 1;
}

.todo-item button {
  background-color: #f44336;
  color: white;
  border: none;
  padding: 5px 10px;
  border-radius: 3px;
  cursor: pointer;
}

.completed {
  text-decoration: line-through;
  color: #888;
}

This CSS provides basic styling for the app, including the layout, input fields, buttons, and completed task styling.

Running the Application

Now that we’ve built our components, let’s run the application:

  1. In your terminal, make sure you’re in the todo-app directory.
  2. Run the command: npm start

This will start the development server, and your to-do list app will open in your browser (usually at http://localhost:3000). You should be able to add, complete, and delete to-do items.

Common Mistakes and How to Fix Them

Here are some common mistakes and how to avoid them:

  • Incorrect Import Paths: Double-check your import paths to ensure they match the file structure. For example, if you’re importing TodoItem from ./TodoItem.js, make sure the file is actually located in the same directory.
  • Immutability Issues: When updating the todos array, always create a new array instead of modifying the existing one directly. Use the spread operator (...) or the map and filter methods to ensure immutability.
  • Not Passing Props Correctly: Ensure you are passing the correct props to child components. For instance, the TodoItem component requires the todo object, onComplete, and onDelete functions.
  • Forgetting to Handle Events: Make sure you handle events like onChange and onSubmit properly. Use preventDefault() in form submissions to prevent the page from reloading.
  • Missing Keys in Lists: When rendering lists of items using map, always provide a unique key prop to each item. This helps React efficiently update the DOM.

Key Takeaways and Summary

In this tutorial, you’ve learned how to build a simple to-do list app with React. We covered the following key concepts:

  • Setting up a React project using Create React App.
  • Creating and using functional components.
  • Managing state with the useState hook.
  • Handling events (e.g., onChange, onSubmit).
  • Passing props to child components.
  • Rendering lists using the map method.
  • Using useEffect to manage side effects (e.g., saving to local storage).

By building this application, you’ve gained practical experience with fundamental React concepts, which will be invaluable as you continue your journey in React development. Remember to practice regularly, experiment with different features, and explore the vast resources available online to deepen your understanding.

FAQ

Here are some frequently asked questions:

  1. How can I add more features to my to-do list app?

    You can add features like priority levels, due dates, categories, and the ability to edit existing tasks. You can also integrate with a backend to store and retrieve data persistently.

  2. How do I deploy my React app?

    You can deploy your React app to platforms like Netlify, Vercel, or GitHub Pages. You’ll typically need to build your app (npm run build) and then deploy the contents of the build directory.

  3. What are some good resources for learning React?

    Official React documentation, React’s tutorial, and online courses on platforms like Udemy, Coursera, and freeCodeCamp are excellent resources.

  4. How can I improve the performance of my React app?

    Use techniques like code splitting, memoization, and optimizing images. Consider using a state management library like Redux or Zustand for more complex applications.

  5. Can I use this to-do list app in a real-world scenario?

    Yes, this to-do list app provides a solid foundation. You can expand it with features like user authentication, data persistence, and more advanced UI components to make it suitable for various use cases.

Building a to-do list app is a fantastic starting point for understanding React. By breaking down the problem into manageable components and utilizing React’s core features, you create a dynamic and interactive user experience. This tutorial provides a solid foundation, but the true learning begins with experimentation and practice. As you continue to build and refine your skills, you’ll discover the power and versatility of React in crafting modern web applications. The concepts of state management, component composition, and event handling that you learned here are the building blocks for more complex and sophisticated applications. Keep exploring, keep building, and remember that the journey of a thousand lines of code begins with a single component.

More posts