Track
react
React
36 lessons: JSX, components, hooks, effects, context—React 18 + TSX in-browser playground and 108 MCQs.
- Mode
- client_react
- Practice
- client react
- Lessons
- 36 units
Before you start
A component-based library for building interactive UIs with declarative rendering, hooks, and a rich ecosystem.
Huge job market share, strong patterns for state and composition, and first-class TypeScript support.
SPAs, dashboards, design-system-driven products, and React Native mobile apps.
36 lessons with TSX playground (React 18 CDN), printOutput + mountApp, enrichment blocks, and 108 MCQs.
After JavaScript and TypeScript—once you can read functions, objects, and async code comfortably.
Lesson order
Sequential — follow top to bottom36 lessons are live in this track. Start from step 01 for the smoothest path.
-
01 intro Introduction to React
beginner
Open → -
02 what-is-react What is React?
beginner
Open → -
03 declarative-ui Declarative UI
beginner
Open → -
04 react-vs-vanilla React vs vanilla JavaScript
beginner
Open → -
05 playground-workflow Playground workflow
beginner
Open → -
06 jsx-basics JSX basics
beginner
Open → -
07 elements-props Elements and props
beginner
Open → -
08 components-functions Function components
beginner
Open → -
09 children-composition Children and composition
intermediate
Open → -
10 lists-keys Lists and keys
intermediate
Open → -
11 conditional-render Conditional rendering
intermediate
Open → -
12 state-usestate State with useState
beginner
Open → -
13 events-handlers Events and handlers
beginner
Open → -
14 controlled-inputs Controlled inputs
intermediate
Open → -
15 lifting-state Lifting state up
intermediate
Open → -
16 forms-multifield Multi-field forms
intermediate
Open → -
17 immutability-patterns Immutability patterns
advanced
Open → -
18 useeffect-basics useEffect basics
intermediate
Open → -
19 fetch-data Fetching data
intermediate
Open → -
20 effect-dependencies Effect dependencies
intermediate
Open → -
21 cleanup-effects Cleanup effects
intermediate
Open → -
22 loading-error-states Loading and error states
advanced
Open → -
23 classnames-inline Class names and inline styles
intermediate
Open → -
24 conditional-styles Conditional styles and variants
intermediate
Open → -
25 component-structure Component structure and folders
intermediate
Open → -
26 lifting-vs-colocation Lifting state vs colocation
intermediate
Open → -
27 prop-drilling-intro Introduction to prop drilling
intermediate
Open → -
28 usereducer-intro useReducer for complex state
intermediate
Open → -
29 usememo-usecallback useMemo and useCallback
advanced
Open → -
30 usecontext Context API
intermediate
Open → -
31 custom-hooks Custom hooks
intermediate
Open → -
32 refs-dom Refs and the DOM
intermediate
Open → -
33 error-boundaries Error boundaries
advanced
Open → -
34 performance-mindset Performance mindset
advanced
Open → -
35 interview-essentials React interview essentials
advanced
Open → -
36 summary Track summary and next steps
beginner
Open →