Week 5: React Router & State Management

Frontend

Implementing navigation with React Router and managing application state with Context API and Redux.

Learning Objectives

Detailed Schedule

Session 1: React Router (1 hour)

Routing Basics (25 minutes)

  • Single Page Application (SPA) concepts
  • React Router setup and configuration
  • Route components and navigation
  • URL parameters and query strings

Advanced Routing (20 minutes)

  • Nested routes and layouts
  • Protected routes and authentication
  • Route guards and redirects

Practice Exercise (15 minutes)

Build a multi-page application with React Router

Session 2: State Management (1 hour)

Context API (25 minutes)

  • Global state management
  • Context providers and consumers
  • useContext hook
  • State sharing across components

Redux Toolkit (20 minutes)

  • Redux store setup
  • Actions and reducers
  • useSelector and useDispatch hooks

Practice Exercise (15 minutes)

Implement state management for a shopping cart application

Session 3: Advanced React Patterns (1 hour)

Custom Hooks (25 minutes)

  • Creating reusable custom hooks
  • Hook composition and patterns
  • Custom hooks for API calls
  • Hook testing and debugging

Performance Optimization (20 minutes)

  • React.memo and useMemo
  • useCallback for function optimization
  • Code splitting and lazy loading

Practice Exercise (15 minutes)

Create custom hooks and optimize component performance

Key Concepts

React Router

  • • BrowserRouter and Routes
  • • Route parameters and query strings
  • • Nested routing and layouts
  • • Navigation guards and redirects

Context API

  • • createContext and Provider
  • • useContext hook
  • • Context composition
  • • Performance optimization

Redux Toolkit

  • • configureStore and createSlice
  • • Actions and reducers
  • • useSelector and useDispatch
  • • Async actions with createAsyncThunk

State Patterns

  • • Local vs global state
  • • State persistence
  • • State normalization
  • • Error handling patterns

Hands-on Activities

Activity 1: Multi-Page Navigation

Build a multi-page application with React Router including home, about, and contact pages.

React Router Navigation Route Parameters

Activity 2: Theme Context

Create a theme context that allows switching between light and dark modes.

Context API useContext Theme Switching

Activity 3: Shopping Cart with Redux

Implement a shopping cart using Redux Toolkit with add, remove, and update functionality.

Redux Toolkit Slices State Management

Activity 4: User Authentication Flow

Build a complete authentication system with protected routes and user state management.

Protected Routes Auth Context Route Guards

Weekly Project: Enhanced Social Media Dashboard

Project Overview

Enhance the social media dashboard with multi-page navigation, global state management, and advanced features.

New Features:

  • Multi-page navigation (Home, Profile, Settings)
  • Global theme switching (light/dark mode)
  • User authentication and protected routes
  • Global state for posts and user data
  • Real-time notifications system
  • Advanced filtering and search

Technical Requirements:

  • React Router for navigation
  • Context API for theme and auth
  • Redux Toolkit for posts and user data
  • Protected route implementation
  • State persistence with localStorage
  • Responsive design across pages

Enhanced Project Structure: 

src/
├── components/
│   ├── Layout/
│   │   ├── Header.jsx
│   │   ├── Sidebar.jsx
│   │   └── Footer.jsx
│   ├── Pages/
│   │   ├── Home.jsx
│   │   ├── Profile.jsx
│   │   └── Settings.jsx
│   └── Shared/
│       ├── Post.jsx
│       ├── Comment.jsx
│       └── ThemeToggle.jsx
├── context/
│   ├── ThemeContext.jsx
│   └── AuthContext.jsx
├── store/
│   ├── store.js
│   └── slices/
│       ├── postsSlice.js
│       └── userSlice.js
├── hooks/
│   └── useLocalStorage.js
└── App.jsx

Assessment Criteria

Technical Skills (60%)

  • React Router implementation (20%)
  • Context API usage (15%)
  • Redux Toolkit integration (15%)
  • State management patterns (10%)

Project Quality (40%)

  • Navigation and routing (15%)
  • State management architecture (15%)
  • Code organization and structure (10%)

Teaching Resources

Code Examples:

Additional Resources: