ReactJS – Learn From Scratch

Module 1: Foundations of Web and React

1. What is a Website?
   • Browser, HTML, CSS, JS — like bricks, paint, and brain of a house.
2. What is JavaScript?
   • The language of interaction. Add click, type, move logic.
3. Why React?
   • From dull pages to LEGO-style smart websites.
4. Setting Up Your Playground
   • Install Node.js, VS Code, Create React App / Vite

Module 2: Getting Started with React

5. Understanding Components
   • Your app is made of blocks (Header, Button, Card)
6. JSX — The Magic HTML Inside JS
   • Write <div>Hello</div> inside a JS function
7. Props — Sending Gifts to Components
   • Reuse same component with different data
8. State — Remembering Things
   • Count clicks, remember input text
9. Event Handling
   • Click, type, hover — React reacts!

Module 3: Smart React Apps

10. Lists & Keys
    • Display shopping list or todo list
11. Forms & Controlled Inputs
    • User types, we remember what they typed
12. useEffect — Doing Things on Page Load
    • API call, show timer, update title
13. Conditional Rendering
    • Show/hide blocks using if, ?, &&
14. Lifting State Up
    • Let parent know when child changes

Module 4: Thinking Like a React Developer

15. React Thinking — State Tree & Data Flow
    • Top to bottom data, bottom to top events
16. Component Folder Structure
    • Keep code neat like school notebooks
17. Debugging with Console & React DevTools

Module 5: Mini Projects for Practice

18. Counter App
19. To-Do App
20. Quiz App
21. Weather App (with basic API)

Will introduce fetch() with a note: “We’ll explore APIs and servers in detail in the backend series.”

Module 6: What’s Next?

22. What Are Hooks Really?
23. React Router — Multi-Page UI
24. Intro to Backend & Database (Optional Prep)
25. Your Roadmap to Become a Pro React Developer