🟢 Introduction to React

🟢 Understand what React is

🟢 Set up development environment (Node.js, npm, Vite or CRA)

🟢 Learn JSX syntax

🟢 Understand Virtual DOM

📌 Project: Create a Static Profile Page with JSX and Components

🟢 Components and Props

🟢 Learn about functional vs class components

🟢 Create and use components

🟢 Pass and validate props

🟢 Compose multiple components

📌 Project: Mini Product Catalog (with Props)

🟢 State and Events

🟢 Learn useState hook

🟢 Handle user input and events

🟢 Implement conditional rendering

📌 Project: Build a Team Members Dashboard with Dynamic Props and Composition

🟢 State and Events

🟢 Learn useState hook

🟢 Handle user input and events

🟢 Implement conditional rendering

📌 Project: Build a Team Members Dashboard with Dynamic Props and Composition

🟢 Forms and Controlled Components

🟢 Understand controlled vs uncontrolled components

🟢 Use form elements like input, textarea, select

🟢 Handle form submission and basic validation

📌 Project: Create a User Registration Form

🟢 Use Effect and Lifecycle

🟢 Learn useEffect hook

🟢 Implement cleanup functions

🟢 Understand React lifecycle analogy

📌 Project: Develop an Interactive To-Do List with Editing and Filtering

🟢 Lifting State Up and Prop Drilling

🟢 Share state between components

🟢 Use callback props

🟢 Understand prop drilling

📌 Project: Develop a Temperature Converter Program

🟢 Context API

🟢 Create and use context

🟢 Use useContext hook

🟢 Avoid prop drilling using context

🟢 React Router

🟢 Install and set up React Router

🟢 Define Routes and Links

🟢 Use useNavigate

🟢 Implement nested routes and 404 pages

📌 Project: Feedback Tracker App with Category Filtering

🟢 Advanced Topics and Deployment

🟢 Understand custom hooks

🟢 Create and use a custom hook

📌 Project: Create a Custom Hook for Form Validation or API Fetching

🟢 Performance Optimization

🟢 Use React.memo, useMemo, and useCallback

🟢 Implement lazy loading and Suspense

🟢 Apply code splitting

📌 Project: Create a Product List with Lazy Details Panel

🟢 Deploying React Apps

🟢 Learn the build process

📌 Project: Build a Kanban Board where users can:

Create, edit, delete projects, columns, and tasks

Drag and drop tasks across columns (like Trello)

🟢 Deploy to Netlify, Vercel, or GitHub Pages

🟢 Use environment variables

📌 Project: Dashboard App with Lazy-Loaded Pages, Memoized Components, and Deployment

📌 Industry Project 1: Portfolio Website

Build a personal portfolio website using HTML, CSS, and JavaScript to showcase your skills, projects, and contact details.

📌 Industry Project 2: Online Food Menu

Create a responsive restaurant menu page where users can browse food items and filter them by category (e.g., starters, mains, desserts).

🟢 Install GitHub Copilot in VS Code

🟢 Use Copilot to scaffold form handling logic

🟢 Practice prompting Copilot to generate loops and render logic

🟢 Use Copilot to write repetitive JSX or styles faster