🧠 My React Learning Roadmap

I'm learning React by building components from scratch, one step at a time — from the basics to advanced concepts. This roadmap helps me stay consistent and track progress.

---

🌱 Level 1: Basic Components (Props + JSX)

Learning to build simple, reusable UI components

• ✅ Button component (with props)
• ✅ Alert/Message display
• ✅ Avatar (image + name)
• Badge (dynamic label)
• Card (title, image, description)

---

🌿 Level 2: Interactivity (State + Events)

Understanding useState and handling user actions

• Counter (increment/decrement)
• Toggle switch (on/off)
• Like button (heart icon toggle)
• Input Mirror (input box, live text below)
• Dropdown menu (show/hide items)
• Tabs (switching content)

---

🌳 Level 3: Forms & Inputs

Working with form elements and controlled components

• Controlled input field
• Login form with validation
• Todo item (checkbox, delete)
• Search bar with filter
• Rating stars (1 to 5)

---

🌲 Level 4: Lists & Props Composition

Passing props, rendering lists, lifting state

• Todo list (add/remove/edit)
• Accordion (expand/collapse)
• Image gallery
• Product cards grid (from JSON)
• Comment box (text area + post)

---

🔥 Level 5: Hooks & API Integration

Learning useEffect, data fetching, and custom hooks

• Weather widget (API)
• GitHub profile card (fetch + render)
• Theme switcher (light/dark using Context)
• Stopwatch/Timer (with intervals)
• Pagination component (page through data)

---

💡 Advanced Challenges (Bonus)

Building real-world, interactive features

• Modal / Popup component
• Toast notifications
• Multistep form wizard
• Drag and drop list
• Mini Trello (Kanban board)

---

📌 Goal

• ✅ Build one component per day
• ✅ Keep everything in a /components folder
• ✅ Use props, state, and hooks correctly
• ✅ Write clean, reusable code

---

🚀 In Progress

Check back as I update this roadmap and check off components I've completed.

Feel free to fork this if you're learning React too!