React Todo App 📝

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 Demo

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

---

✨ Features

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

---

🧠 Concepts Covered

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

---

🛠️ Tech Stack

• React
• JavaScript (ES6+)
• CSS

---

📁 Project Structure

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

---

🚀 Getting Started

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

---

📚 Part of Web Development Series

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

• HTML
• CSS
• JavaScript
• React
• MERN Stack

---

🙌 Support

If you found this project helpful:

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

Happy Coding 🚀 JDCodebase