Code Editor:<\/strong> Use any code editor of your choice. Visual Studio Code is highly recommended.<\/li>\n<\/ul>\nNow, let\u2019s create our React application.<\/p>\n
Creating a New React App<\/h3>\n To set up a new React app, run the following command in your terminal:<\/p>\n
npx create-react-app todo-app<\/code><\/pre>\nOnce the setup is complete, navigate into the app directory:<\/p>\n
cd todo-app<\/code><\/pre>\nInstalling Required Libraries<\/h3>\n For this tutorial, we won\u2019t be using any additional libraries; React comes packed with features sufficient for our Todo app. However, if you want to manage state more efficiently in larger applications, consider installing libraries like Redux.<\/p>\n
Structures of the App<\/h2>\n We will divide our app into a few simple components:<\/p>\n
\nApp:<\/strong> The main component that will hold our state.<\/li>\nTodoList:<\/strong> This component will render the list of to-do items.<\/li>\nTodoItem:<\/strong> Each individual item in our to-do list.<\/li>\nAddTodo:<\/strong> A component that allows users to add new tasks.<\/li>\n<\/ul>\nSetting Up Our Main App Component<\/h2>\n Open src\/App.js<\/code> and start with the following code:<\/p>\nimport React, { useState, useEffect } from 'react';\nimport TodoList from '.\/TodoList';\nimport AddTodo from '.\/AddTodo';\n\nfunction 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 = (todo) => {\n setTodos([...todos, todo]);\n };\n\n const removeTodo = (todoToRemove) => {\n setTodos(todos.filter(todo => todo !== todoToRemove));\n };\n\n return (\n \n
Todo App<\/h1>\n \n \n <\/div>\n );\n}\n\nexport default App;<\/code><\/pre>\n Here\u2019s a brief breakdown of what\u2019s happening:<\/p>\n
\nWe initialize the todos<\/code> state as an empty array using useState<\/code>.<\/li>\nIn the first useEffect<\/code>, we retrieve any saved tasks from localStorage<\/code> when the component mounts.<\/li>\nIn the second useEffect<\/code>, we save the current state of todos to localStorage<\/code> whenever it changes.<\/li>\nWe define the addTodo<\/code> and removeTodo<\/code> functions to manage the to-do items.<\/li>\n<\/ul>\nCreating the Add Todo Component<\/h2>\n Next, let\u2019s create the AddTodo<\/strong> component. Create a new file in src<\/code> called AddTodo.js<\/code> and add the following code:<\/p>\nimport React, { useState } from 'react';\n\nfunction AddTodo({ addTodo }) {\n const [todo, setTodo] = useState('');\n\n const handleAddTodo = (event) => {\n event.preventDefault();\n if (!todo) return;\n addTodo(todo);\n setTodo('');\n };\n\n return (\n \n setTodo(e.target.value)}\n placeholder=\"Add a new task...\"\n \/>\n Add<\/button>\n \n );\n}\n\nexport default AddTodo;<\/code><\/pre>\nCreating the Todo List Component<\/h2>\n Now, let\u2019s create the TodoList<\/strong> component that renders each Todo item. Create a new file in src<\/code> named TodoList.js<\/code>:<\/p>\nimport React from 'react';\nimport TodoItem from '.\/TodoItem';\n\nfunction TodoList({ todos, removeTodo }) {\n return (\n \n {todos.map((todo, index) => (\n \n ))}\n <\/ul>\n );\n}\n\nexport default TodoList;<\/code><\/pre>\nCreating the Todo Item Component<\/h2>\n Next, let\u2019s implement the TodoItem<\/strong> component in the TodoItem.js<\/code> file:<\/p>\nimport React from 'react';\n\nfunction TodoItem({ todo, removeTodo }) {\n return (\n \n {todo}\n removeTodo(todo)}>Remove<\/button>\n <\/li>\n );\n}\n\nexport default TodoItem;<\/code><\/pre>\nStyling the Application<\/h2>\n Given the basic structure of our Todo app, let\u2019s add some simple styling. Create a CSS file called App.css<\/code> in the src<\/code> directory:<\/p>\nbody {\n font-family: Arial, sans-serif;\n background-color: #f7f7f7;\n}\n\nh1 {\n text-align: center;\n}\n\nform {\n display: flex;\n justify-content: center;\n margin: 20px 0;\n}\n\ninput[type=\"text\"] {\n padding: 10px;\n border: 1px solid #ccc;\n border-radius: 5px;\n width: 300px;\n}\n\nbutton {\n padding: 10px;\n margin-left: 10px;\n background-color: #28a745;\n color: white;\n border: none;\n border-radius: 5px;\n cursor: pointer;\n}\n\nbutton:hover {\n background-color: #218838;\n}\n\nul {\n list-style-type: none;\n padding: 0;\n}\n\nli {\n display: flex;\n justify-content: space-between;\n padding: 10px;\n margin: 5px;\n background-color: white;\n border-radius: 5px;\n box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);\n}<\/code><\/pre>\nDon\u2019t forget to import this CSS file in your main App.js<\/code> file:<\/p>\nimport '.\/App.css';<\/code><\/pre>\nRunning Your Application<\/h2>\n Now that everything is set up, it\u2019s time to see your Todo app in action. Run the following command in your terminal:<\/p>\n
npm start<\/code><\/pre>\nThis will start your React application, and you should be able to see it in your browser at http:\/\/localhost:3000<\/strong>.<\/p>\nEnhancements and Next Steps<\/h2>\n Your basic Todo app is up and running! Here are some enhancements you can consider:<\/p>\n
\nEditing Todos:<\/strong> Implement functionality to edit existing todos.<\/li>\nTask Completion:<\/strong> Add a feature to mark tasks as complete.<\/li>\nFilter Todos:<\/strong> Allow users to filter tasks by completed or pending.<\/li>\nStyling Improvements:<\/strong> Use CSS frameworks like Bootstrap or Tailwind CSS for improved aesthetics.<\/li>\n<\/ul>\nConclusion<\/h2>\n Building a Todo app with React and LocalStorage is a fantastic way to enhance your web development skills. You have learned how to handle state, manage component communication, and utilize local storage for data persistence. Continue building upon this base and exploring the rich ecosystem of React to create even more powerful applications!<\/p>\n
Happy coding!<\/p>\n","protected":false},"excerpt":{"rendered":"
Build a Todo App with React and LocalStorage: A Step-by-Step Guide To-do lists are a fundamental part of keeping track of tasks, projects, and schedules. They\u2019re simple yet effective tools for personal productivity. Building a Todo app provides a perfect opportunity to work with React, a powerful JavaScript library for building user interfaces, and to<\/p>\n","protected":false},"author":87,"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-8085","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\/8085","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\/87"}],"replies":[{"embeddable":true,"href":"https:\/\/namastedev.com\/blog\/wp-json\/wp\/v2\/comments?post=8085"}],"version-history":[{"count":1,"href":"https:\/\/namastedev.com\/blog\/wp-json\/wp\/v2\/posts\/8085\/revisions"}],"predecessor-version":[{"id":8086,"href":"https:\/\/namastedev.com\/blog\/wp-json\/wp\/v2\/posts\/8085\/revisions\/8086"}],"wp:attachment":[{"href":"https:\/\/namastedev.com\/blog\/wp-json\/wp\/v2\/media?parent=8085"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/namastedev.com\/blog\/wp-json\/wp\/v2\/categories?post=8085"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/namastedev.com\/blog\/wp-json\/wp\/v2\/tags?post=8085"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}