Hello. In this article, we will learn how to create a To Do app using React. This tutorial will cover both UI\/UX design and functionality implementation. React is a component-based JavaScript library that helps create dynamic user interfaces easily.<\/p>\n
Before we start, we need to set up the basic configuration of the project. You can build the development environment with the following steps.<\/p>\n
npx create-react-app my-todo-app<\/code><\/pre>\nRunning the above command will create the basic template of a React app in a folder named my-todo-app<\/code>. Let’s navigate to the created folder and run the app.<\/p>\ncd my-todo-app\nnpm start<\/code><\/pre>\nIf you access http:\/\/localhost:3000<\/code> in your browser, you will see the basic React app running.<\/p>\nDesigning Component Structure<\/h2>\n
The basic functionality of the To Do app is to add tasks, toggle completion status, and delete them. You can design the component structure as follows.<\/p>\n
\n- App<\/strong>: The root component of the application<\/li>\n
- TodoList<\/strong>: The component that displays the list of tasks<\/li>\n
- TodoItem<\/strong>: The component that displays each task item<\/li>\n
- AddTodo<\/strong>: The form component for adding a task<\/li>\n<\/ul>\n
Implementing Components<\/h2>\n
Now let’s implement each component.<\/p>\n
1. App Component<\/h3>\n
First, let’s open the App.js<\/code> file and define the basic state.<\/p>\nimport React, { useState } from 'react';\nimport TodoList from '.\/components\/TodoList';\nimport AddTodo from '.\/components\/AddTodo';\n\nconst App = () => {\n const [todos, setTodos] = useState([]);\n\n const addTodo = (todo) => {\n setTodos([...todos, todo]);\n };\n\n const toggleComplete = (index) => {\n const newTodos = todos.map((todo, i) => {\n if (i === index) {\n return { ...todo, completed: !todo.completed };\n }\n return todo;\n });\n setTodos(newTodos);\n };\n\n const deleteTodo = (index) => {\n const newTodos = todos.filter((_, i) => i !== index);\n setTodos(newTodos);\n };\n\n return (\n <div className=\"App\">\n <h1>To Do List<\/h1>\n <AddTodo addTodo={addTodo} \/>\n <TodoList todos={todos} toggleComplete={toggleComplete} deleteTodo={deleteTodo} \/>\n <\/div>\n );\n};\n\nexport default App;<\/code><\/pre>\n2. TodoList Component<\/h3>\n
Next, we will implement TodoList.js<\/code>. This component renders the list of tasks.<\/p>\nimport React from 'react';\nimport TodoItem from '.\/TodoItem';\n\nconst TodoList = ({ todos, toggleComplete, deleteTodo }) => {\n return (\n <ul>\n {todos.map((todo, index) => (\n <TodoItem \n key={index} \n todo={todo} \n toggleComplete={() => toggleComplete(index)} \n deleteTodo={() => deleteTodo(index)} \n \/>\n ))}\n <\/ul>\n );\n};\n\nexport default TodoList;<\/code><\/pre>\n3. TodoItem Component<\/h3>\n
Now, let’s create TodoItem.js<\/code> to represent each task item.<\/p>\nimport React from 'react';\n\nconst TodoItem = ({ todo, toggleComplete, deleteTodo }) => {\n return (\n <li style={{ textDecoration: todo.completed ? 'line-through' : 'none' }}>\n {todo.text}\n <button onClick={toggleComplete}>Complete<\/button>\n <button onClick={deleteTodo}>Delete<\/button>\n <\/li>\n );\n};\n\nexport default TodoItem;<\/code><\/pre>\n4. AddTodo Component<\/h3>\n
Finally, let’s implement the form for adding tasks.<\/p>\n
import React, { useState } from 'react';\n\nconst AddTodo = ({ addTodo }) => {\n const [inputValue, setInputValue] = useState('');\n\n const handleSubmit = (e) => {\n e.preventDefault();\n if (inputValue.trim()) {\n addTodo({ text: inputValue, completed: false });\n setInputValue('');\n }\n };\n\n return (\n <form onSubmit={handleSubmit}>\n <input \n type=\"text\" \n value={inputValue} \n onChange={(e) => setInputValue(e.target.value)} \n placeholder=\"Enter your task\" \n \/>\n <button type=\"submit\">Add<\/button>\n <\/form>\n );\n};\n\nexport default AddTodo;<\/code><\/pre>\nAdding Styling<\/h2>\n
Now that the basic functionality has been implemented, let’s make the UI more beautiful using CSS. Add the following styles to the App.css<\/code> file.<\/p>\nbody {\n font-family: 'Arial', sans-serif;\n background-color: #f4f4f4;\n}\n\n.App {\n max-width: 600px;\n margin: 50px auto;\n padding: 20px;\n background: white;\n border-radius: 8px;\n box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);\n}\n\nh1 {\n text-align: center;\n}\n\nform {\n display: flex;\n justify-content: space-between;\n margin-bottom: 20px;\n}\n\ninput[type=\"text\"] {\n flex: 1;\n padding: 10px;\n border: 1px solid #ccc;\n border-radius: 4px;\n}\n\nbutton {\n padding: 10px 15px;\n margin-left: 10px;\n border: none;\n border-radius: 4px;\n background: #4A90E2;\n color: white;\n cursor: pointer;\n}\n\nbutton:hover {\n background: #357ABD;\n}\n\nul {\n list-style-type: none;\n padding: 0;\n}<\/code><\/pre>\nTesting and Deployment<\/h2>\n
Now that the app is complete, you can proceed to test and deploy it. You can create a production build using the command npm run build.<\/p>\n
npm run build<\/code><\/pre>\n