Module Overview
Practical, hands-on introduction to React: components, props, state, hooks, lifting state, component composition, and best practices for readable components. Focus on building maintainable UI.
Learning Objectives
- Create React components using functional components and hooks (useState, useEffect).
- Structure an app with component composition and prop-driven design.
- Manage side effects and lifecycle concerns using hooks.
Lesson-by-Lesson Breakdown
JSX and functional component patterns.
Props, state, and uni-directional data flow.
useEffect and effect dependency reasoning.
Component composition and prop drilling vs context.
Forms and controlled components.
Simple testing concepts and component debugging tips.
Hands-on Activities & Deliverables
Activities
Build a React quiz/flashcard app with progress tracking and local persistence.
📦 Deliverable
Live preview link (or local instructions) + repo and short demo video.
Required Tools & Readings
React docs excerpts, starter template.
Assessment & Rubric
- Component design40%
- State management correctness30%
- UX polish and code readability30%
Prerequisites
Basic JS (Module 2 recommended).
Parent-Friendly Value
Students will be able to build interactive, component-based applications that can scale into real projects.