coderAdityasen/to-do-App

React + Vite

This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.

Currently, two official plugins are available:

• @vitejs/plugin-react uses Babel for Fast Refresh
• @vitejs/plugin-react-swc uses SWC for Fast Refresh

React Todo List App

Welcome to the React Todo List App! This application allows you to manage your tasks in a simple and organized way.

Getting Started

Follow these steps to set up and run the project on your local machine.

Prerequisites

Make sure you have Node.js and npm installed.

Installation

1. Clone the repository: git clone https://github.com/your-username/react-todo-app.git
2. Navigate to the project directory: cd react-todo-app
3. Install dependencies: npm install

Running the App

1. Start the development server: npm run dev
2. Open your web browser and go to: http://localhost:5173

Components Overview

The app consists of the following components:

• App: The main component that sets up the app's structure and context.
• AddTodo: Allows you to add new tasks to the todo list.
• TodoList: Displays the list of tasks.
• Todo: Represents an individual task with options to mark as finished, edit, and delete.

How to Use

1. Click the "Add" button in the "AddTodo" section to add a new task.
2. Use the checkbox in each task to mark it as finished.
3. Click the "edit" button to edit a task's text. Press "save" to confirm the changes.
4. Click the "delete" button to remove a task from the list.

Project Structure

The project follows this structure:

• src
  • components
    • AddTodo: Component for adding new tasks.
    • TodoList: Component for displaying tasks.
    • Todo: Component for individual tasks.
    • context: Contains the TodoContext for sharing data.

Conclusion

Thank you for exploring the React Todo List App! This project is a great way to practice your React skills and learn about state management using context.

If you have any questions or need assistance, feel free to reach out.

Happy coding!