Build a Todo App with React and Local Storage

In the realm of web development, few projects are as classic and informative as building a Todo app. It serves as a great starting point for beginners and offers insightful learning opportunities for more experienced developers. In this article, we’ll create a simple yet functional Todo application using React and Local Storage.

Table of Contents

• Prerequisites
• Setting Up the Project
• Creating the Todo Component
• Managing State with Hooks
• Storing Todos in Local Storage
• Styling Your App
• Running the Application
• Conclusion

Prerequisites

Before diving into coding, ensure you have the following:

• Node.js: Make sure that you have Node.js installed on your machine. You can download it from nodejs.org.
• Basic Knowledge of JavaScript: Familiarity with ES6 syntax, React components, and hooks will be beneficial.
• Code Editor: Use a code editor of your preference, such as Visual Studio Code, Atom, or Sublime Text.

Setting Up the Project

Let’s kick things off by setting up our React application. Open your terminal and run the following commands:

npx create-react-app todo-app
cd todo-app
npm start

Once your development server is up and running, you should see your default React homepage at http://localhost:3000/.

Creating the Todo Component

Start by creating a file named Todo.js in the src folder. This component will represent individual Todo items. Add the following code to Todo.js:

import React from 'react';

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

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

export default Todo;

This component displays the text of a Todo and includes a button to delete it.

Managing State with Hooks

Now, let’s manage the state of our Todo app using React Hooks. In the App.js file, import the necessary hooks and initialize your state:

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

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

  const addTodo = () => {
    if (input.trim().length === 0) return;
    const newTodo = { id: Date.now(), text: input };
    setTodos([...todos, newTodo]);
    setInput('');
  };

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

  return (
    

      
Todo App
       setInput(e.target.value)} 
        placeholder="Add a new todo" 
      />
      Add Todo
      {todos.map((todo) => (
        
      ))}
    
  );
};

export default App;

In the code snippet above, we’ve created two state variables: todos, which holds our Todo items, and input, which captures the user’s input for new Todos. The addTodo and deleteTodo functions help in managing the Todos effectively.

Storing Todos in Local Storage

One of the exciting features of our Todo app is its ability to persist Todos even after refreshing the page, thanks to Local Storage. We can achieve this by using the useEffect hook.

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

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

Add the above two useEffect hooks to the App component. The first useEffect checks for existing Todos in Local Storage when the app loads, while the second one updates Local Storage whenever the todos state changes.

Styling Your App

Although functionality is crucial, aesthetics matter too. You can add some basic CSS styles in App.css to make your Todo app visually appealing:

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

.app {
  max-width: 500px;
  margin: auto;
  padding: 20px;
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

input {
  width: 70%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  margin-right: 10px;
}

button {
  padding: 10px 15px;
  background-color: #28a745;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

button:hover {
  background-color: #218838;
}

.todo {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 10px 0;
}

These styles will enhance your Todo app’s appearance, making it more user-friendly.

Running the Application

Now that we’ve set everything up, let’s run the application and see it in action. Make sure your development server is still running. If not, you can start it again with:

npm start

Visit http://localhost:3000/ in your browser, and you should see your Todo app. You can add, delete, and even see your Todos persist after refreshing the page!

Conclusion

Congratulations! You’ve just built a simple yet functional Todo app using React and Local Storage. This project not only solidifies your understanding of React but also introduces you to the concept of managing data in a way that persists across sessions. Feel free to extend this project by adding features like editing Todos, marking them as completed, or even categorizing them.

Building projects like this is an excellent way to sharpen your development skills, so keep experimenting and happy coding!