🧩 Week 12 – React Fundamentals

🎯 Goal: Understand the fundamentals of React, component-based architecture, and manage state and events.

📚 Daily Breakdown

—

✅ Day 1 – What is React? Setup via Vite or CRA

🧠 Topics:

• Why React? SPA vs MPA
• React DOM vs Traditional DOM
• Install Node.js + npm
• Create a React app using Vite or Create React App (CRA)
• File structure overview

🛠 Activities:

• Setup development environment
• Run first React app ("Hello React")
• Customize default files

—

✅ Day 2 – JSX, Functional Components

🧠 Topics:

• What is JSX and why it looks like HTML
• JSX rules (only one parent, expressions in {})
• Functional components syntax
• Component naming conventions

🛠 Activities:

• Create Header, Footer, and Content components
• Use them in App.js
• Use props to pass title from App to Header

—

✅ Day 3 – Props and State

🧠 Topics:

• What are props? Data from parent to child
• Reusable components using props
• What is state?
• useState hook for state management

🛠 Activities:

• Create a Counter component using useState
• Update state with button click
• Pass props to reusable Button components

—

✅ Day 4 – useEffect Hook

🧠 Topics:

• What is useEffect?
• useEffect for side-effects like API calls, logging
• Dependency array: \[], \[var], no array
• Cleanup function

🛠 Activities:

• Create a component that logs every render
• useEffect to fetch JSON Placeholder posts
• useEffect with interval or timeout (auto counter)

—

✅ Day 5 – Conditional Rendering, Lists & Keys

🧠 Topics:

• if-else, ternary, && rendering
• Loop through arrays using map()
• Key prop in lists
• Conditional components (show/hide sections)

🛠 Activities:

• Render a post list from JSON array
• Show “No posts found” if array is empty
• Highlight active post using conditional class

—

✅ Day 6 – Handling Forms

🧠 Topics:

• Forms in React vs HTML
• Controlled vs uncontrolled components
• useState to manage input values
• Form submission handling

🛠 Activities:

• Build a feedback/contact form
• Validate inputs (length check)
• Display submitted data on screen

—

✅ Day 7 – Mini Project: Task Manager App

🎯 Build a basic Task Manager (To-do List):

🛠 Features:

• Add new task (input + button)
• Mark as completed / delete task
• Show count of total & completed tasks
• Data stored in component state

📈 Extra:

• Optional: Save tasks to localStorage
• Optional: Filter All / Completed / Pending

—

Would you like to proceed with 🧩 Week 13 – React Routing + API Integration next?