Block 04 · COMPONENT PATH
React
Ten imported modules covering JSX, components, state, effects, context, refs, and reusable hooks.
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.
LessonQuizExerciseProject - 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.
LessonQuizExerciseProject - Module 034 activities
Components & Props
React apps are trees of components. Each component is a function that takes `props` (inputs) and returns JSX (output).
LessonQuizExerciseProject - 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.
LessonQuizExerciseProject - Module 054 activities
Events & Forms
Handling events in React uses `on`-prefixed props (`onClick`, `onChange`, `onSubmit`) that take a function, not a string.
LessonQuizExerciseProject - Module 064 activities
Lists & Keys
Rendering a list uses `.map()` to turn an array into an array of JSX elements, each needing a unique `key` prop.
LessonQuizExerciseProject - 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.
LessonQuizExerciseProject - Module 084 activities
useContext & useRef
Context solves prop drilling — passing data through many components that don't need it, just to reach one that does.
LessonQuizExerciseProject - Module 094 activities
Advanced Hooks
`useReducer` is for complex state with multiple related actions — often cleaner than several separate `useState` calls.
LessonQuizExerciseProject - Module 104 activities
Custom Hooks & Patterns
Extract stateful logic into a reusable hook function. It must start with `use`, so React's rules-of-hooks tooling recognizes it.
LessonQuizExerciseProject - Module 115 activities
State Architecture
Choose local, lifted, reducer, context, URL, and server state deliberately instead of storing everything in one component.
LessonQuizExerciseReviewProject - Module 125 activities
Data Fetching & Server State
Model loading, success, empty, stale, and error states while preventing races and unnecessary requests.
LessonQuizExerciseReviewProject - Module 135 activities
React Testing
Test behavior from the user perspective with accessible queries, interactions, async assertions, and controlled dependencies.
LessonQuizExerciseReviewProject - Module 145 activities
Performance & Accessibility
Measure before optimizing, reduce avoidable renders, lazy-load heavy work, and build keyboard- and screen-reader-friendly components.
LessonQuizExerciseReviewProject - Module 155 activities
React Mastery Capstone
Combine component architecture, state, data, forms, accessibility, testing, performance, and deployment readiness.
LessonQuizExerciseReviewProject