Build a Todo App with React and LocalStorage

Are you looking to enhance your React skills while building a practical application? A Todo App is an excellent project for both beginners and intermediate developers. In this article, we will walk through the process of creating a simple Todo application using React, while also utilizing the LocalStorage feature of the web browser to persist your data. Let’s get started!

Why Build a Todo App?

Todo apps are not just simple projects; they are integral to understanding fundamental concepts in web development, such as:

• State Management: Learn how to manage the application state.
• User Interface Design: Get hands-on experience in designing user interfaces.
• Data Persistence: Understand how to store and retrieve data from a web browser.

Prerequisites

Before we dive into coding, ensure you have the following prerequisites:

• Node.js: Make sure you have Node.js installed on your machine.
• Basic Understanding of React: Familiarity with React concepts like components and hooks.
• Code Editor: A good code editor like VSCode or Atom.

Setting Up Your Environment

First, let’s set up a new React application. You can do this by running the following command in your terminal:

npx create-react-app todo-app

Once your application is created, navigate into the directory:

cd todo-app

Now, you can start the development server:

npm start

Your application should now be running at http://localhost:3000.

Creating the Todo Application

Let’s get into coding! We’ll create a simple Todo application that allows users to add, remove, and view their tasks.

Project Structure

The structure of our project will be as follows:

todo-app/
├── src/
│   ├── components/
│   │   ├── Todo.js
│   │   └── TodoList.js
│   ├── App.js
│   └── index.js

Create a folder named components inside the src directory and then create two files: Todo.js and TodoList.js.

Building the Todo Component

Let’s start by creating our Todo component. This component will represent a single task in our application.

import React from 'react';

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

            {todo.text}
             onDelete(todo.id)}>Delete
        
    );
};

export default Todo;

Building the TodoList Component

Next, we’ll create the TodoList component that will handle the list of todos.

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

const TodoList = ({ todos, onDelete }) => {
    return (
        

            {todos.map(todo => (
                
            ))}
        
    );
};

export default TodoList;

Updating the App Component

The App component will manage our state and handle all the logic for adding and removing todos.

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

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

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

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

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

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

    return (
        

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

export default App;

Styling the Application

You can add styles directly in your components or create a separate CSS file for this. For simplicity, let’s add some inline styles. You can customize these to fit your design preference.

Testing Your Application

Now that you have everything set up, go back to your browser and test the application! You should be able to add todos, remove them, and see the list persist even after refreshing the page.

Enhancing Your Todo App

Once you have the basic functionality working, consider enhancing your app with the following features:

• Edit Todos: Allow users to edit existing todos.
• Mark as Complete: Add a feature to mark todos as complete.
• Filter and Sort: Enable users to filter active/completed todos and sort them as needed.

Implementing these features can help you further your React skills and provide a better user experience.

Conclusion

In this article, we built a functional Todo application utilizing React and LocalStorage for persistent data storage. This project not only helps you understand the basics of React but also introduces you to state management and web storage concepts.

Feel free to expand on this project by integrating additional features, or consider deploying your application using platforms like Netlify or Vercel for others to see!

Additional Resources

For more information and resources on React, check out the following:

• Official React Documentation
• CSS-Tricks: React Todo App Example
• MDN Web Storage API

Happy coding!