Welcome to the To-Do List App project! This repository is designed for students to practice their React skills by building a functional To-Do list application. The tasks are divided into three levels: Basic, Medium, and Hard. Each level introduces new concepts and challenges to enhance your understanding of React.
To get started with this project, follow these steps:
- Fork this repository to your GitHub account.
- Clone the repository to your local machine: git clone https://github.com/your-username/todo-list-app.git 3. Install dependencies: cd todo-list-app npm install 4. Start the development server: npm run dev
In the Basic level, you will implement the core functionalities of the To-Do list.
- Use states to manage to-do's.
- Implement handleAddTask function to add new tasks.
- Implement handleToggleTask function to mark tasks as completed.
- Implement handleDeleteTask function to remove tasks.
In the Medium level, you will refactor your code to improve its structure and readability.
- Extract the to-do's list into a TaskList component.
- Extract the task display into a TaskItem component.
- Pass functions as props to manage states from child components.
In the Hard level, you will implement persistence to save tasks in localStorage.
- Implement useEffect to store tasks in localStorage.
- Retrieve tasks from localStorage on component mount.
Happy coding! 🎉