{"id":7016,"date":"2025-06-19T21:32:38","date_gmt":"2025-06-19T21:32:37","guid":{"rendered":"https:\/\/namastedev.com\/blog\/?p=7016"},"modified":"2025-06-19T21:32:38","modified_gmt":"2025-06-19T21:32:37","slug":"build-a-todo-app-with-react-and-localstorage-5","status":"publish","type":"post","link":"https:\/\/namastedev.com\/blog\/build-a-todo-app-with-react-and-localstorage-5\/","title":{"rendered":"Build a Todo App with React and LocalStorage"},"content":{"rendered":"<h1>Build a Todo App with React and Local Storage<\/h1>\n<p>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&#8217;ll create a simple yet functional Todo application using React and Local Storage.<\/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=\"#creating-the-todo-component\">Creating the Todo Component<\/a><\/li>\n<li><a href=\"#managing-state-with-hooks\">Managing State with Hooks<\/a><\/li>\n<li><a href=\"#storing-todos-in-local-storage\">Storing Todos in Local Storage<\/a><\/li>\n<li><a href=\"#styling-your-app\">Styling Your App<\/a><\/li>\n<li><a href=\"#running-the-application\">Running the Application<\/a><\/li>\n<li><a href=\"#conclusion\">Conclusion<\/a><\/li>\n<\/ul>\n<h2 id=\"prerequisites\">Prerequisites<\/h2>\n<p>Before diving into coding, ensure you have the following:<\/p>\n<ul>\n<li><strong>Node.js:<\/strong> Make sure that you have Node.js installed on your machine. You can download it from <a href=\"https:\/\/nodejs.org\/\">nodejs.org<\/a>.<\/li>\n<li><strong>Basic Knowledge of JavaScript:<\/strong> Familiarity with ES6 syntax, React components, and hooks will be beneficial.<\/li>\n<li><strong>Code Editor:<\/strong> Use a code editor of your preference, such as Visual Studio Code, Atom, or Sublime Text.<\/li>\n<\/ul>\n<h2 id=\"setting-up-the-project\">Setting Up the Project<\/h2>\n<p>Let&#8217;s kick things off by setting up our React application. Open your terminal and run the following commands:<\/p>\n<pre><code>npx create-react-app todo-app\ncd todo-app\nnpm start\n<\/code><\/pre>\n<p>Once your development server is up and running, you should see your default React homepage at <a href=\"http:\/\/localhost:3000\/\">http:\/\/localhost:3000\/<\/a>.<\/p>\n<h2 id=\"creating-the-todo-component\">Creating the Todo Component<\/h2>\n<p>Start by creating a file named <strong>Todo.js<\/strong> in the <strong>src<\/strong> folder. This component will represent individual Todo items. Add the following code to <strong>Todo.js<\/strong>:<\/p>\n<pre><code>import React from 'react';\n\nconst Todo = ({ todo, deleteTodo }) =&gt; {\n  return (\n    <div>\n      <span>{todo.text}<\/span>\n      <button> deleteTodo(todo.id)}&gt;Delete<\/button>\n    <\/div>\n  );\n};\n\nexport default Todo;\n<\/code><\/pre>\n<p>This component displays the text of a Todo and includes a button to delete it.<\/p>\n<h2 id=\"managing-state-with-hooks\">Managing State with Hooks<\/h2>\n<p>Now, let&#8217;s manage the state of our Todo app using React Hooks. In the <strong>App.js<\/strong> file, import the necessary hooks and initialize your state:<\/p>\n<pre><code>import React, { useState, useEffect } from 'react';\nimport Todo from '.\/Todo';\nimport '.\/App.css';\n\nconst App = () =&gt; {\n  const [todos, setTodos] = useState([]);\n  const [input, setInput] = useState('');\n\n  const addTodo = () =&gt; {\n    if (input.trim().length === 0) return;\n    const newTodo = { id: Date.now(), text: input };\n    setTodos([...todos, newTodo]);\n    setInput('');\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       setInput(e.target.value)} \n        placeholder=\"Add a new todo\" \n      \/&gt;\n      <button>Add Todo<\/button>\n      {todos.map((todo) =&gt; (\n        \n      ))}\n    <\/div>\n  );\n};\n\nexport default App;\n<\/code><\/pre>\n<p>In the code snippet above, we&#8217;ve created two state variables: <code>todos<\/code>, which holds our Todo items, and <code>input<\/code>, which captures the user&#8217;s input for new Todos. The <code>addTodo<\/code> and <code>deleteTodo<\/code> functions help in managing the Todos effectively.<\/p>\n<h2 id=\"storing-todos-in-local-storage\">Storing Todos in Local Storage<\/h2>\n<p>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 <code>useEffect<\/code> 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]);\n<\/code><\/pre>\n<p>Add the above two <strong>useEffect<\/strong> hooks to the <strong>App<\/strong> component. The first useEffect checks for existing Todos in Local Storage when the app loads, while the second one updates Local Storage whenever the <code>todos<\/code> state changes.<\/p>\n<h2 id=\"styling-your-app\">Styling Your App<\/h2>\n<p>Although functionality is crucial, aesthetics matter too. You can add some basic CSS styles in <strong>App.css<\/strong> to make your Todo app visually appealing:<\/p>\n<pre><code>body {\n  font-family: Arial, sans-serif;\n  background-color: #f0f0f0;\n}\n\n.app {\n  max-width: 500px;\n  margin: auto;\n  padding: 20px;\n  background-color: white;\n  border-radius: 8px;\n  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);\n}\n\ninput {\n  width: 70%;\n  padding: 10px;\n  border: 1px solid #ccc;\n  border-radius: 4px;\n  margin-right: 10px;\n}\n\nbutton {\n  padding: 10px 15px;\n  background-color: #28a745;\n  color: white;\n  border: none;\n  border-radius: 4px;\n  cursor: pointer;\n}\n\nbutton:hover {\n  background-color: #218838;\n}\n\n.todo {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  margin: 10px 0;\n}\n<\/code><\/pre>\n<p>These styles will enhance your Todo app&#8217;s appearance, making it more user-friendly.<\/p>\n<h2 id=\"running-the-application\">Running the Application<\/h2>\n<p>Now that we&#8217;ve set everything up, let\u2019s run the application and see it in action. Make sure your development server is still running. If not, you can start it again with:<\/p>\n<pre><code>npm start\n<\/code><\/pre>\n<p>Visit <a href=\"http:\/\/localhost:3000\/\">http:\/\/localhost:3000\/<\/a> in your browser, and you should see your Todo app. You can add, delete, and even see your Todos persist after refreshing the page!<\/p>\n<h2 id=\"conclusion\">Conclusion<\/h2>\n<p>Congratulations! You&#8217;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.<\/p>\n<p>Building projects like this is an excellent way to sharpen your development skills, so keep experimenting and happy coding!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>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&#8217;ll create a simple yet functional Todo<\/p>\n","protected":false},"author":91,"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-7016","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\/7016","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\/91"}],"replies":[{"embeddable":true,"href":"https:\/\/namastedev.com\/blog\/wp-json\/wp\/v2\/comments?post=7016"}],"version-history":[{"count":1,"href":"https:\/\/namastedev.com\/blog\/wp-json\/wp\/v2\/posts\/7016\/revisions"}],"predecessor-version":[{"id":7018,"href":"https:\/\/namastedev.com\/blog\/wp-json\/wp\/v2\/posts\/7016\/revisions\/7018"}],"wp:attachment":[{"href":"https:\/\/namastedev.com\/blog\/wp-json\/wp\/v2\/media?parent=7016"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/namastedev.com\/blog\/wp-json\/wp\/v2\/categories?post=7016"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/namastedev.com\/blog\/wp-json\/wp\/v2\/tags?post=7016"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}