Build a Todo App with React and LocalStorage

React has become one of the most popular libraries for building user interfaces. In this tutorial, we’re going to create a simple Todo application that utilizes LocalStorage to persist data across sessions. This step-by-step guide will provide you with a solid foundation in both React and LocalStorage, allowing you to store user data effortlessly. Let’s dive in!

Table of Contents

• Prerequisites
• Setting Up the Project
• Building the Todo App
• Using LocalStorage
• Styling the Application
• Conclusion

Prerequisites

To follow along with this tutorial, you should have:

• A basic understanding of JavaScript and React.
• Node.js and npm installed on your machine.
• A code editor (like Visual Studio Code) to write your code.

Setting Up the Project

To start, let’s create a new React application using Create React App. Open your terminal and run the following command:

npx create-react-app todo-app

Once the setup completes, navigate to the project directory:

cd todo-app

Now you can start the development server:

npm start

Your default browser will open, displaying a default React app. Let’s modify this to create our Todo app.

Building the Todo App

In this section, we’ll build the core components of our Todo app, which includes the following:

• A list to display our todos
• An input field to add new todos
• Buttons to mark todos as completed or delete them

Creating the Todo Component

First, create a new file named Todo.js in the src directory:

touch src/Todo.js

Now, write the following code in Todo.js:

import React from 'react';

const Todo = ({ todo, onDelete, onToggle }) => {
    return (
        

            {todo.text}
            

                Toggle
                Delete
            
        
    );
};

export default Todo;

Creating the Main App Component

Next, let’s modify the App.js file in the src directory to integrate our Todo component:

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

const App = () => {
    const [todos, setTodos] = useState([]);
    const [inputValue, setInputValue] = useState('');

    const addTodo = () => {
        if (inputValue) {
            setTodos([...todos, { text: inputValue, completed: false }]);
            setInputValue('');
        }
    };

    const toggleTodo = index => {
        const newTodos = [...todos];
        newTodos[index].completed = !newTodos[index].completed;
        setTodos(newTodos);
    };

    const deleteTodo = index => {
        const newTodos = todos.filter((_, i) => i !== index);
        setTodos(newTodos);
    };

    return (
        

            
Todo App
             setInputValue(e.target.value)}
                placeholder="Add a new todo"
            />
            Add Todo
            

                {todos.map((todo, index) => (
                     deleteTodo(index)} 
                        onToggle={() => toggleTodo(index)} 
                    />
                ))}
            
        
    );
};

export default App;

Using LocalStorage

Now that our app is functional, let’s make it persistent using LocalStorage. This way, the todos will still be there when users refresh the page. We can achieve this by employing the useEffect hook.

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

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

Add these hooks to your App.js component. The first useEffect retrieves the stored todos on component mount, while the second one updates LocalStorage whenever the todos change.

Styling the Application

Simple inline styles have been applied for a basic layout, but you can take this a step further by creating a CSS file. Create a file named App.css and import it into App.js:

import './App.css';

Within App.css, you might want to add styles like these:

body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
}

div {
    max-width: 600px;
    margin: auto;
    padding: 20px;
    background: white;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

button {
    margin-left: 10px;
    cursor: pointer;
}

By adding these styles, your Todo app will have a much cleaner look and feel. You can customize colors, fonts, and layout further to match your preferences.

Conclusion

Congratulations! You have successfully built a Todo application using React and LocalStorage. This project demonstrates the core capabilities of React along with the power of LocalStorage for managing state persistently. You can expand this tutorial by adding features like edit functionality, categories, or even integrating an external backend for a more complex application.

Learning is an ongoing journey, and building projects like this is a great way to solidify your understanding of JavaScript, React, and web development in general. Happy coding!

If you found this guide helpful, feel free to share it with your fellow developers, and don’t forget to leave your feedback in the comments below!