slug: react-fundamentals
title: "React — Components, Hooks, and State Management"
version: 1.0.0
description: "Master React's component model, hooks, and state management with hands-on exercises."
category: frameworks
tags: [react, javascript, frontend, components, hooks, state]
difficulty: beginner

xp:
  read: 10
  walkthrough: 30
  exercise: 20
  quiz: 15
  quiz-perfect-bonus: 10
  game: 25
  game-perfect-bonus: 15

time:
  quick: 5
  read: 15
  guided: 45

prerequisites: [typescript-fundamentals]
related: [react-native-fundamentals]

triggers:
  - "How do React hooks work?"
  - "What is useState and useEffect?"
  - "How do I manage state in React?"
  - "What are React components?"

visuals:
  diagrams: [diagram-mermaid, diagram-flow]
  quiz-types: [quiz-drag-order, quiz-timed-choice, quiz-fill-blank]
  game-types: [bug-hunt, speed-round]
  playground: javascript
  web-embeds: true

sources:
  - url: "https://react.dev"
    label: "React Official Docs"
    type: docs
  - url: "https://react.dev/reference/react"
    label: "React API Reference"
    type: docs