React
Build accessible, maintainable interfaces by understanding React’s rendering model and practicing product-level delivery.
Curriculum
Phase 1Think in Components0/3
Phase 2Control Data Flow0/3
Phase 3Build a Complete Interface0/3
Phase 4Prove and Ship0/3
JSX and Components
JSX expressions and attributes
Understand the building blocks and choices behind JSX and Components.
0 of 6 completeFunction component boundaries
Use this part of JSX and Components in a realistic workflow.
0 of 5 completeReusable component trees
Handle the boundaries and prove the result for JSX and Components.
0 of 7 completeProps and Composition
Values and callback props
Understand the building blocks and choices behind Props and Composition.
0 of 6 completeChildren and content slots
Use this part of Props and Composition in a realistic workflow.
0 of 5 completeSmall component contracts
Handle the boundaries and prove the result for Props and Composition.
0 of 7 completeState and Events
Event handler functions
Understand the building blocks and choices behind State and Events.
0 of 5 completeuseState functional updates
Use this part of State and Events in a realistic workflow.
0 of 5 completeDerived values during render
Handle the boundaries and prove the result for State and Events.
0 of 6 completeRendering Decisions
Conditional screen states
Understand the building blocks and choices behind Rendering Decisions.
0 of 6 completeArray mapping and filtering
Use this part of Rendering Decisions in a realistic workflow.
0 of 5 completeStable item keys
Handle the boundaries and prove the result for Rendering Decisions.
0 of 7 completeState Architecture
Source versus derived state
Understand the building blocks and choices behind State Architecture.
0 of 5 completeReducer transitions
Handle the boundaries and prove the result for State Architecture.
0 of 7 completeEffects and Synchronization
External system synchronization
Understand the building blocks and choices behind Effects and Synchronization.
0 of 5 completeComplete dependency lists
Use this part of Effects and Synchronization in a realistic workflow.
0 of 5 completeCleanup on change
Handle the boundaries and prove the result for Effects and Synchronization.
0 of 7 completeRoutes and Loading States
Nested and dynamic routes
Understand the building blocks and choices behind Routes and Loading States.
0 of 5 completeLoading and error screens
Use this part of Routes and Loading States in a realistic workflow.
0 of 5 completeDirect URL refresh
Handle the boundaries and prove the result for Routes and Loading States.
0 of 6 completeForms and Validation
Controlled inputs or FormData
Understand the building blocks and choices behind Forms and Validation.
0 of 5 completeAccessible validation messages
Use this part of Forms and Validation in a realistic workflow.
0 of 6 completeSubmission and recovery states
Handle the boundaries and prove the result for Forms and Validation.
0 of 8 completeAccessible Responsive UI
Semantic controls and landmarks
Understand the building blocks and choices behind Accessible Responsive UI.
0 of 5 completeVisible keyboard focus
Use this part of Accessible Responsive UI in a realistic workflow.
0 of 5 completeContent-driven responsive breakpoints
Handle the boundaries and prove the result for Accessible Responsive UI.
0 of 7 completeBehavior-Focused Testing
Queries by accessible role
Understand the building blocks and choices behind Behavior-Focused Testing.
0 of 5 completeRealistic user interactions
Use this part of Behavior-Focused Testing in a realistic workflow.
0 of 5 completeObservable behavior assertions
Handle the boundaries and prove the result for Behavior-Focused Testing.
0 of 7 completePerformance Diagnosis
Measured render cost
Understand the building blocks and choices behind Performance Diagnosis.
0 of 5 completeTargeted memoization
Use this part of Performance Diagnosis in a realistic workflow.
0 of 6 completeRoute code splitting
Handle the boundaries and prove the result for Performance Diagnosis.
0 of 7 completeRelease Readiness
Public runtime configuration
Understand the building blocks and choices behind Release Readiness.
0 of 4 completeUI error recovery
Use this part of Release Readiness in a realistic workflow.
0 of 5 completeProduction build checks
Handle the boundaries and prove the result for Release Readiness.
0 of 8 complete