Build a Simple React JS Interactive Web-Based To-Do List with Local Storage: A Beginner’s Guide

Written by

javascriptdebugged

in

In the world of web development, managing tasks effectively is a fundamental need. Whether it’s organizing your daily schedule, tracking project deadlines, or simply keeping track of groceries, a well-designed to-do list app can be a lifesaver. This tutorial will guide you, step-by-step, through building a simple, interactive to-do list application using React JS. We’ll cover everything from setting up your development environment to implementing features like adding, deleting, and marking tasks as complete, all while storing your data locally so it persists even when you refresh the page. This project is perfect for beginners and intermediate developers looking to solidify their React skills and understand how to interact with local storage.

Why Build a To-Do List App?

Creating a to-do list app isn’t just a fun exercise; it’s a practical way to learn and practice essential React concepts. You’ll gain hands-on experience with:

  • Components: Learn how to break down your application into reusable, manageable pieces.
  • State Management: Understand how to manage and update data within your components.
  • Event Handling: Master how to respond to user interactions, such as button clicks and form submissions.
  • Lists and Rendering: Practice rendering dynamic lists of data.
  • Local Storage: Discover how to save and retrieve data in the user’s browser, making your app persistent.

This project provides a solid foundation for more complex React applications. The skills you’ll learn here are transferable and will be invaluable as you continue your journey in web development.

Prerequisites

Before we begin, make sure you have the following:

  • Node.js and npm (or yarn) installed: These are essential for managing project dependencies and running your React application. You can download them from nodejs.org.
  • A basic understanding of HTML, CSS, and JavaScript: While this tutorial is geared towards beginners, some familiarity with these technologies will be helpful.
  • A code editor: Choose your favorite code editor (VS Code, Sublime Text, Atom, etc.) to write your code.

Setting Up Your React Project

Let’s get started by creating a new React project using Create React App. Open your terminal or command prompt and run the following command:

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

This command creates a new directory called todo-app, sets up a basic React project structure, and installs all the necessary dependencies. Navigate into the todo-app directory using the cd command.

Now, let’s start the development server:

npm start

This command will launch your app in your default web browser, usually at http://localhost:3000. You should see the default React welcome screen.

Project Structure

Before we start coding, let’s familiarize ourselves with the project structure. The key files we’ll be working with are:

  • src/App.js: This is the main component of our application. We’ll write most of our code here.
  • src/App.css: This is where we’ll add our CSS styles.
  • src/index.js: This is the entry point of our application.

Building the To-Do List Components

Our to-do list app will consist of a few key components:

  • App.js: The main container.
  • TodoInput.js: A component for adding new tasks.
  • TodoList.js: A component to display the list of tasks.
  • TodoItem.js: A component for each individual task.

Let’s start by modifying src/App.js. Open this file in your code editor and replace the existing code with the following:

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

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

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

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

  const addTodo = (text) => {
    const newTodo = { id: Date.now(), 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>
      <h1>To-Do List</h1>
      
      
    </div>
  );
}

function TodoInput({ 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>
    
  );
}

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

function TodoItem({ todo, toggleComplete, deleteTodo }) {
  return (
    <li>
       toggleComplete(todo.id)}
      />
      <span>{todo.text}</span>
      <button> deleteTodo(todo.id)}>Delete</button>
    </li>
  );
}

export default App;

Let’s break down this code:

  • Import statements: We import React, useState and useEffect hooks.
  • App component: This is the main component that holds all other components.
  • useState hook: We use useState to manage the todos state, which is an array of todo objects.
  • useEffect hook (Load from local storage): When the component mounts, we load todos from local storage using useEffect. The `JSON.parse(localStorage.getItem(‘todos’)) || []` part attempts to retrieve the ‘todos’ item from local storage and parses it as JSON. If nothing is found (i.e., local storage is empty or the key doesn’t exist), it defaults to an empty array.
  • useEffect hook (Save to local storage): We use another useEffect hook to save the todos array to local storage whenever it changes. The JSON.stringify(todos) converts the array into a JSON string before storing it. The second argument, `[todos]`, is a dependency array; the effect runs again whenever the `todos` state changes.
  • addTodo function: This function adds a new todo item to the todos array.
  • toggleComplete function: This function toggles the completion status of a todo item.
  • deleteTodo function: This function removes a todo item from the todos array.
  • TodoInput component: Handles user input for new tasks.
  • TodoList component: Renders the list of todo items.
  • TodoItem component: Renders each individual todo item with a checkbox and delete button.

Next, let’s add some basic styling to src/App.css. Replace the contents of src/App.css with the following:

.app {
  text-align: center;
  font-family: sans-serif;
  margin: 20px;
}

h1 {
  margin-bottom: 20px;
}

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

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

button:hover {
  background-color: #0056b3;
}

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

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

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

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

Step-by-Step Implementation

Let’s walk through the key steps involved in building our to-do list app:

1. Setting Up the State

As mentioned earlier, we use the useState hook to manage our todos state. This state holds an array of todo objects. Each todo object has the following properties:

  • id: A unique identifier for the todo item.
  • text: The text of the todo item.
  • completed: A boolean value indicating whether the todo item is complete.

The initial state of todos is an empty array: const [todos, setTodos] = useState([]);

2. Adding New Tasks

The TodoInput component handles adding new tasks. It contains an input field and an ‘Add’ button. When the user types in the input field and clicks the ‘Add’ button, the handleSubmit function is called. This function does the following:

  • Prevents the default form submission behavior.
  • If the input field is empty, it does nothing.
  • Calls the addTodo function (passed as a prop from the App component) with the text from the input field.
  • Clears the input field.

The addTodo function in the App component creates a new todo object with a unique ID (using Date.now()), the text from the input field, and a completed status of false. It then updates the todos state by adding the new todo object to the array.

3. Displaying the Tasks

The TodoList component is responsible for displaying the list of tasks. It receives the todos array as a prop and renders a list of TodoItem components. It uses the .map() method to iterate over the todos array and create a TodoItem component for each todo object.

The TodoItem component displays each individual task. It includes a checkbox, the task text, and a delete button. The checkbox’s checked attribute is bound to the completed property of the todo object. The task text is styled with a line-through if the completed property is true.

4. Marking Tasks as Complete

When the user clicks the checkbox, the toggleComplete function (passed as a prop from the App component) is called. This function updates the todos state by mapping over the array and toggling the completed property of the corresponding todo object based on its ID.

5. Deleting Tasks

When the user clicks the delete button, the deleteTodo function (passed as a prop from the App component) is called. This function updates the todos state by filtering out the todo object with the matching ID, effectively removing it from the array.

6. Local Storage Integration

We use the useEffect hook to persist the to-do list data in the user’s browser using local storage.

  • Loading Data: The first useEffect hook, with an empty dependency array ([]), runs when the component mounts. It attempts to load the todos from local storage. If there are any todos stored, they are retrieved and set to the `todos` state. If local storage is empty, an empty array is used.
  • Saving Data: The second useEffect hook runs whenever the todos state changes. It uses JSON.stringify() to convert the todos array into a JSON string and saves it to local storage. This ensures that the to-do list data persists even if the user refreshes the page or closes the browser. The dependency array [todos] ensures that this effect runs whenever the `todos` state changes.

Common Mistakes and How to Fix Them

Here are some common mistakes and how to avoid or fix them:

  • Incorrect State Updates: Make sure you’re correctly updating the state using the setTodos function. Incorrect state updates can lead to unexpected behavior and bugs. Always create a new array or object when updating state to trigger a re-render.
  • Forgetting to Handle Empty Input: In the TodoInput component, ensure you handle the case where the user submits an empty input. This can be done by checking if the input value is empty before calling the addTodo function.
  • Incorrect Key Prop: When rendering a list of items, always provide a unique key prop to each item. This helps React efficiently update the DOM. In our example, we use the id of the todo item as the key.
  • Not Using Local Storage Correctly: Make sure you’re correctly saving and retrieving data from local storage. Remember to stringify the data before saving it and parse it when retrieving it. Also, handle cases where local storage might be empty or unavailable.
  • Not Updating State Properly: When updating the state based on the previous state, it’s best to use a function in the setTodos call to ensure you’re working with the latest state. For example, instead of setTodos([...todos, newTodo]), you could use setTodos(prevTodos => [...prevTodos, newTodo]).

Enhancements and Next Steps

Once you’ve built the basic to-do list app, here are some ideas for enhancements:

  • Add Editing Functionality: Allow users to edit the text of existing tasks.
  • Implement Filtering: Add filters to show all tasks, completed tasks, or incomplete tasks.
  • Add Drag-and-Drop Reordering: Allow users to reorder the tasks by dragging and dropping them.
  • Implement Due Dates: Add the ability to set due dates for each task.
  • Add Persistence Beyond Local Storage: Explore storing the data in a backend database for more robust and accessible data.
  • Improve Styling: Customize the look and feel of your app to make it more visually appealing.
  • Add Error Handling: Implement error handling to gracefully handle any potential issues, such as errors when interacting with local storage.

Summary / Key Takeaways

In this tutorial, you’ve learned how to build a simple, interactive to-do list app with React JS, incorporating features like adding, deleting, and marking tasks as complete, all while leveraging local storage for data persistence. You’ve also gained hands-on experience with key React concepts like components, state management, event handling, and rendering lists. By understanding these concepts, you’ve built a foundation for creating more complex and dynamic web applications. Remember to always prioritize clear code organization, handle user input effectively, and consider how you can expand your app’s functionality to meet your needs. By following the steps outlined in this tutorial and experimenting with the enhancements, you can significantly improve your React skills and build more sophisticated web applications. The combination of component-based architecture, state management with hooks, and local storage provides a powerful and practical framework for creating applications that are both user-friendly and retain data effectively. This project serves as an excellent starting point for exploring the power and flexibility of React JS.

FAQ

Q: Why is it important to use a unique key prop when rendering lists in React?

A: React uses the key prop to efficiently update the DOM when the list changes. Without unique keys, React might not update the DOM correctly, leading to unexpected behavior or performance issues. The key helps React identify which items have changed, been added, or been removed.

Q: What is the difference between useState and useEffect hooks?

A: useState is used to manage the state of a component. It allows you to create state variables and update them using the set... function. useEffect is used to handle side effects in functional components, such as fetching data from an API, updating the DOM, or interacting with local storage. It runs after every render (or after specific dependencies change).

Q: How can I debug my React application?

A: You can use your browser’s developer tools (usually accessed by right-clicking on the page and selecting “Inspect” or “Inspect Element”). The “Console” tab displays any errors or warnings, and the “Elements” tab allows you to inspect the HTML structure of your app. You can also use browser extensions like React Developer Tools to inspect React components and their props and state.

Q: How do I deploy my React app?

A: There are several ways to deploy your React app. One common method is to use a platform like Netlify or Vercel, which provides easy deployment and hosting for static websites and single-page applications. You can also deploy your app to a web server of your choice. To deploy, you typically need to build your app using npm run build, which creates a production-ready version of your code.

This project is a stepping stone. By understanding the core principles demonstrated in this to-do list application, you’re well-equipped to tackle more complex React projects. The ability to manipulate the DOM, manage state, and interact with user input, combined with the persistence provided by local storage, forms a powerful toolkit for creating a wide variety of web applications. The key is to practice, experiment, and continually build upon your knowledge. As you continue to learn and build, you’ll find that your ability to create dynamic and engaging web experiences will grow exponentially.

More posts