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

Written by

FixTechToday

in

In the world of web development, the ability to build interactive and dynamic user interfaces is a highly sought-after skill. ReactJS, a JavaScript library for building user interfaces, has become a cornerstone of modern web development. One of the best ways to learn React is by building small, practical projects. This guide will walk you through creating a simple, yet functional, To-Do List application using React. This project is perfect for beginners, providing hands-on experience with core React concepts like components, state management, and event handling. By the end, you’ll not only have a working To-Do List app but also a solid understanding of fundamental React principles.

Why Build a To-Do List App?

A To-Do List app is a quintessential project for learning any new technology. It’s simple enough to grasp the basics quickly, yet complex enough to expose you to essential programming concepts. It allows you to:

  • Practice Component-Based Architecture: React is all about building UIs with reusable components. A To-Do List app lets you create components for tasks, input fields, and the overall list.
  • Understand State Management: Managing the state of your To-Do items (adding, deleting, marking as complete) is a core part of the app, giving you hands-on experience with React’s state management.
  • Work with Event Handling: You’ll learn how to handle user interactions like adding tasks (clicking a button, pressing Enter) and marking tasks as complete.
  • Grasp Data Rendering: You’ll dynamically render a list of tasks based on the data stored in your application’s state.

Moreover, building a To-Do List provides a tangible outcome. You can use it daily, and it’s a great piece to showcase your React skills in a portfolio.

Prerequisites

Before we dive in, ensure you have the following:

  • Basic knowledge of HTML, CSS, and JavaScript: You should be familiar with the fundamentals of web development.
  • Node.js and npm (or yarn) installed: These are essential for managing project dependencies and running your React application. You can download Node.js from nodejs.org. npm usually comes bundled with Node.js.
  • A code editor: Choose your favorite code editor. Popular choices include VS Code, Sublime Text, or Atom.

Setting Up the Project

Let’s get started by creating a new React project using Create React App, which simplifies the setup process:

  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

    This command creates a new React app named “todo-app”.

  4. Navigate into your project directory: 
    cd todo-app
  5. Start the development server: 
    npm start

    This command starts the development server, and your app should open in your default web browser at `http://localhost:3000`.

Project Structure

After running `create-react-app`, your project directory will have a structure similar to this:

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

The `src` directory is where you’ll spend most of your time. `App.js` is the main component of your application, and `index.js` is the entry point that renders the `App` component into the `index.html` file.

Building the Components

We’ll break down the To-Do List app into smaller, manageable components:

  • App.js: The main component, responsible for managing the state (the list of tasks) and rendering the other components.
  • TodoForm.js: A component for the input field and the button to add new tasks.
  • TodoList.js: A component for displaying the list of tasks.
  • TodoItem.js: A component for rendering each individual task.

Let’s create these components within the `src` directory.

1. TodoForm.js

Create a file named `TodoForm.js` in the `src` directory. This component will handle the input field and the “Add” button.

import React, { useState } from 'react';

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

  const handleSubmit = e => {
    e.preventDefault();
    if (!value) return;
    addTodo(value);
    setValue('');
  }

  return (
    
       setValue(e.target.value)}
      />
      <button type="submit">Add</button>
    
  );
}

export default TodoForm;

Explanation:

  • Import React and useState: We import `useState` to manage the input field’s value.
  • useState hook: `value` stores the input field’s text, and `setValue` is used to update it. It’s initialized as an empty string.
  • handleSubmit function: This function is called when the form is submitted. It prevents the default form submission behavior (page refresh), calls the `addTodo` function (passed as a prop from `App.js`) to add the todo, and clears the input field.
  • onChange event: The `onChange` event listener updates the `value` state whenever the input field’s value changes.
  • addTodo prop: This prop is a function passed from the parent component (`App.js`) that adds a new todo item to the list.

2. TodoList.js

Create a file named `TodoList.js` in the `src` directory. This component will render the list of tasks.

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

function TodoList({ todos, toggleComplete, removeTodo }) {
  return (
    <ul>
      {todos.map(todo => (
        
      ))}
    </ul>
  );
}

export default TodoList;

Explanation:

  • Imports: Imports the `TodoItem` component.
  • Props: Receives `todos` (the array of todo items), `toggleComplete` (function to mark a task as complete), and `removeTodo` (function to remove a task) as props.
  • Map function: Iterates through the `todos` array and renders a `TodoItem` component for each todo.
  • Key prop: The `key` prop is essential for React to efficiently update the list. Use a unique identifier (like the `id` of each todo item).

3. TodoItem.js

Create a file named `TodoItem.js` in the `src` directory. This component will render each individual task.

import React from 'react';

function TodoItem({ todo, toggleComplete, removeTodo }) {
  return (
    <li style="{{">
       toggleComplete(todo.id)}
      />
      {todo.text}
      <button> removeTodo(todo.id)}>x</button>
    </li>
  );
}

export default TodoItem;

Explanation:

  • Props: Receives `todo` (the individual todo object), `toggleComplete` (function to mark a task as complete), and `removeTodo` (function to remove a task) as props.
  • Inline styling: Uses inline styling to apply a line-through to completed tasks.
  • Checkbox: A checkbox is used to indicate whether a task is completed. The `checked` attribute binds to `todo.completed`.
  • onChange event for the checkbox: Calls `toggleComplete` with the todo’s `id` when the checkbox is clicked.
  • Remove button: Calls `removeTodo` with the todo’s `id` when clicked.

4. App.js (Main Component)

Modify the `App.js` file in the `src` directory to manage the state and render the other components.

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

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

  useEffect(() => {
    const storedTodos = JSON.parse(localStorage.getItem('todos')) || [];
    setTodos(storedTodos);
  }, []);

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

  const addTodo = text => {
    const newTodo = { id: Math.random() * 1000, text: text, completed: false };
    setTodos([...todos, newTodo]);
  };

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

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

  return (
    <div>
      <h1>My To-Do List</h1>
      
      
    </div>
  );
}

export default App;

Explanation:

  • Import statements: Imports `useState`, `useEffect`, `TodoForm`, `TodoList`, and the `App.css` file.
  • useState hook: `todos` is the state variable that holds the array of todo items. It’s initialized as an empty array.
  • useEffect hook (load from localStorage): When the component mounts, this `useEffect` hook retrieves the todos from `localStorage` and sets them to the `todos` state. This ensures that the todos persist across page refreshes.
  • useEffect hook (save to localStorage): This `useEffect` hook saves the `todos` state to `localStorage` whenever the `todos` array changes. This ensures that the todos are saved when they are added, updated, or removed.
  • addTodo function: This function takes the text of a new todo item, creates a new todo object with a unique id, and adds it to the `todos` array using the spread operator (`…`).
  • toggleComplete function: This function takes the id of a todo item and toggles its `completed` status. It uses the `map` method to iterate through the `todos` array and update the corresponding todo item.
  • removeTodo function: This function takes the id of a todo item and removes it from the `todos` array using the `filter` method.
  • JSX structure: Renders the `TodoForm` and `TodoList` components, passing the necessary props to each.

5. App.css (Styling)

Create a file named `App.css` in the `src` directory to add some basic styling to your To-Do List app. Here’s a basic example:

.app {
  text-align: center;
  max-width: 500px;
  margin: 20px auto;
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 8px;
}

.input {
  padding: 10px;
  margin-right: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 16px;
}

button {
  padding: 10px 15px;
  background-color: #4CAF50;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
}

button:hover {
  background-color: #3e8e41;
}

ul {
  list-style: none;
  padding: 0;
}

li {
  padding: 10px;
  border-bottom: 1px solid #eee;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

li:last-child {
  border-bottom: none;
}

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

Integrating the Components

Now, let’s put all the pieces together in your `App.js` file.

Make sure your `App.js` looks like the code provided in the previous section. This file is the central hub, managing the state of your To-Do items and rendering the `TodoForm` and `TodoList` components.

Testing Your App

With all the components created and integrated, start your React development server using `npm start` in your terminal. Open your web browser and navigate to `http://localhost:3000`. You should now see your To-Do List app. Try adding tasks, marking them as complete, and deleting them. If everything is working correctly, you’ve successfully built your first React To-Do List app!

Common Mistakes and How to Fix Them

Here are some common mistakes beginners make when building React applications and how to avoid them:

  • Incorrect Import Paths: Double-check your import statements. Make sure the file paths are correct, especially when importing components from other files. For example, if you have a component in the same directory as your `App.js`, the import should be `./ComponentName`.
  • Immutability in State Updates: When updating the state, always treat it as immutable. Never directly modify the state. Instead, create a new array or object with the updated values. Use the spread operator (`…`) to copy existing data and then make your changes.
  • Missing Keys in Lists: When rendering lists of items using `map`, always provide a unique `key` prop to each element. This helps React efficiently update the list. If you don’t provide a key, React will throw a warning in the console.
  • Incorrect Event Handling: Ensure you’re passing the correct event handlers to your components. For example, use `onChange={handleChange}` for input fields and `onClick={handleClick}` for buttons.
  • Not Handling Form Submissions: If you have a form, make sure you handle the `onSubmit` event to prevent the page from refreshing. Use `e.preventDefault()` inside your submit handler.
  • Incorrect Prop Drilling: Avoid passing props through multiple levels of components when they are not needed by the intermediate components. Consider using Context API or a state management library like Redux or Zustand for more complex applications to manage state more efficiently.
  • Forgetting to Update State: Be sure to use the `setState` function provided by `useState` to update the state. Directly modifying the state variable won’t trigger a re-render.

Key Takeaways

  • Component-Based Architecture: React applications are built using components, which are reusable and independent pieces of UI.
  • State Management: State is the data that changes over time, and it’s managed using the `useState` hook.
  • Event Handling: React allows you to handle user interactions like clicks, form submissions, and input changes.
  • Props: Props are used to pass data from parent components to child components.
  • JSX: JSX is a syntax extension that allows you to write HTML-like code within your JavaScript.
  • Lifecycle Methods and Hooks: Learn about lifecycle methods and hooks like `useEffect` to manage component behavior.
  • Local Storage: Using `localStorage` to persist data, so that it is available even after the page is refreshed.

FAQ

Q: How do I deploy my React To-Do List app?

A: You can deploy your React app to platforms like Netlify, Vercel, or GitHub Pages. These platforms offer free hosting and easy deployment options. You’ll typically need to build your app using `npm run build` and then deploy the contents of the `build` directory.

Q: How can I add more features to my To-Do List app?

A: You can add features like:

  • Due dates
  • Priorities
  • Categories/tags
  • Filtering
  • Sorting
  • User authentication

Q: What are some good resources for learning React?

A: Some excellent resources include:

  • The official React documentation (react.dev)
  • React tutorial from freeCodeCamp (freeCodeCamp)
  • React courses on Udemy, Coursera, and other online learning platforms

Q: What are the benefits of using React?

A: React offers several benefits, including:

  • Component-based architecture
  • Reusable components
  • Virtual DOM for efficient updates
  • Large and active community
  • SEO-friendly

Q: Why is the `key` prop important when rendering lists?

A: The `key` prop helps React identify which items have changed, been added, or been removed. This allows React to efficiently update the DOM (Document Object Model) without re-rendering the entire list. Without a unique key, React might not update the list correctly, leading to performance issues and incorrect behavior.

Building a To-Do List app is just the beginning. The skills you’ve acquired—creating components, managing state, handling events, and understanding data rendering—form the foundation for building more complex and dynamic web applications. As you continue to explore React, you’ll discover more advanced concepts like state management libraries, routing, and testing. But remember, the key to mastering any technology is practice. Keep building, keep experimenting, and keep learning. The world of web development is constantly evolving, so embrace the journey of continuous learning and you’ll be well-equipped to create innovative and engaging user experiences.

More posts