Module 1: Introduction to React
- What is React? Why React?
- SPA (Single Page Application) Concept
- Virtual DOM vs Real DOM
- Component-based Architecture
- Setting up Development Environment (Node, VS Code)
- Create React App / Vite Setup
Module 2: JSX & Rendering
- JSX Syntax & Rules
- Rendering Elements
- Expressions in JSX
- Styling in React (CSS, Inline, Modules)
- Lists & Keys
- Conditional Rendering Techniques
Module 3: Components
- Function vs Class Components
- Component Lifecycle (Overview)
- Props & PropTypes
- Children props
- Reusable UI Components
Module 4: State Management in React
- useState Hook (Basic to Advanced)
- State batching & async behavior
- Lifting State Up
- Controlled vs Uncontrolled Components
- Forms & Form Validation
Module 5: React Hooks
- Rules of Hooks
- useEffect (Lifecycle: mount/update/unmount)
- useRef (DOM access & mutable data)
- useMemo & useCallback (Performance optimization)
- Custom Hooks
- Avoiding unnecessary re-renders
Module 6: React Router
- Routing concepts in SPA
- Installation & Setup
- Navigation, Link, NavLink
- Route Parameters & Query Params
- Protected Routes (Auth-based)
- Lazy Loading of pages
Module 7: API Integration
- Fetch API / Axios
- Calling REST APIs
- Handling Loading & Error states
- Pagination and Filtering
- Debouncing & Throttling
Module 8: Context API & State Management
- Prop drilling & solution
- Creating Context for Global State
- useReducer for complex state
- When to choose Context vs other state solutions
Module 9: Redux Toolkit
- Why Redux? When to use it?
- Store, Actions, Reducers
- CreateSlice, Async Thunks
- DevTools & middleware concept
- Best practices with RTK Query (optional)
Module 10: Performance Optimization
- Memoization techniques
- React Profiler
- Code splitting & lazy loading
- Suspense & Error Boundaries
Module 11: UI Libraries & Styling
- Material UI / Ant Design / Tailwind (overview)
- Component patterns & design systems
- Responsive layouts
Module 12: Form Handling (Advanced)
- Formik / React Hook Form
- Yup validation
- Dynamic form controls
Module 13: Authentication & Security
- Login / Signup UI
- Session management & JWT handling (Frontend flow)
- Protected routes & role-based access
- Storing tokens securely (localStorage / HttpOnly cookie discussion)
Module 14: Testing
- Unit testing with Jest
- Component testing with React Testing Library
- Snapshot testing
Module 15: Real-Time Features
- WebSockets / Socket.IO Basics (Frontend usage)
- Notifications / Live updates
Module 16: Integration with Backend
- Connecting with Node.js / GraphQL backend
- Folder structure for large apps
- Services & API abstraction
Module 17: Deployment
- Builds & Optimization
- Deploying to Netlify / Vercel / S3
- Environment Variables in Prod
- Basic CI/CD introduction
Final Project (Capstone)
You will build a complete web application:
✔ Authentication
✔ CRUD screens with forms
✔ API Integration
✔ Routing + Protected Routes
✔ Scalable folder structure
✔ Deployment + Documentation