{"id":6966,"date":"2025-06-18T19:32:40","date_gmt":"2025-06-18T19:32:40","guid":{"rendered":"https:\/\/namastedev.com\/blog\/?p=6966"},"modified":"2025-06-18T19:32:40","modified_gmt":"2025-06-18T19:32:40","slug":"build-a-todo-app-with-react-and-localstorage-4","status":"publish","type":"post","link":"https:\/\/namastedev.com\/blog\/build-a-todo-app-with-react-and-localstorage-4\/","title":{"rendered":"Build a Todo App with React and LocalStorage"},"content":{"rendered":"<h1>Build a Todo App with React and LocalStorage<\/h1>\n<p>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&#8217;s get started!<\/p>\n<h2>Why Build a Todo App?<\/h2>\n<p>Todo apps are not just simple projects; they are integral to understanding fundamental concepts in web development, such as:<\/p>\n<ul>\n<li><strong>State Management:<\/strong> Learn how to manage the application state.<\/li>\n<li><strong>User Interface Design:<\/strong> Get hands-on experience in designing user interfaces.<\/li>\n<li><strong>Data Persistence:<\/strong> Understand how to store and retrieve data from a web browser.<\/li>\n<\/ul>\n<h2>Prerequisites<\/h2>\n<p>Before we dive into coding, ensure you have the following prerequisites:<\/p>\n<ul>\n<li><strong>Node.js:<\/strong> Make sure you have Node.js installed on your machine.<\/li>\n<li><strong>Basic Understanding of React:<\/strong> Familiarity with React concepts like components and hooks.<\/li>\n<li><strong>Code Editor:<\/strong> A good code editor like VSCode or Atom.<\/li>\n<\/ul>\n<h2>Setting Up Your Environment<\/h2>\n<p>First, let\u2019s set up a new React application. You can do this by running the following command in your terminal:<\/p>\n<pre><code>npx create-react-app todo-app<\/code><\/pre>\n<p>Once your application is created, navigate into the 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 application should now be running at <strong>http:\/\/localhost:3000<\/strong>.<\/p>\n<h2>Creating the Todo Application<\/h2>\n<p>Let\u2019s get into coding! We&#8217;ll create a simple Todo application that allows users to add, remove, and view their tasks.<\/p>\n<h3>Project Structure<\/h3>\n<p>The structure of our project will be as follows:<\/p>\n<pre><code>\ntodo-app\/\n\u251c\u2500\u2500 src\/\n\u2502   \u251c\u2500\u2500 components\/\n\u2502   \u2502   \u251c\u2500\u2500 Todo.js\n\u2502   \u2502   \u2514\u2500\u2500 TodoList.js\n\u2502   \u251c\u2500\u2500 App.js\n\u2502   \u2514\u2500\u2500 index.js\n<\/code><\/pre>\n<p>Create a folder named <strong>components<\/strong> inside the <strong>src<\/strong> directory and then create two files: <strong>Todo.js<\/strong> and <strong>TodoList.js<\/strong>.<\/p>\n<h3>Building the Todo Component<\/h3>\n<p>Let\u2019s start by creating our Todo component. This component will represent a single task in our application.<\/p>\n<pre><code>\nimport React from 'react';\n\nconst Todo = ({ todo, onDelete }) =&gt; {\n    return (\n        <div style=\"{{\">\n            <span>{todo.text}<\/span>\n            <button> onDelete(todo.id)}&gt;Delete<\/button>\n        <\/div>\n    );\n};\n\nexport default Todo;\n<\/code><\/pre>\n<h3>Building the TodoList Component<\/h3>\n<p>Next, we\u2019ll create the TodoList component that will handle the list of todos.<\/p>\n<pre><code>\nimport React from 'react';\nimport Todo from '.\/Todo';\n\nconst TodoList = ({ todos, onDelete }) =&gt; {\n    return (\n        <div>\n            {todos.map(todo =&gt; (\n                \n            ))}\n        <\/div>\n    );\n};\n\nexport default TodoList;\n<\/code><\/pre>\n<h3>Updating the App Component<\/h3>\n<p>The App component will manage our state and handle all the logic for adding and removing todos.<\/p>\n<pre><code>\nimport React, { useEffect, useState } from 'react';\nimport TodoList from '.\/components\/TodoList';\n\nconst App = () =&gt; {\n    const [todos, setTodos] = useState([]);\n    const [inputValue, setInputValue] = 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 (inputValue) {\n            setTodos([...todos, { id: Date.now(), text: inputValue }]);\n            setInputValue('');\n        }\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             setInputValue(e.target.value)} \n                placeholder=\"Add a new todo\" \n            \/&gt;\n            <button>Add Todo<\/button>\n            \n        <\/div>\n    );\n};\n\nexport default App;\n<\/code><\/pre>\n<h3>Styling the Application<\/h3>\n<p>You can add styles directly in your components or create a separate CSS file for this. For simplicity, let&#8217;s add some inline styles. You can customize these to fit your design preference.<\/p>\n<h3>Testing Your Application<\/h3>\n<p>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.<\/p>\n<h2>Enhancing Your Todo App<\/h2>\n<p>Once you have the basic functionality working, consider enhancing your app with the following features:<\/p>\n<ul>\n<li><strong>Edit Todos:<\/strong> Allow users to edit existing todos.<\/li>\n<li><strong>Mark as Complete:<\/strong> Add a feature to mark todos as complete.<\/li>\n<li><strong>Filter and Sort:<\/strong> Enable users to filter active\/completed todos and sort them as needed.<\/li>\n<\/ul>\n<p>Implementing these features can help you further your React skills and provide a better user experience.<\/p>\n<h2>Conclusion<\/h2>\n<p>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.<\/p>\n<p>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!<\/p>\n<h2>Additional Resources<\/h2>\n<p>For more information and resources on React, check out the following:<\/p>\n<ul>\n<li><a href=\"https:\/\/reactjs.org\/docs\/getting-started.html\" target=\"_blank\">Official React Documentation<\/a><\/li>\n<li><a href=\"https:\/\/css-tricks.com\/react-todo-app-example\/\" target=\"_blank\">CSS-Tricks: React Todo App Example<\/a><\/li>\n<li><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Web_Storage_API\" target=\"_blank\">MDN Web Storage API<\/a><\/li>\n<\/ul>\n<p>Happy coding!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>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<\/p>\n","protected":false},"author":105,"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":["post-6966","post","type-post","status-publish","format-standard","category-react","tag-react"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/namastedev.com\/blog\/wp-json\/wp\/v2\/posts\/6966","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\/105"}],"replies":[{"embeddable":true,"href":"https:\/\/namastedev.com\/blog\/wp-json\/wp\/v2\/comments?post=6966"}],"version-history":[{"count":1,"href":"https:\/\/namastedev.com\/blog\/wp-json\/wp\/v2\/posts\/6966\/revisions"}],"predecessor-version":[{"id":6967,"href":"https:\/\/namastedev.com\/blog\/wp-json\/wp\/v2\/posts\/6966\/revisions\/6967"}],"wp:attachment":[{"href":"https:\/\/namastedev.com\/blog\/wp-json\/wp\/v2\/media?parent=6966"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/namastedev.com\/blog\/wp-json\/wp\/v2\/categories?post=6966"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/namastedev.com\/blog\/wp-json\/wp\/v2\/tags?post=6966"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}