React Demo 3 - To Do List App

A dynamic To Do List application built with React that allows users to manage their tasks with persistent storage.

Features

• Add new tasks to your list
• Mark tasks as complete/incomplete
• Delete completed tasks
• Automatic saving to localStorage
• Responsive design

Demo

Online Demo

How to Use

1. Enter a task in the input field
2. Click "Add" or press Enter to add the task
3. Check the checkbox to mark a task as complete
4. Click "Delete" to remove completed tasks

Project Structure

• App.jsx: Main component, handles state management and localStorage
• NewToDoForm.jsx: Form component for adding new tasks
• ToDoList.jsx: Component for rendering the list of tasks
• ToDoItem.jsx: Individual task component
• styles.css: Global styles for the application

Technologies Used

• React 18
• Vite (for build tooling and development server)
• localStorage API for data persistence
• CSS for styling
• JavaScript ES6+
• npm for package management

Development

This project uses Vite for fast development with HMR (Hot Module Replacement) and React for the UI components. The state management is handled through React's useState and useEffect hooks.

To run the project locally:

npm install
npm run dev