Skip to content

Latest commit

 

History

History
83 lines (66 loc) · 2.06 KB

README.md

File metadata and controls

83 lines (66 loc) · 2.06 KB
Raw

React To-Do Application

This is a simple to-do list application built using React and Vite. It allows users to add, edit, and delete tasks. Tasks can also be filtered by their completion status: All, Active, or Completed.

Features

  • Add new tasks
  • Mark tasks as complete or incomplete
  • Edit existing tasks
  • Delete tasks
  • Filter tasks by status: All, Active, or Completed
  • Responsive design

Project Structure

.
├── node_modules/
├── public/
├── src/
│   ├── assets/
│   ├── components/
│   │   ├── FilterButton.jsx
│   │   ├── Form.jsx
│   │   ├── Todo.jsx
│   ├── App.jsx
│   ├── index.css
│   ├── main.jsx
├── .gitignore
├── eslint.config.js
├── index.html
├── package-lock.json
├── package.json
├── README.md
├── vite.config.js

Components

  • App.jsx: The main component that manages the state of the tasks and renders the to-do list.
  • FilterButton.jsx: A button component used to filter tasks based on their status.
  • Form.jsx: A form component for adding new tasks.
  • Todo.jsx: A component that renders individual tasks with options to edit, delete, and mark them as complete.

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 the dependencies:

    npm install

  4. Start the development server:

    npm run dev

  5. Open the application in your browser:

    http://localhost:5173

Technologies Used

  • React: A JavaScript library for building user interfaces.
  • Vite: A fast build tool for modern web development.
  • nanoid: A library for generating unique IDs.
  • CSS: For styling the components and layout.

Scripts

  • npm run dev: Starts the development server.
  • npm run build: Builds the application for production.
  • npm run lint: Runs the linter to check for any code errors.