A beginner-friendly React Todo App built to understand core React concepts by working on a real-world project.

This project demonstrates how to manage state, pass data between components, handle CRUD operations, and persist data using localStorage.

Live Project: https://react-todo-six-virid.vercel.app/

• Add new todos
• Edit existing todos
• Delete todos
• Controlled form inputs
• Conditional rendering (view / edit mode)
• Data persistence using localStorage

• React component structure
• useState hook
• useEffect hook
• Props and parent–child communication
• Lifting state up
• UI state vs application state
• Immutability in React

• React
• JavaScript (ES6+)
• CSS

src/
│── App.jsx
│── TodoApp.jsx
│── TodoInput.jsx
│── TodoList.jsx
│── App.css
│── index.js

1. Clone the repository

   git clone https://github.com/jdcodebase/react-todo-app

2. Install dependencies

   npm install

3. Start the development server

   npm run dev

This project is part of the Web Development Series by JDCodebase, where we cover:

• HTML
• CSS
• JavaScript
• React
• MERN Stack

If you found this project helpful:

• ⭐ Star the repository
• 📺 Subscribe on YouTube
• 🔁 Share with others

Happy Coding 🚀 JDCodebase