01
React Fundamentals & JSX
// ...React mental model
Virtual DOMJSX syntaxRendering
UNITS
11 LESSONS
02
Components & Props
// ...Building blocks of React
Function componentsPropsChildren
03
State with useState
// ...Component state
useState hookState updatesDerived state
04
Side Effects with useEffect
// ...Managing side effects
Effect lifecycleDependenciesCleanup
05
Custom Hooks
// ...Reusable logic
Extract logicHook compositionBest practices
06
Context API
// ...Global state without prop drilling
Create contextProvider patternuseContext
07
useReducer for Complex State
// ...Reducer pattern
Actions & reducersState machinesContext + Reducer
08
Performance Optimization
// ...memo, useMemo, useCallback
When to optimizeMemoizationProfiling
09
Component Testing
// ...Testing with Vitest
Test setupUser eventsAssertions
10
Integration Testing
// ...Testing interactions
Mock APIsAsync testingCoverage
11
Forms in React
// ...Controlled forms
Form stateValidationForm libraries
PROJECTS
2 BUILDS
Notes App
10hFull CRUD with tags and search
ReactHooksTesting
REQUIREMENTS
- Create/edit/delete notes
- Tag system
- Search filter
- Test coverage
UI Component Library
8hReusable component kit
Component DesignPropsStyling
REQUIREMENTS
- Button, Input, Modal, Card
- Variant props
- Documentation
INTERACTIVE
2 TOOLS
React Lifecycle Viz
Component lifecycle timeline
15 minHook Flow Diagram
Interactive hooks execution
15 min