In this assignment, you will create a To-Do List web application using React. The goal is to develop a basic To-Do List app that allows users to add, complete, and delete tasks. This project is designed for beginners who are new to React and will help you learn the basics of setting up a React environment and managing the state of dynamic task lists.
-
Set up your development environment for React. You can use Create React App, which simplifies the setup process, or choose your own preferred method.
-
Create a new React project for the To-Do List app following the provided setup guide or tutorial.
-
Design the user interface for the To-Do List app. Create the following components within your React project:
- A component that displays the title of the app, e.g., "My To-Do List."
- A simple input field for entering new tasks.
- A list of tasks displayed as text items. Initially, the list can be empty.
-
Apply basic styling to the user interface to make it clear and user-friendly. You can use inline styles or simple CSS.
-
Implement the functionality to add tasks to the task list. Users should be able to enter a task description and click a button to add it to the list.
-
Implement the functionality to mark a task as completed. When a user clicks on a task, it should change its appearance to indicate completion.
-
Implement the functionality to delete a task. Provide a button or icon next to each task that allows users to delete a task when clicked.
- For styling, you can use basic CSS or inline styles directly within your React components.
- Keep your code simple and well-commented, as this assignment is intended for beginners.
- Don't worry about advanced concepts like React hooks or component separation; focus on building a functional To-Do List app to practice the basics.