React Context Learning Assignment

A hands-on learning project to understand React Context API and solve the prop drilling problem.

🎯 Learning Objectives

By completing this assignment, you will:

• Understand what prop drilling is and why it's a problem
• Learn how to use React's Context API to share state across components
• Practice creating Context Providers and consuming them with useContext
• Experience the difference between prop drilling and context-based state management

🚀 Getting Started

1. Install dependencies:

   npm install

2. Run the development server:

   npm run dev

3. Open the app: Navigate to http://localhost:3000

📋 The Current State (The Problem)

This app currently works perfectly! It has:

• Theme toggling (light/dark mode)
• Language switching (English/Spanish/French)

However, look at how the code is structured:

app/page.tsx (holds state)
    ↓ props
components/Layout.tsx (passes props through)
    ↓ props
components/Header.tsx (uses language)
components/Content.tsx (passes props through)
    ↓ props
components/SettingsPanel.tsx (uses all props)
components/Footer.tsx (uses theme & language)

Notice that Layout and Content components receive props they don't even use! They only pass them down to children. This is called prop drilling.

✅ Your Tasks

Task 0: Configure Tailwind Dark Mode (Already Done!)

The project is already configured with Tailwind CSS v4. In app/globals.css, the dark mode variant is configured to use class-based toggling:

@variant dark (&:where(.dark, .dark *));

This allows your app to control dark mode via state instead of system preferences.

Task 1: Create a Theme Context

1. Create a new file: context/ThemeContext.tsx
2. Create a ThemeContext using createContext
3. Create a ThemeProvider component that:
   • Manages theme state ('light' or 'dark')
   • Provides the theme value and setter function
4. Export a custom hook useTheme for easy consumption

Task 2: Create a Language Context

1. Create a new file: context/LanguageContext.tsx
2. Create a LanguageContext using createContext
3. Create a LanguageProvider component that:
   • Manages language state ('en', 'es', or 'fr')
   • Provides the language value and setter function
4. Export a custom hook useLanguage for easy consumption

Task 3: Wrap Your App with Providers

1. Update app/layout.tsx to wrap the app with both providers
2. Make sure to mark the layout as 'use client' since Context requires client-side rendering

Task 4: Replace Prop Drilling with useContext

Update these components to use your new context hooks:

1. app/page.tsx - Remove state management (now in Context)
2. components/Layout.tsx - Remove all props, add useEffect to apply dark class to html element
3. components/Header.tsx - Use useLanguage() instead of props
4. components/Content.tsx - Remove all props
5. components/SettingsPanel.tsx - Use useTheme() and useLanguage() instead of props
6. components/Footer.tsx - Use useTheme() and useLanguage() instead of props

Important: In Layout.tsx, you'll need to use useEffect to apply/remove the dark class to document.documentElement based on the theme state. This makes Tailwind's dark: classes work with your app state instead of system preferences.

Task 5: Clean Up

• Remove all unnecessary prop types
• Delete TODO comments once you've addressed them
• Test that theme and language switching still works!

🎓 Bonus Challenges (Optional)

If you finish early or want to deepen your understanding:

1. Combine Contexts: Create a single AppContext that manages both theme and language
2. Persist State: Use localStorage to remember the user's theme and language preferences
3. Add More Features: Add a new piece of global state (e.g., username, notification settings)
4. TypeScript Refinement: Make the context types more robust with proper TypeScript patterns

📚 Resources

• React Context Documentation
• useContext Hook
• When to use Context

✨ Expected Outcome

After completing this assignment:

• No more prop drilling through intermediate components
• Cleaner component props (only what they actually need)
• Theme and language are accessible anywhere in the component tree
• The app still functions exactly the same way!

🔍 Need Help?

This project includes several resources to guide you:

• HINTS.md - Progressive hints for each task if you get stuck
• SOLUTION.md - Complete working solution with detailed explanations
• WHY-CONTEXT.md - Deep dive into why Context exists and when to use it
• Code comments - Look for // TODO: and // TASK: comments in the code

Recommended approach:

1. Try to solve each task on your own first
2. If stuck, check HINTS.md for guidance
3. Only look at SOLUTION.md after completing or if completely blocked
4. Read WHY-CONTEXT.md to understand the deeper concepts

Good luck! 🚀