Building a simple Todo app is a rite of passage for many web developers, and it serves as an excellent way to understand the core concepts of React. In this guide, we will walk through the process of creating a Todo app that not only uses React but also leverages LocalStorage to persist our data. This approach ensures that even if the user refreshes the page, their tasks remain intact.<\/p>\n
Before diving into the code, ensure you have Node.js installed on your machine. If you haven\u2019t installed React yet, you can quickly set up a React application using Create React App.<\/p>\n
npx create-react-app todo-app<\/code><\/pre>\nChange your directory to your new app:<\/p>\n
cd todo-app<\/code><\/pre>\nOnce inside the project, you can open it in your favorite code editor.<\/p>\n
Creating the Todo App Structure<\/h2>\n
First, we need to create the following components:<\/p>\n
\n- TodoList<\/strong>: Displays the list of tasks.<\/li>\n
- TodoItem<\/strong>: Represents a single task.<\/li>\n
- AddTodo<\/strong>: A form to add a new task.<\/li>\n<\/ul>\n
TodoList Component<\/h3>\n
Let’s start with the TodoList<\/strong> component. Create a new file named TodoList.js<\/strong> inside the src<\/strong> directory.<\/p>\nimport React from 'react';\nimport TodoItem from '.\/TodoItem';\n\nconst TodoList = ({ todos, deleteTodo }) => {\n return (\n <div>\n <h2>Todo List<\/h2>\n <ul>\n {todos.map((todo, index) => (\n <TodoItem key={index} todo={todo} deleteTodo={deleteTodo} \/>\n ))}\n <\/ul>\n <\/div>\n );\n};\n\nexport default TodoList;<\/code><\/pre>\nTodoItem Component<\/h3>\n
Create a new file named TodoItem.js<\/strong> in the same directory:<\/p>\nimport React from 'react';\n\nconst TodoItem = ({ todo, deleteTodo }) => {\n return (\n <li>\n {todo}\n <button onClick={deleteTodo} >Delete<\/button>\n <\/li>\n );\n};\n\nexport default TodoItem;<\/code><\/pre>\nAddTodo Component<\/h3>\n
Next, create the AddTodo<\/strong> component in AddTodo.js<\/strong>:<\/p>\nimport React, { useState } from 'react';\n\nconst AddTodo = ({ addTodo }) => {\n const [value, setValue] = useState('');\n\n const handleSubmit = (e) => {\n e.preventDefault();\n if (!value) return;\n addTodo(value);\n setValue('');\n };\n\n return (\n <form onSubmit={handleSubmit}>\n <input \n type=\"text\" \n value={value} \n onChange={(e) => setValue(e.target.value)} \n placeholder=\"Add a new task\" \n \/>\n <button type=\"submit\">Add<\/button>\n <\/form>\n );\n};\n\nexport default AddTodo;<\/code><\/pre>\nSetting Up the App Component<\/h2>\n
Now let’s set up the main application component in App.js<\/strong> where we\u2019ll manage state and connect everything together.<\/p>\nimport React, { useState, useEffect } from 'react';\nimport TodoList from '.\/TodoList';\nimport AddTodo from '.\/AddTodo';\n\nconst App = () => {\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 addTodo = (newTodo) => {\n setTodos([...todos, newTodo]);\n };\n\n const deleteTodo = (index) => {\n const newTodos = todos.filter((_, i) => i !== index);\n setTodos(newTodos);\n };\n\n return (\n <div>\n <h1>Todo App<\/h1>\n <AddTodo addTodo={addTodo} \/>\n <TodoList todos={todos} deleteTodo={deleteTodo} \/>\n <\/div>\n );\n};\n\nexport default App;<\/code><\/pre>\nUnderstanding LocalStorage<\/h2>\n
LocalStorage is a web storage solution that allows us to store key-value pairs in a web browser with no expiration time. The data stored in LocalStorage is accessible through the window object:<\/p>\n
window.localStorage<\/code><\/pre>\nIn our app, we will use LocalStorage to save the list of todos whenever they are updated using the effect hook:<\/p>\n
Using Logic for Data Persistence<\/h3>\n
Within the useEffect<\/strong>, the first effect runs to fetch todos from LocalStorage when the component mounts, while the second effect persists any changes to the todos:<\/p>\nuseEffect(() => {\n const storedTodos = JSON.parse(localStorage.getItem('todos'));\n if (storedTodos) {\n setTodos(storedTodos);\n }\n}, []);\n\nuseEffect(() => {\n localStorage.setItem('todos', JSON.stringify(todos));\n}, [todos]);<\/code><\/pre>\nStyling the Todo App<\/h2>\n
You can enhance your app’s appearance by adding some basic styles. Create a new styles.css<\/strong> file in the src<\/strong> directory and add the following styles:<\/p>\nbody {\n font-family: Arial, sans-serif;\n}\n\nh1, h2 {\n color: #333;\n}\n\nul {\n list-style: none;\n padding: 0;\n}\n\nbutton {\n margin-left: 10px;\n padding: 5px 10px;\n background-color: #28a745;\n color: white;\n border: none;\n cursor: pointer;\n border-radius: 5px;\n}\n\nbutton:hover {\n background-color: #218838;\n}\n\nform {\n margin-bottom: 20px;\n}<\/code><\/pre>\nConclusion<\/h2>\n
Congratulations! You have built a fully functional Todo application with React and LocalStorage. You’ve learned how to create components, manage state, and store data locally, all essential skills for any developer.<\/p>\n
This Todo app is a great foundation, and you can expand its functionality by adding features like:<\/p>\n
\n- Task editing capabilities.<\/li>\n
- Marking tasks as complete.<\/li>\n
- Implementing due dates.<\/li>\n<\/ul>\n
Further Resources<\/h2>\n
To deepen your understanding of React and LocalStorage, consider the following resources:<\/p>\n
\n- React Official Documentation<\/a><\/li>\n
- MDN Web Docs on LocalStorage<\/a><\/li>\n
- Using LocalStorage in React by CSS-Tricks<\/a><\/li>\n<\/ul>\n
Happy coding!<\/p>\n","protected":false},"excerpt":{"rendered":"
Build a Todo App with React and LocalStorage Building a simple Todo app is a rite of passage for many web developers, and it serves as an excellent way to understand the core concepts of React. In this guide, we will walk through the process of creating a Todo app that not only uses React<\/p>\n","protected":false},"author":92,"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-8351","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\/8351","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\/92"}],"replies":[{"embeddable":true,"href":"https:\/\/namastedev.com\/blog\/wp-json\/wp\/v2\/comments?post=8351"}],"version-history":[{"count":1,"href":"https:\/\/namastedev.com\/blog\/wp-json\/wp\/v2\/posts\/8351\/revisions"}],"predecessor-version":[{"id":8352,"href":"https:\/\/namastedev.com\/blog\/wp-json\/wp\/v2\/posts\/8351\/revisions\/8352"}],"wp:attachment":[{"href":"https:\/\/namastedev.com\/blog\/wp-json\/wp\/v2\/media?parent=8351"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/namastedev.com\/blog\/wp-json\/wp\/v2\/categories?post=8351"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/namastedev.com\/blog\/wp-json\/wp\/v2\/tags?post=8351"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}