Course Curriculum
MODULE 1: Foundations & Setup (Week 1)
- Introduction to React and Component-Based Architecture
- Understanding Virtual DOM and React's Rendering
- Development Environment Setup
- Node.js, npm, and Package Management
- Create React App and Vite
- Project Structure and File Organization
- Introduction to Module Bundlers (Webpack basics)
- Developer Tools and Browser Extensions
Hands-on Lab: Set up development environment and create first React project
MODULE 2: JSX & React Components (Week 2)
- Understanding JSX Syntax and Expressions
- JSX vs HTML: Key Differences
- Embedding JavaScript in JSX
- Functional Components Creation
- Component Composition and Reusability
- Fragment and React.Fragment
- Conditional Rendering Techniques
- Rendering Lists with Keys
Project: Build a reusable component library (Cards, Buttons, Alerts)
MODULE 3: Props & Component Communication (Week 3)
- Understanding Props in Depth
- Passing Data from Parent to Child
- Props Destructuring Patterns
- Default Props and PropTypes
- Children Props and Composition
- Render Props Pattern
- Lifting State Up
- Callback Functions as Props
Project: Build a product listing page with filtering
MODULE 4: State Management with useState (Week 4)
- Understanding Component State
- useState Hook: Syntax and Usage
- Managing Multiple State Variables
- State with Objects and Arrays
- Immutability and State Updates
- Controlled vs Uncontrolled Components
- Form Handling with State
- Input Types: Text, Checkbox, Radio, Select
Project: Interactive form with validation
MODULE 5: useEffect & Side Effects (Week 5)
- Understanding Side Effects in React
- useEffect Hook: Syntax and Dependencies
- Component Lifecycle with Hooks
- Cleanup Functions
- Fetching Data from APIs
- Loading States and Error Handling
- Async/Await with useEffect
- Preventing Memory Leaks
- Custom Abort Controllers
Project: Movie search app with API integration
MODULE 6: Advanced Hooks (Week 6)
- useRef Hook: DOM Access and Persisting Values
- useContext for Global State
- Context API: Provider and Consumer
- Avoiding Prop Drilling
- useReducer for Complex State Logic
- Reducer Pattern and Actions
- useMemo for Performance Optimization
- useCallback for Memoizing Functions
- When to Use Which Hook
Project: Theme switcher with Context API
MODULE 7: React Router (Week 7)
- Introduction to Client-Side Routing
- React Router v6 Setup
- Route, Routes, and BrowserRouter
- Link and NavLink Components
- URL Parameters and Dynamic Routes
- Nested Routes and Outlet
- Programmatic Navigation with useNavigate
- Protected Routes and Authentication
- 404 Pages and Error Handling
- Query Parameters with useSearchParams
Project: Multi-page e-commerce navigation
MODULE 8: Class Components & Legacy Patterns (Week 8)
- Class Component Syntax
- Constructor and State Initialization
- Lifecycle Methods: componentDidMount, componentDidUpdate
- componentWillUnmount for Cleanup
- this Keyword in Class Components
- Event Handling in Classes
- Converting Class to Functional Components
- Higher-Order Components (HOCs)
- Error Boundaries
Hands-on Lab: Refactor class components to hooks
MODULE 9: Advanced Optimization & Custom Hooks (Week 9)
- Performance Profiling with React DevTools
- React.memo for Component Memoization
- Lazy Loading with React.lazy and Suspense
- Code Splitting Strategies
- Creating Custom Hooks
- Custom Hook Patterns: useFetch, useLocalStorage, useDebounce
- Testing Custom Hooks
- Best Practices for Hook Design
Project: Build a library of 5 custom hooks
MODULE 10: State Management & Deployment (Week 10)
- Introduction to Redux (concepts)
- Redux Toolkit Basics
- Zustand for Lightweight State Management
- Choosing the Right State Management Solution
- Testing React Components with Jest
- React Testing Library Basics
- Building for Production
- Environment Variables
- Deployment to Vercel/Netlify
Final Project: Deploy complete React application
CAPSTONE PROJECT (Throughout Weeks 8-10)
Build a complete single-page application:
- Option A: E-commerce Store with Shopping Cart
- Option B: Social Media Dashboard
- Option C: Task Management Application
- Option D: Recipe Finder with API Integration
Requirements
- Multiple routes and navigation
- State management (Context or Redux)
- API integration
- Responsive design
- Custom hooks implementation
- Deployed to production