Build a Todo App with React and LocalStorage

Creating a Todo app is a classic project for developers to get familiar with various web technologies, especially React. In this tutorial, we’ll guide you through building a simple yet powerful Todo app using React and managing application state with LocalStorage. The integration of LocalStorage will allow our app to persist tasks even when the browser is refreshed. Let’s dive in!

What You Will Learn

• How to set up a React application
• Understanding component structure in React
• Managing state with hooks
• Utilizing LocalStorage for data persistence
• Basic styling to enhance the UI

Prerequisites

This tutorial assumes that you have a basic understanding of JavaScript, React, and familiarity with HTML/CSS. Make sure you have Node.js installed on your system to run the React application.

Setting Up the React Application

To kick things off, we need to set up a new React application. You can easily do this using Create React App, a command-line tool that sets up a new React project with sensible defaults.

npx create-react-app todo-app

Navigate into your project directory:

cd todo-app

Now, start the development server:

npm start

Your browser should automatically open and display the default React application.

Creating the Todo App Structure

Next, let’s build the structure of our Todo app. We will create a few components: TodoList, TodoItem, and AddTodo.

1. TodoList Component

Create a new file named TodoList.js in the src directory. This component will be responsible for displaying the list of Todo items.

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

const TodoList = ({ todos, deleteTodo }) => {
    return (
        <ul>
            {todos.map((todo, index) => (
                <TodoItem key={index} todo={todo} deleteTodo={deleteTodo} />
            ))}
        </ul>
    );
};

export default TodoList;

2. TodoItem Component

Create another file named TodoItem.js. This component will represent each individual Todo task.

import React from 'react';

const TodoItem = ({ todo, deleteTodo }) => {
    return (
        <li>
            {todo}
            <button onClick={deleteTodo}>Delete</button>
        </li>
    );
};

export default TodoItem;

3. AddTodo Component

Create a file named AddTodo.js. This component will include a form to add new Todos.

import React, { useState } from 'react';

const AddTodo = ({ addTodo }) => {
    const [value, setValue] = useState('');

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

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

export default AddTodo;

Managing State with Hooks

Now that we have the components set up, let’s manage the state of our Todo app in the App.js file.

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

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

    const addTodo = (todo) => {
        setTodos([...todos, todo]);
    };

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

    // Use effect to fetch todos from LocalStorage
    useEffect(() => {
        const storedTodos = JSON.parse(localStorage.getItem('todos'));
        if (storedTodos) {
            setTodos(storedTodos);
        }
    }, []);

    // Use effect to update LocalStorage whenever the todos array changes
    useEffect(() => {
        localStorage.setItem('todos', JSON.stringify(todos));
    }, [todos]);

    return (
        <div>
            <h1>My Todo List</h1>
            <AddTodo addTodo={addTodo} />
            <TodoList todos={todos} deleteTodo={deleteTodo} />
        </div>
    );
};

export default App;

Styling the Todo App

Let’s add some basic styles to make our Todo app look more appealing. You can create a styles.css file in the src directory and import it into your index.js file.

/* styles.css */
body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
}

h1 {
    text-align: center;
    color: #333;
}

form {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
}

input {
    padding: 10px;
    border: none;
    border-radius: 5px;
    margin-right: 10px;
}

button {
    padding: 10px;
    border: none;
    border-radius: 5px;
    background-color: #5cb85c;
    color: white;
    cursor: pointer;
}

button:hover {
    background-color: #4cae4c;
}

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

li {
    background: white;
    margin: 5px;
    padding: 10px;
    border-radius: 5px;
    display: flex;
    justify-content: space-between;
}

Conclusion

You’ve successfully built a functional Todo app using React and LocalStorage! This simple project demonstrates core React concepts such as state management and component-based architecture while also showcasing how to persist data across sessions using LocalStorage.

From here, consider enhancing your app by adding features like editing todos, marking them as complete, or even integrating a backend API for storage. Happy coding!

Further Reading

• React Documentation
• MDN Web Docs: localStorage
• Introduction to Hooks in React