{"id":5960,"date":"2025-05-23T15:32:29","date_gmt":"2025-05-23T15:32:29","guid":{"rendered":"https:\/\/namastedev.com\/blog\/?p=5960"},"modified":"2025-05-23T15:32:29","modified_gmt":"2025-05-23T15:32:29","slug":"build-a-todo-app-with-react-and-localstorage","status":"publish","type":"post","link":"https:\/\/namastedev.com\/blog\/build-a-todo-app-with-react-and-localstorage\/","title":{"rendered":"Build a Todo App with React and LocalStorage"},"content":{"rendered":"<h1>Build a Todo App with React and LocalStorage<\/h1>\n<p>Building a Todo application is a common project for developers looking to enhance their skills with React. It\u2019s not just a great way to learn the core principles of React, but also an excellent opportunity to integrate browser storage using <strong>LocalStorage<\/strong>. In this tutorial, we\u2019ll walk step-by-step through the process of creating a fully functional Todo app where tasks can be added, completed, and persisted using LocalStorage.<\/p>\n<h2>What You Will Learn<\/h2>\n<ul>\n<li>Setting up your React environment<\/li>\n<li>Creating components for your Todo app<\/li>\n<li>Managing state with hooks<\/li>\n<li>Utilizing LocalStorage to persist data<\/li>\n<li>Styling your application<\/li>\n<\/ul>\n<h2>Prerequisites<\/h2>\n<p>Before we dive in, ensure you have:<\/p>\n<ul>\n<li>Basic knowledge of JavaScript and React<\/li>\n<li>Node.js and npm installed on your computer<\/li>\n<\/ul>\n<h2>Setting Up Your React Environment<\/h2>\n<p>Start by creating a new React application using Create React App. Open your terminal and run the following commands:<\/p>\n<pre><code>npx create-react-app todo-app<\/code><\/pre>\n<p>After the setup is complete, navigate to the project folder:<\/p>\n<pre><code>cd todo-app<\/code><\/pre>\n<p>Next, start the development server:<\/p>\n<pre><code>npm start<\/code><\/pre>\n<p>Your default browser should open with a \u201cWelcome to React\u201d page.<\/p>\n<h2>Creating the Todo Application Structure<\/h2>\n<p>Now, let&#8217;s organize our project by creating two components: <strong>TodoList<\/strong> and <strong>TodoItem<\/strong>.<\/p>\n<h3>Adding Component Files<\/h3>\n<p>Inside the <strong>src<\/strong> directory, create a subdirectory called <strong>components<\/strong> and add two new files: <strong>TodoList.js<\/strong> and <strong>TodoItem.js<\/strong>.<\/p>\n<h3>TodoItem Component<\/h3>\n<p>Open <strong>TodoItem.js<\/strong> and add the following code:<\/p>\n<pre><code>import React from 'react';\n\nconst TodoItem = ({ todo, onComplete, onDelete }) =&gt; {\n    return (\n        <div>\n            <span style=\"{{\">\n                {todo.task}\n            <\/span>\n            <button> onComplete(todo.id)}&gt;Complete<\/button>\n            <button> onDelete(todo.id)}&gt;Delete<\/button>\n        <\/div>\n    );\n};\n\nexport default TodoItem;<\/code><\/pre>\n<h3>TodoList Component<\/h3>\n<p>Next, open <strong>TodoList.js<\/strong> and implement the TodoList component:<\/p>\n<pre><code>import React from 'react';\nimport TodoItem from '.\/TodoItem';\n\nconst TodoList = ({ todos, onComplete, onDelete }) =&gt; {\n    return (\n        <div>\n            {todos.map(todo =&gt; (\n                \n            ))}\n        <\/div>\n    );\n};\n\nexport default TodoList;<\/code><\/pre>\n<h2>Managing State with Hooks<\/h2>\n<p>Now it&#8217;s time to manage the state of our Todo app within the main component. Open <strong>App.js<\/strong> and set up the state and functionality.<\/p>\n<pre><code>import React, { useState, useEffect } from 'react';\nimport TodoList from '.\/components\/TodoList';\n\nconst App = () =&gt; {\n    const [todos, setTodos] = useState([]);\n    const [task, setTask] = useState('');\n\n    useEffect(() =&gt; {\n        const storedTodos = JSON.parse(localStorage.getItem('todos'));\n        if (storedTodos) {\n            setTodos(storedTodos);\n        }\n    }, []);\n\n    useEffect(() =&gt; {\n        localStorage.setItem('todos', JSON.stringify(todos));\n    }, [todos]);\n\n    const addTodo = () =&gt; {\n        if (!task) return;\n        setTodos([...todos, { id: Date.now(), task, completed: false }]);\n        setTask('');\n    };\n\n    const completeTodo = (id) =&gt; {\n        setTodos(todos.map(todo =&gt; todo.id === id ? { ...todo, completed: true } : todo));\n    };\n\n    const deleteTodo = (id) =&gt; {\n        setTodos(todos.filter(todo =&gt; todo.id !== id));\n    };\n\n    return (\n        <div>\n            <h1>Todo App<\/h1>\n             setTask(e.target.value)}\n                placeholder=\"Add a new task\"\n            \/&gt;\n            <button>Add Todo<\/button>\n            \n        <\/div>\n    );\n};\n\nexport default App;<\/code><\/pre>\n<h2>Understanding LocalStorage<\/h2>\n<p>LocalStorage is a simple way to store data in user&#8217;s browser to ensure the information persists even when the page is refreshed. In the code above, we achieve this by:<\/p>\n<ul>\n<li>Using <code>useEffect<\/code> to load existing todos from LocalStorage when the app mounts.<\/li>\n<li>Updating LocalStorage whenever the <code>todos<\/code> state changes.<\/li>\n<\/ul>\n<h2>Styling Your Application<\/h2>\n<p>To make our Todo application look attractive, we can add some basic CSS. Create a new file named <strong>App.css<\/strong> in the <strong>src<\/strong> directory and add the following styles:<\/p>\n<pre><code>.app {\n    max-width: 400px;\n    margin: 50px auto;\n    text-align: center;\n}\n.todo-list {\n    margin-top: 20px;\n}\n.todo-item {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    margin-bottom: 10px;\n}\nbutton {\n    margin-left: 10px;\n}<\/code><\/pre>\n<p>Don&#8217;t forget to import the CSS file into <strong>App.js<\/strong>:<\/p>\n<pre><code>import '.\/App.css';<\/code><\/pre>\n<h2>Testing Your Application<\/h2>\n<p>Now it\u2019s time to test your implementation. Start the development server again using <code>npm start<\/code> and open your browser. You should be able to add, mark, and delete tasks, while ensuring tasks persist even after refreshing the page.<\/p>\n<h2>Conclusion<\/h2>\n<p>Congratulations! You have successfully built a Todo app using React and LocalStorage. This project not only solidifies your understanding of React concepts, such as components and hooks, but also introduces you to the vital concept of client-side storage.<\/p>\n<p>Feel free to enhance your Todo app further by adding features like editing tasks, setting deadlines, or filtering tasks by completion status. The possibilities are endless!<\/p>\n<h2>Additional Resources<\/h2>\n<ul>\n<li><a href=\"https:\/\/reactjs.org\/docs\/getting-started.html\" target=\"_blank\">React Documentation<\/a><\/li>\n<li><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Window\/localStorage\" target=\"_blank\">MDN Web Docs: LocalStorage<\/a><\/li>\n<li><a href=\"https:\/\/css-tricks.com\/\">CSS Tricks<\/a><\/li>\n<\/ul>\n<p>By leveraging the skills you&#8217;ve gained from this project, you can confidently tackle more complex applications and further advance your development capabilities.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Build a Todo App with React and LocalStorage Building a Todo application is a common project for developers looking to enhance their skills with React. It\u2019s not just a great way to learn the core principles of React, but also an excellent opportunity to integrate browser storage using LocalStorage. In this tutorial, we\u2019ll walk step-by-step<\/p>\n","protected":false},"author":95,"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-5960","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\/5960","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\/95"}],"replies":[{"embeddable":true,"href":"https:\/\/namastedev.com\/blog\/wp-json\/wp\/v2\/comments?post=5960"}],"version-history":[{"count":1,"href":"https:\/\/namastedev.com\/blog\/wp-json\/wp\/v2\/posts\/5960\/revisions"}],"predecessor-version":[{"id":5961,"href":"https:\/\/namastedev.com\/blog\/wp-json\/wp\/v2\/posts\/5960\/revisions\/5961"}],"wp:attachment":[{"href":"https:\/\/namastedev.com\/blog\/wp-json\/wp\/v2\/media?parent=5960"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/namastedev.com\/blog\/wp-json\/wp\/v2\/categories?post=5960"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/namastedev.com\/blog\/wp-json\/wp\/v2\/tags?post=5960"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}