{"id":7281,"date":"2025-06-25T23:32:40","date_gmt":"2025-06-25T23:32:39","guid":{"rendered":"https:\/\/namastedev.com\/blog\/?p=7281"},"modified":"2025-06-25T23:32:40","modified_gmt":"2025-06-25T23:32:39","slug":"build-a-todo-app-with-react-and-localstorage-6","status":"publish","type":"post","link":"https:\/\/namastedev.com\/blog\/build-a-todo-app-with-react-and-localstorage-6\/","title":{"rendered":"Build a Todo App with React and LocalStorage"},"content":{"rendered":"

Build a Todo App with React and LocalStorage<\/h1>\n

Are you looking to build your first React application and make it interactive? A Todo app is an excellent project for beginners to understand the essential concepts of React, including state management, component lifecycle, and local storage manipulation. In this blog post, we’ll guide you step-by-step on how to create a simple yet functional Todo app, where users can add, delete, and mark tasks as completed, all while utilizing LocalStorage to persist the data. Let’s dive in!<\/p>\n

What is React?<\/h2>\n

React is an open-source JavaScript library developed by Facebook for building user interfaces, especially for single-page applications. Its main goal is to simplify the process of building rich, interactive UIs by breaking them into smaller reusable components. It allows developers to create large web applications that can change data without reloading the page, providing a seamless user experience.<\/p>\n

What is LocalStorage?<\/h2>\n

LocalStorage is part of the Web Storage API that enables web applications to store data in the user’s browser. It allows for the storage of key-value pairs, with no expiration, making it a solid choice for managing application state that needs to persist across browser sessions. In our Todo app, we will use LocalStorage to save the list of tasks so that they remain available even after the page is refreshed.<\/p>\n

Setting Up Your React App<\/h2>\n

To get started, you’ll need a React development environment. If you haven’t already set up one, you can do so with Create React App, a convenient CLI tool.<\/p>\n

npx create-react-app my-todo-app\ncd my-todo-app\nnpm start\n<\/code><\/pre>\n
This will create a new directory called my-todo-app<\/strong> and start a local development server. Open your browser and navigate to http:\/\/localhost:3000<\/strong> to see your newly created React app in action!<\/p>\n
Project Structure<\/h2>\n
Your project should have a simple structure. For our Todo app, we’ll primarily work with src\/App.js<\/strong>. You can also create a new file called src\/Todo.js<\/strong> to keep the Todo component separate for better organization.<\/p>\n
Creating the Todo Component<\/h2>\n
Let\u2019s create a basic Todo component that allows us to add tasks. In Todo.js<\/strong>, we’re going to define a functional component that includes an input field for adding tasks and a button to submit them.<\/p>\n
import React, { useState, useEffect } from 'react';\n\nconst Todo = () => {\n    const [task, setTask] = useState('');\n    const [todos, setTodos] = useState([]);\n\n    useEffect(() => {\n        const storedTodos = JSON.parse(localStorage.getItem('todos'));\n        if (storedTodos) {\n            setTodos(storedTodos);\n        }\n    }, []);\n\n    useEffect(() => {\n        localStorage.setItem('todos', JSON.stringify(todos));\n    }, [todos]);\n\n    const handleSubmit = (e) => {\n        e.preventDefault();\n        if (!task) return;\n        setTodos([...todos, { text: task, isCompleted: false }]);\n        setTask('');\n    };\n\n    const handleDelete = (index) => {\n        const newTodos = todos.filter((_, i) => i !== index);\n        setTodos(newTodos);\n    };\n\n    const handleComplete = (index) => {\n        const newTodos = todos.map((todo, i) =>\n            i === index ? { ...todo, isCompleted: !todo.isCompleted } : todo\n        );\n        setTodos(newTodos);\n    };\n\n    return (\n        
\n            
Todo List<\/h2>\n            \n                 setTask(e.target.value)}\n                    placeholder=\"Enter a new task\"\n                \/>\n