Building a Complete Todo List App with React

Introduction

Todo list applications are a classic project for developers learning a new framework or language. They provide a practical way to understand core concepts like state management, user input handling, and component rendering. In this comprehensive guide, we’ll walk you through building a complete and functional todo list application using React. We’ll cover everything from setting up the project to persisting data in local storage, creating a polished user interface, and adding features like marking tasks as complete and deleting them.

Setting Up the Project

First, let’s create a new React project using Create React App. Open your terminal and run:

npx create-react-app react-todo-app
cd react-todo-app

This command bootstraps a new React project with all the necessary dependencies and configurations. Once the installation is complete, you can start the development server:

npm start

This will open your application in your default browser, typically at http://localhost:3000.

Project Structure

Let’s create a simple project structure to keep our code organized:

1
react-todo-app/
2
├── public/
3
├── src/
4
│   ├── components/
5
│   │   ├── TodoForm.js
6
│   │   ├── TodoItem.js
7
│   │   └── TodoList.js
8
│   ├── App.js
9
│   ├── App.css
10
│   └── index.js
11
├── package.json
12
└── README.md

Here’s a brief explanation of each file:

• App.js: The main component that orchestrates the application.
• App.css: CSS file for the main application.
• components/: Directory to store reusable React components.
  • TodoForm.js: Component for adding new todos.
  • TodoItem.js: Component for displaying a single todo item.
  • TodoList.js: Component to display the list of todos.

Creating the TodoForm Component

The TodoForm component is responsible for taking user input and adding new todo items to the list. Create a file named TodoForm.js inside the components directory with the following code:

1
import React, { useState } from 'react';
2

3
function TodoForm({ addTodo }) {
4
  const [value, setValue] = useState('');
5

6
  const handleSubmit = e => {
7
    e.preventDefault();
8
    if (!value) return;
9
    addTodo(value);
10
    setValue('');
11
  };
12

13
  return (
14
    <form onSubmit={handleSubmit}>
15
      <input
16
        type="text"
17
        className="input"
18
        value={value}
19
        placeholder="Add Todo..."
20
        onChange={e => setValue(e.target.value)}
21
      />
22
    </form>
23
  );
24
}
25

26
export default TodoForm;

This component uses the useState hook to manage the input value. The handleSubmit function prevents the default form submission behavior, checks if the input is not empty, calls the addTodo function (which will be passed down from the parent component), and resets the input field.

Creating the TodoItem Component

The TodoItem component displays a single todo item and handles marking it as complete or deleting it. Create a file named TodoItem.js inside the components directory with the following code:

1
import React from 'react';
2

3
function TodoItem({ todo, index, completeTodo, removeTodo }) {
4
  return (
5
    <div
6
      className="todo"
7
      style={{ textDecoration: todo.isCompleted ? "line-through" : "" }}
8
    >
9
      {todo.text}
10

11
      <div>
12
        <button onClick={() => completeTodo(index)}>Complete</button>
13
        <button onClick={() => removeTodo(index)}>x</button>
14
      </div>
15
    </div>
16
  );
17
}
18

19
export default TodoItem;

This component receives the todo object, its index in the list, and the completeTodo and removeTodo functions (passed from the parent) as props. It renders the todo text and two buttons: one to mark the todo as complete and another to remove it. The textDecoration style is conditionally applied based on the isCompleted property of the todo.

Creating the TodoList Component

The TodoList component renders the list of todo items using the TodoItem component. Create a file named TodoList.js inside the components directory. For simplicity, we’ll move the completeTodo and removeTodo functions to the App.js and pass them down

1
import React from 'react';
2
import TodoItem from './TodoItem';
3

4
function TodoList({ todos, completeTodo, removeTodo }) {
5
  return (
6
    <div className="todo-list">
7
      {todos.map((todo, index) => (
8
        <TodoItem
9
          key={index}
10
          index={index}
11
          todo={todo}
12
          completeTodo={completeTodo}
13
          removeTodo={removeTodo}
14
        />
15
      ))}
16
    </div>
17
  );
18
}
19

20
export default TodoList;

This component receives the todos array and the completeTodo and removeTodo functions as props. It uses the map method to iterate over the todos array and render a TodoItem component for each todo. The key prop is important for React to efficiently update the list.

Integrating Components in App.js

Now, let’s integrate these components into our main App.js file.

1
import React, { useState, useEffect } from 'react';
2
import TodoForm from './components/TodoForm';
3
import TodoList from './components/TodoList';
4
import './App.css';
5

6
function App() {
7
  const [todos, setTodos] = useState(() => {
8
    const savedTodos = localStorage.getItem('todos');
9
    if (savedTodos) {
10
      return JSON.parse(savedTodos);
11
    } else {
12
      return [];
13
    }
14
  });
15

16
  useEffect(() => {
17
    localStorage.setItem('todos', JSON.stringify(todos));
18
  }, [todos]);
19

20

21
  const addTodo = text => {
22
    const newTodos = [...todos, { text, isCompleted: false }];
23
    setTodos(newTodos);
24
  };
25

26
  const completeTodo = index => {
27
    const newTodos = [...todos];
28
    newTodos[index].isCompleted = true;
29
    setTodos(newTodos);
30
  };
31

32
  const removeTodo = index => {
33
    const newTodos = [...todos];
34
    newTodos.splice(index, 1);
35
    setTodos(newTodos);
36
  };
37

38
  return (
39
    <div className="app">
40
      <div className="todo-list">
41
        <h1>Todo List</h1>
42
        <TodoForm addTodo={addTodo} />
43
        <TodoList
44
            todos={todos}
45
            completeTodo={completeTodo}
46
            removeTodo={removeTodo}
47
        />
48
      </div>
49
    </div>
50
  );
51
}
52

53
export default App;

Here’s what’s happening in this code:

• State Management: We use the useState hook to manage the todos array. The initial state is retrieved from local storage using a function that’s only called on the first render. If there are no saved todos, it starts with an empty array.
• Local Storage Persistence: The useEffect hook is used to persist the todos array in local storage whenever it changes. This ensures that the todos are saved even when the browser is closed or refreshed. JSON.stringify converts the array to a string for storage, and JSON.parse converts it back when retrieved.
• addTodo Function: This function adds a new todo object (containing the text and a isCompleted flag) to the todos array. It creates a new array using the spread operator (...) to avoid mutating the original state.
• completeTodo Function: This function marks a todo as complete by setting its isCompleted property to true. It also creates a new array to avoid mutating the state.
• removeTodo Function: This function removes a todo from the todos array using the splice method. It also creates a new array.
• Rendering: The component renders the TodoForm and TodoList components, passing the necessary props (like addTodo, todos, completeTodo, and removeTodo).

Styling the Application

Let’s add some basic styling to our application using the App.css file.

1
.app {
2
  display: flex;
3
  justify-content: center;
4
  align-items: center;
5
  height: 100vh;
6
  background-color: #f0f0f0;
7
}
8

9
.todo-list {
10
  background-color: white;
11
  padding: 20px;
12
  border-radius: 8px;
13
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
14
  width: 400px;
15
}
16

17
.todo {
18
  display: flex;
19
  justify-content: space-between;
20
  align-items: center;
21
  padding: 10px;
22
  border-bottom: 1px solid #eee;
23
}
24

25
.todo:last-child {
26
  border-bottom: none;
27
}
28

29
.input {
30
  width: 100%;
31
  padding: 10px;
32
  border: 1px solid #ccc;
33
  border-radius: 4px;
34
  margin-bottom: 10px;
35
}
36

37
button {
38
  background-color: #4CAF50; /* Green */
39
  border: none;
40
  color: white;
41
  padding: 5px 10px;
42
  text-align: center;
43
  text-decoration: none;
44
  display: inline-block;
45
  font-size: 14px;
46
  cursor: pointer;
47
  border-radius: 4px;
48
  margin-left: 5px;
49
}
50

51
button:hover {
52
  opacity: 0.8;
53
}

This CSS provides basic styling for the app container, the todo list, individual todo items, and the input field. Feel free to customize the styling to your liking.

Conclusion

Congratulations! You’ve successfully built a complete todo list application using React. This tutorial covered the basics of creating components, managing state, handling user input, and persisting data in local storage. You can now expand this application by adding more features, such as editing todos, filtering todos based on their completion status, or implementing drag-and-drop functionality. Experiment with different styling techniques to make the application visually appealing. The possibilities are endless! Remember to always focus on writing clean, maintainable, and well-documented code. Happy coding!