official Node.js website<\/a>.<\/p>\nOnce the installation is complete, create a new React app using the following command:<\/p>\n
npx create-react-app todo-app<\/code><\/pre>\nAfter the app creation is complete, navigate to the created directory and run the app:<\/p>\n
cd todo-app\nnpm start<\/code><\/pre>\nOpening http:\/\/localhost:3000<\/strong> in your browser should display the default React app.<\/p>\n4. Understanding Project Structure<\/h2>\n
Once the project is created, you will find the following folder structure:<\/p>\n
\ntodo-app\/\n\u251c\u2500\u2500 node_modules\/\n\u251c\u2500\u2500 public\/\n\u2514\u2500\u2500 src\/\n \u251c\u2500\u2500 App.css\n \u251c\u2500\u2500 App.js\n \u251c\u2500\u2500 index.css\n \u251c\u2500\u2500 index.js\n \u2514\u2500\u2500 logo.svg\n<\/code><\/pre>\nThe primary file to modify is src\/App.js<\/code>. We will implement the functionality of the To Do app by modifying this file.<\/p>\n5. Component Design<\/h2>\n
The To Do app will be composed of the following components:<\/p>\n
\n- ToDoApp:<\/strong> The main component of the app that includes all subcomponents.<\/li>\n
- ToDoList:<\/strong> Displays the list of added tasks.<\/li>\n
- ToDoItem:<\/strong> Represents individual tasks, supporting completion and deletion functionalities.<\/li>\n
- AddToDo:<\/strong> Provides a form to add new tasks.<\/li>\n<\/ul>\n
5.1 Setting Up the ToDoApp Component<\/h3>\n
Open the src\/App.js<\/code> file and modify its content as follows:<\/p>\nimport React, { useState } from 'react';\nimport ToDoList from '.\/ToDoList';\nimport AddToDo from '.\/AddToDo';\nimport '.\/App.css';\n\nconst ToDoApp = () => {\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 const toggleTodo = (index) => {\n const newTodos = [...todos];\n newTodos[index].completed = !newTodos[index].completed;\n setTodos(newTodos);\n };\n\n return (\n