Before you begin
Prerequisites
Hidden — select the eye to show
Block 04 · COMPONENT PATH
React
Ten imported modules covering JSX, components, state, effects, context, refs, and reusable hooks.
15 modules65 activitiesAbout 45 hoursIntermediate to advancedLesson → Quiz → Exercise → Project
What you will master
Course outcomes
Hidden — select the eye to show
Final proof of skill
Mastery capstone
Hidden — select the eye to show
Completion standard
Earn the Mastery title
Hidden — select the eye to show
Progress one module at a time
Course map
- Module 014 activities
Getting Started with React
React is a JavaScript library by Meta for building user interfaces, using a component-based architecture — each piece of UI is an isolated, reusable function. Key ideas: component tree, Virtual DOM, declarative rendering, one-way data flow.
LessonQuizExerciseProjectStart module - Module 024 activities
JSX & Rendering
JSX is a syntax extension that lets you write HTML-like markup inside JavaScript. Babel compiles it to React.createElement() calls.
LessonQuizExerciseProjectStart module - Module 034 activities
Components & Props
React apps are trees of components. Each component is a function that takes props (inputs) and returns JSX (output).
LessonQuizExerciseProjectStart module - Module 044 activities
State & useState
State is data that changes over time and lives inside a component. When state changes, React re-renders the component with fresh values.
LessonQuizExerciseProjectStart module - Module 054 activities
Events & Forms
Handling events:
LessonQuizExerciseProjectStart module - Module 064 activities
Lists & Keys
Rendering lists:
LessonQuizExerciseProjectStart module - Module 074 activities
useEffect
A side effect is anything that reaches outside a component — fetching data, setting timers, updating the document title, or subscribing to events.
LessonQuizExerciseProjectStart module - Module 084 activities
useContext & useRef
Context solves prop drilling — passing data through many components that don't need it.
LessonQuizExerciseProjectStart module - Module 094 activities
Advanced Hooks
useReducer — for complex state with multiple actions, cleaner than several useState calls:
LessonQuizExerciseProjectStart module - Module 104 activities
Custom Hooks & Patterns
Extract stateful logic into reusable hook functions. Must start with "use".
LessonQuizExerciseProjectStart module - Module 115 activities
State Architecture
Choose local, lifted, reducer, context, URL, and server state deliberately instead of storing everything in one component.
LessonQuizExerciseReviewProjectStart module - Module 125 activities
Data Fetching & Server State
Model loading, success, empty, stale, and error states while preventing races and unnecessary requests.
LessonQuizExerciseReviewProjectStart module - Module 135 activities
React Testing
Test behavior from the user perspective with accessible queries, interactions, async assertions, and controlled dependencies.
LessonQuizExerciseReviewProjectStart module - Module 145 activities
Performance & Accessibility
Measure before optimizing, reduce avoidable renders, lazy-load heavy work, and build keyboard- and screen-reader-friendly components.
LessonQuizExerciseReviewProjectStart module - Module 155 activities
React Mastery Capstone
Combine component architecture, state, data, forms, accessibility, testing, performance, and deployment readiness.
LessonQuizExerciseReviewProjectStart module