{"id":7516,"date":"2025-07-03T07:32:31","date_gmt":"2025-07-03T07:32:30","guid":{"rendered":"https:\/\/namastedev.com\/blog\/?p=7516"},"modified":"2025-07-03T07:32:31","modified_gmt":"2025-07-03T07:32:30","slug":"build-a-todo-app-with-react-and-localstorage-7","status":"publish","type":"post","link":"https:\/\/namastedev.com\/blog\/build-a-todo-app-with-react-and-localstorage-7\/","title":{"rendered":"Build a Todo App with React and LocalStorage"},"content":{"rendered":"<h1>Build a Todo App with React and LocalStorage<\/h1>\n<p>React has become one of the most popular libraries for building user interfaces. In this tutorial, we&#8217;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\u2019s dive in!<\/p>\n<h2>Table of Contents<\/h2>\n<ul>\n<li><a href=\"#prerequisites\">Prerequisites<\/a><\/li>\n<li><a href=\"#setting-up-the-project\">Setting Up the Project<\/a><\/li>\n<li><a href=\"#building-the-todo-app\">Building the Todo App<\/a><\/li>\n<li><a href=\"#using-localstorage\">Using LocalStorage<\/a><\/li>\n<li><a href=\"#styling-the-application\">Styling the Application<\/a><\/li>\n<li><a href=\"#conclusion\">Conclusion<\/a><\/li>\n<\/ul>\n<h2 id=\"prerequisites\">Prerequisites<\/h2>\n<p>To follow along with this tutorial, you should have:<\/p>\n<ul>\n<li>A basic understanding of JavaScript and React.<\/li>\n<li>Node.js and npm installed on your machine.<\/li>\n<li>A code editor (like Visual Studio Code) to write your code.<\/li>\n<\/ul>\n<h2 id=\"setting-up-the-project\">Setting Up the Project<\/h2>\n<p>To start, let\u2019s create a new React application using Create React App. Open your terminal and run the following command:<\/p>\n<pre><code>npx create-react-app todo-app<\/code><\/pre>\n<p>Once the setup completes, navigate to the project directory:<\/p>\n<pre><code>cd todo-app<\/code><\/pre>\n<p>Now you can start the development server:<\/p>\n<pre><code>npm start<\/code><\/pre>\n<p>Your default browser will open, displaying a default React app. Let\u2019s modify this to create our Todo app.<\/p>\n<h2 id=\"building-the-todo-app\">Building the Todo App<\/h2>\n<p>In this section, we\u2019ll build the core components of our Todo app, which includes the following:<\/p>\n<ul>\n<li>A list to display our todos<\/li>\n<li>An input field to add new todos<\/li>\n<li>Buttons to mark todos as completed or delete them<\/li>\n<\/ul>\n<h3>Creating the Todo Component<\/h3>\n<p>First, create a new file named <strong>Todo.js<\/strong> in the <strong>src<\/strong> directory:<\/p>\n<pre><code>touch src\/Todo.js<\/code><\/pre>\n<p>Now, write the following code in <strong>Todo.js<\/strong>:<\/p>\n<pre><code>import React from 'react';\n\nconst Todo = ({ todo, onDelete, onToggle }) =&gt; {\n    return (\n        <div style=\"{{\">\n            <span style=\"{{\">{todo.text}<\/span>\n            <div>\n                <button>Toggle<\/button>\n                <button>Delete<\/button>\n            <\/div>\n        <\/div>\n    );\n};\n\nexport default Todo;<\/code><\/pre>\n<h3>Creating the Main App Component<\/h3>\n<p>Next, let&#8217;s modify the <strong>App.js<\/strong> file in the <strong>src<\/strong> directory to integrate our <strong>Todo<\/strong> component:<\/p>\n<pre><code>import React, { useState, useEffect } from 'react';\nimport Todo from '.\/Todo';\n\nconst App = () =&gt; {\n    const [todos, setTodos] = useState([]);\n    const [inputValue, setInputValue] = useState('');\n\n    const addTodo = () =&gt; {\n        if (inputValue) {\n            setTodos([...todos, { text: inputValue, completed: false }]);\n            setInputValue('');\n        }\n    };\n\n    const toggleTodo = index =&gt; {\n        const newTodos = [...todos];\n        newTodos[index].completed = !newTodos[index].completed;\n        setTodos(newTodos);\n    };\n\n    const deleteTodo = index =&gt; {\n        const newTodos = todos.filter((_, i) =&gt; i !== index);\n        setTodos(newTodos);\n    };\n\n    return (\n        <div style=\"{{\">\n            <h1>Todo App<\/h1>\n             setInputValue(e.target.value)}\n                placeholder=\"Add a new todo\"\n            \/&gt;\n            <button>Add Todo<\/button>\n            <div>\n                {todos.map((todo, index) =&gt; (\n                     deleteTodo(index)} \n                        onToggle={() =&gt; toggleTodo(index)} \n                    \/&gt;\n                ))}\n            <\/div>\n        <\/div>\n    );\n};\n\nexport default App;<\/code><\/pre>\n<h2 id=\"using-localstorage\">Using LocalStorage<\/h2>\n<p>Now that our app is functional, let\u2019s 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 <strong>useEffect<\/strong> hook.<\/p>\n<pre><code>useEffect(() =&gt; {\n    const storedTodos = JSON.parse(localStorage.getItem('todos'));\n    if (storedTodos) {\n        setTodos(storedTodos);\n    }\n}, []);\n\nuseEffect(() =&gt; {\n    localStorage.setItem('todos', JSON.stringify(todos));\n}, [todos]);<\/code><\/pre>\n<p>Add these hooks to your <strong>App.js<\/strong> component. The first <strong>useEffect<\/strong> retrieves the stored todos on component mount, while the second one updates LocalStorage whenever the todos change.<\/p>\n<h2 id=\"styling-the-application\">Styling the Application<\/h2>\n<p>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 <strong>App.css<\/strong> and import it into <strong>App.js<\/strong>:<\/p>\n<pre><code>import '.\/App.css';<\/code><\/pre>\n<p>Within <strong>App.css<\/strong>, you might want to add styles like these:<\/p>\n<pre><code>body {\n    font-family: Arial, sans-serif;\n    background-color: #f4f4f4;\n}\n\ndiv {\n    max-width: 600px;\n    margin: auto;\n    padding: 20px;\n    background: white;\n    border-radius: 5px;\n    box-shadow: 0 0 10px rgba(0,0,0,0.1);\n}\n\nbutton {\n    margin-left: 10px;\n    cursor: pointer;\n}<\/code><\/pre>\n<p>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.<\/p>\n<h2 id=\"conclusion\">Conclusion<\/h2>\n<p>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.<\/p>\n<p>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!<\/p>\n<p>If you found this guide helpful, feel free to share it with your fellow developers, and don\u2019t forget to leave your feedback in the comments below!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>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&#8217;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,<\/p>\n","protected":false},"author":98,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"om_disable_all_campaigns":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[398],"tags":[224],"class_list":{"0":"post-7516","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-react","7":"tag-react"},"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/namastedev.com\/blog\/wp-json\/wp\/v2\/posts\/7516","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/namastedev.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/namastedev.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/namastedev.com\/blog\/wp-json\/wp\/v2\/users\/98"}],"replies":[{"embeddable":true,"href":"https:\/\/namastedev.com\/blog\/wp-json\/wp\/v2\/comments?post=7516"}],"version-history":[{"count":1,"href":"https:\/\/namastedev.com\/blog\/wp-json\/wp\/v2\/posts\/7516\/revisions"}],"predecessor-version":[{"id":7517,"href":"https:\/\/namastedev.com\/blog\/wp-json\/wp\/v2\/posts\/7516\/revisions\/7517"}],"wp:attachment":[{"href":"https:\/\/namastedev.com\/blog\/wp-json\/wp\/v2\/media?parent=7516"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/namastedev.com\/blog\/wp-json\/wp\/v2\/categories?post=7516"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/namastedev.com\/blog\/wp-json\/wp\/v2\/tags?post=7516"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}