This blog post demonstrates how to create a simple To-Do List App using React. It covers setting up the project, managing tasks with key functions like addTask, deleteTask, and toggleComplete, and styling the app with CSS. The tutorial includes step-by-step instructions, testing, and multiple-choice questions for better understanding
Build a Simple To-Do List App with React
In this blog post, we will walk you through creating a simple yet functional To-Do List App using React. This application will allow users to add tasks, mark them as complete, and delete them. Let’s get started!
Step 1: Set Up the Project
To begin, set up a new React project. If React is not installed on your system, open your terminal or command prompt and run the following command:
npx create-react-app todo-app
This will create a folder named todo-app containing the React project files. Navigate to this folder and start the development server:
cd todo-app
npm start
Once the server is running, you’ll see the default React page in your browser.
Step 2: Create the To-Do App Structure
Next, let’s build the structure of our To-Do List App. Create a new file named TodoApp.js in the src directory. This file will contain the main React component for our app. Here is the code for the component:
import React, { useState } from 'react';
import './TodoApp.css';
const TodoApp = () => {
const [tasks, setTasks] = useState([]);
const [task, setTask] = useState('');
// Function to add a task
const addTask = () => {
if (task.trim()) {
setTasks([...tasks, { text: task, completed: false }]);
setTask('');
}
};
// Function to delete a task
const deleteTask = (index) => {
setTasks(tasks.filter((_, i) => i !== index));
};
// Function to toggle task completion
const toggleComplete = (index) => {
setTasks(
tasks.map((task, i) =>
i === index ? { ...task, completed: !task.completed } : task
)
);
};
return (
<div className="todo-app">
<h1>To-Do List App</h1>
<div className="input-section">
<input
type="text"
value={task}
onChange={(e) => setTask(e.target.value)}
placeholder="Add a new task"
/>
<button onClick={addTask}>Add Task</button>
</div>
<ul>
{tasks.map((task, index) => (
<li key={index} className={task.completed ? 'completed' : ''}>
<span>{task.text}</span>
<button onClick={() => toggleComplete(index)}>
{task.completed ? 'Undo' : 'Complete'}
</button>
<button onClick={() => deleteTask(index)}>Delete</button>
</li>
))}
</ul>
</div>
);
};
export default TodoApp;
Step 3: Style the App
To enhance the appearance of our app, create a TodoApp.css file in the src directory with the following styles:
.todo-app {
text-align: center;
font-family: Arial, sans-serif;
margin: 20px;
}
.input-section input {
padding: 10px;
width: 250px;
margin-right: 10px;
border: 1px solid #ccc;
border-radius: 5px;
}
.input-section button {
padding: 10px 20px;
background-color: #007BFF;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}
ul {
list-style: none;
padding: 0;
margin-top: 20px;
}
li {
display: flex;
align-items: center;
justify-content: center;
margin: 10px 0;
}
li span {
margin-right: 10px;
}
.completed span {
text-decoration: line-through;
color: gray;
}
li button {
margin-left: 10px;
padding: 5px 10px;
border: none;
border-radius: 5px;
cursor: pointer;
}
li button:nth-child(2) {
background-color: #28a745;
color: white;
}
li button:nth-child(3) {
background-color: #dc3545;
color: white;
}
Include this CSS file in your TodoApp.js component to apply the styles.
Step 4: Run and Test the App
Finally, test your app by running the development server:
npm start
In your browser, you can now add tasks, mark them as complete, and delete them. Everything should work seamlessly!
Conclusion
In this tutorial, we built a simple To-Do List App using React. We covered:
- Setting up a React project
- Creating the To-Do App structure
- Adding styles to the app
- Running and testing the app
If you found this tutorial helpful, feel free to share it with others and leave your feedback in the comments. Stay tuned for more exciting tutorials. Happy coding!
___________________________________________________________________________
Multiple-Choice Questions
- What command is used to create a new React app?
- a) npm create-react-app
- b) npx create-react-app
- c) create-react-app init
- d) npx init-react-app
- Which React hook is used to manage state in a functional component?
- a) useEffect
- b) useReducer
- c) useState
- d) useContext
- What is the purpose of the setTasks function in the TodoApp component?
- a) To reset the task list
- b) To update the task list state
- c) To render the tasks on the screen
- d) To delete tasks from the list
- What does the addTask function do?
- a) Deletes a task
- b) Adds a new task to the state
- c) Toggles a task's completion status
- d) Filters tasks based on completion
- Which CSS property is used to underline completed tasks?
- a) text-transform
- b) text-decoration
- c) font-style
- d) line-height
- How are tasks identified uniquely in the map function?
- a) By their text
- b) By the array index
- c) By the completed property
- d) By their priority
- Which function toggles the completion status of a task?
- a) addTask
- b) deleteTask
- c) toggleComplete
- d) updateTask
- What is the significance of the trim method in the addTask function?
- a) It checks if the input is empty
- b) It removes extra whitespace from the task input
- c) It converts the input to lowercase
- d) It clears the task input field
- What happens when the deleteTask function is called?
- a) The app crashes
- b) The task list is cleared
- c) The specified task is removed from the state
- d) The task is marked as incomplete
- What will happen if key is not provided in the map function?
- a) The app will run faster
- b) React will throw a warning in the console
- c) Tasks will not render
- d) The app will crash
Solutions
- b) npx create-react-app
- c) useState
- b) To update the task list state
- b) Adds a new task to the state
- b) text-decoration
- b) By the array index
- c) toggleComplete
- b) It removes extra whitespace from the task input
- c) The specified task is removed from the state
- b) React will throw a warning in the console
To Know more, Visite our Youtube Channel
