Creating a Todo app is a classic project for developers to get familiar with various web technologies, especially React. In this tutorial, we\u2019ll guide you through building a simple yet powerful Todo app using React and managing application state with LocalStorage. The integration of LocalStorage will allow our app to persist tasks even when the browser is refreshed. Let\u2019s dive in!<\/p>\n
This tutorial assumes that you have a basic understanding of JavaScript<\/strong>, React<\/strong>, and familiarity with HTML\/CSS<\/strong>. Make sure you have Node.js installed on your system to run the React application.<\/p>\n To kick things off, we need to set up a new React application. You can easily do this using Create React App, a command-line tool that sets up a new React project with sensible defaults.<\/p>\n Navigate into your project directory:<\/p>\n Now, start the development server:<\/p>\n Your browser should automatically open and display the default React application.<\/p>\n Next, let\u2019s build the structure of our Todo app. We will create a few components: TodoList<\/strong>, TodoItem<\/strong>, and AddTodo<\/strong>.<\/p>\n Create a new file named TodoList.js<\/strong> in the src<\/strong> directory. This component will be responsible for displaying the list of Todo items.<\/p>\n Create another file named TodoItem.js<\/strong>. This component will represent each individual Todo task.<\/p>\n Create a file named AddTodo.js<\/strong>. This component will include a form to add new Todos.<\/p>\n Now that we have the components set up, let\u2019s manage the state of our Todo app in the App.js<\/strong> file.<\/p>\n Let\u2019s add some basic styles to make our Todo app look more appealing. You can create a styles.css<\/strong> file in the src<\/strong> directory and import it into your index.js<\/strong> file.<\/p>\n You\u2019ve successfully built a functional Todo app using React and LocalStorage! This simple project demonstrates core React concepts such as state management and component-based architecture while also showcasing how to persist data across sessions using LocalStorage.<\/p>\n From here, consider enhancing your app by adding features like editing todos, marking them as complete, or even integrating a backend API for storage. Happy coding!<\/p>\n Build a Todo App with React and LocalStorage Creating a Todo app is a classic project for developers to get familiar with various web technologies, especially React. In this tutorial, we\u2019ll guide you through building a simple yet powerful Todo app using React and managing application state with LocalStorage. The integration of LocalStorage will allow<\/p>\n","protected":false},"author":80,"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-6785","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\/6785","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\/80"}],"replies":[{"embeddable":true,"href":"https:\/\/namastedev.com\/blog\/wp-json\/wp\/v2\/comments?post=6785"}],"version-history":[{"count":1,"href":"https:\/\/namastedev.com\/blog\/wp-json\/wp\/v2\/posts\/6785\/revisions"}],"predecessor-version":[{"id":6786,"href":"https:\/\/namastedev.com\/blog\/wp-json\/wp\/v2\/posts\/6785\/revisions\/6786"}],"wp:attachment":[{"href":"https:\/\/namastedev.com\/blog\/wp-json\/wp\/v2\/media?parent=6785"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/namastedev.com\/blog\/wp-json\/wp\/v2\/categories?post=6785"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/namastedev.com\/blog\/wp-json\/wp\/v2\/tags?post=6785"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}Setting Up the React Application<\/h2>\n
npx create-react-app todo-app<\/code><\/pre>\ncd todo-app<\/code><\/pre>\nnpm start<\/code><\/pre>\nCreating the Todo App Structure<\/h2>\n
1. TodoList Component<\/h3>\n
import React from 'react';\nimport TodoItem from '.\/TodoItem';\n\nconst TodoList = ({ todos, deleteTodo }) => {\n return (\n <ul>\n {todos.map((todo, index) => (\n <TodoItem key={index} todo={todo} deleteTodo={deleteTodo} \/>\n ))}\n <\/ul>\n );\n};\n\nexport default TodoList;<\/code><\/pre>\n2. TodoItem Component<\/h3>\n
import 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>\n3. AddTodo Component<\/h3>\n
import 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 new todo\"\n \/>\n <button type=\"submit\">Add Todo<\/button>\n <\/form>\n );\n};\n\nexport default AddTodo;<\/code><\/pre>\nManaging State with Hooks<\/h2>\n
import React, { useState, useEffect } from 'react';\nimport TodoList from '.\/TodoList';\nimport AddTodo from '.\/AddTodo';\n\nconst App = () => {\n const [todos, setTodos] = useState([]);\n\n const addTodo = (todo) => {\n setTodos([...todos, todo]);\n };\n\n const deleteTodo = (index) => {\n const newTodos = todos.filter((_, i) => i !== index);\n setTodos(newTodos);\n };\n\n \/\/ Use effect to fetch todos from LocalStorage\n useEffect(() => {\n const storedTodos = JSON.parse(localStorage.getItem('todos'));\n if (storedTodos) {\n setTodos(storedTodos);\n }\n }, []);\n\n \/\/ Use effect to update LocalStorage whenever the todos array changes\n useEffect(() => {\n localStorage.setItem('todos', JSON.stringify(todos));\n }, [todos]);\n\n return (\n <div>\n <h1>My Todo List<\/h1>\n <AddTodo addTodo={addTodo} \/>\n <TodoList todos={todos} deleteTodo={deleteTodo} \/>\n <\/div>\n );\n};\n\nexport default App;<\/code><\/pre>\nStyling the Todo App<\/h2>\n
\/* styles.css *\/\nbody {\n font-family: Arial, sans-serif;\n background-color: #f4f4f4;\n}\n\nh1 {\n text-align: center;\n color: #333;\n}\n\nform {\n display: flex;\n justify-content: center;\n margin-bottom: 20px;\n}\n\ninput {\n padding: 10px;\n border: none;\n border-radius: 5px;\n margin-right: 10px;\n}\n\nbutton {\n padding: 10px;\n border: none;\n border-radius: 5px;\n background-color: #5cb85c;\n color: white;\n cursor: pointer;\n}\n\nbutton:hover {\n background-color: #4cae4c;\n}\n\nul {\n list-style-type: none;\n padding: 0;\n}\n\nli {\n background: white;\n margin: 5px;\n padding: 10px;\n border-radius: 5px;\n display: flex;\n justify-content: space-between;\n}<\/code><\/pre>\nConclusion<\/h2>\n
Further Reading<\/h2>\n
\n