Learn React with the Enriched Editor
Components, props, hooks, and patterns. Monaco-powered editor with TypeScript/React autocomplete, live preview, and verify—learn by doing.
- Step 1
React 1: Your First Component
A component is a function that returns JSX. Use App and export default App as the root....
Start Lesson - Step 2
React 2: Props
Components can receive props (properties). Props are how you pass data into a component....
Start Lesson - Step 3
React 3: JSX and nesting
In React we use JSX to describe the UI. You can nest elements inside divs and fragments....
Start Lesson - Step 4
React 4: Multiple props
Components can accept multiple props. Destructure them in the parameter list....
Start Lesson - Step 5
Composition I: Components inside components
**Composition** is putting components inside others. Create `Title`, `Body`, and `Card` that uses th...
Start Lesson - Step 6
Composition II: Passing props when composing
When composing, the **parent** passes props to **children**. Create `Greeting` that receives `name` ...
Start Lesson - Step 7
React 5: className
Use **className** in JSX (instead of 'class') to style your components....
Start Lesson - Step 8
React 6: Inline styles
Components can have **inline styles** using JavaScript objects. Use `style={{ color: 'pink', fontSiz...
Start Lesson - Step 9
React 7: Lists with map
You can use **arrays** in JSX to render lists. Use `map` to transform each item into JSX. Always pro...
Start Lesson - Step 10
React 8: Conditionals in JSX
Components can use **conditionals** with `&&` or `? :`. Render different content based on props or s...
Start Lesson - Step 11
React 9: useState
**useState** is a hook that remembers values. The component re-renders when the state changes....
Start Lesson - Step 12
React 10: Events (onClick)
Components can have **events** like `onClick`. Pass a function (not a call). Use a handler like `han...
Start Lesson - Step 13
React 11: Side effects with useEffect
**useEffect** runs code after render: fetching data, timers, subscriptions. Use it for side effects,...
Start Lesson - Step 14
React 12: Events & forms (controlled components)
**Controlled components** tie input value to state with `value={state}` and `onChange`. Use `onSubmi...
Start Lesson - Step 15
React 13: Lists, keys & rendering performance
Always use a **key** when rendering lists (e.g. `key={item.id}`). Keys help React match items across...
Start Lesson - Step 16
React 14: Refs with useRef
**useRef** gives a mutable ref object: use it for **DOM access** (focus, scroll, measure) or to **pe...
Start Lesson - Step 17
React 15: useReducer
**useReducer** is like useState but for complex state: you dispatch **actions** and a **reducer** re...
Start Lesson - Step 18
React 16: useMemo, useCallback & React.memo
**useMemo** caches a computed value; **useCallback** caches a function (so children don't re-render ...
Start Lesson - Step 19
React 17: Context (useContext)
**Context** is good for **theme**, **auth user**, **locale**—data that many components need and that...
Start Lesson - Step 20
React 18: Custom hooks
**Custom hooks** extract reusable logic (useState + useEffect + etc.) into a function whose name sta...
Start Lesson - Step 21
React 19: Error boundaries (concept)
**Error boundaries** catch JavaScript errors in the tree below them and show a fallback UI. They do ...
Start Lesson - Step 22
React 19 (1): Actions
**Actions** are first-class async transitions in React 19. You pass an async function to a form or t...
Start Lesson - Step 23
React 19 (2): useActionState
**useActionState** (React 19) keeps **action result + pending state** in one place. Perfect for form...
Start Lesson - Step 24
React 19 (3): useFormStatus
**useFormStatus** (React 19) lets a **child** (e.g. the Submit button) read the **pending** status o...
Start Lesson - Step 25
React 19 (4): useOptimistic
**useOptimistic** (React 19) updates the UI **immediately** (optimistic) while the server confirms. ...
Start Lesson - Step 26
React 19 (5): useTransition
**useTransition** marks updates as **non-urgent** so the UI stays responsive during heavy work. Call...
Start Lesson - Step 27
React 19 (6): useDeferredValue
**useDeferredValue** gives you a value that **lags behind** the real one. Use it for **expensive lis...
Start Lesson - Step 28
React 19 (7): Suspense for data
**Suspense** lets you show a **fallback** while children are loading (lazy components or data). Fram...
Start Lesson - Step 29
React 19 (8): Resource preloading
**Preloading** scripts, styles, or data improves perceived performance. Frameworks often expose APIs...
Start Lesson - Step 30
React 19 (9): Strict Mode & idempotent effects
In **Strict Mode** (dev), React may **run effects twice** to surface bugs. Your effects should be **...
Start Lesson - Step 31
React 19 (10): Migration mindset
You **don't rewrite** the whole app. Adopt **actions** and **optimistic flows** where you already ha...
Start Lesson - Step 32
React 19 (11): use() Hook for Promises
The **use()** hook is React 19's new primitive for reading async resources. Unlike useEffect, use() ...
Start Lesson - Step 33
React 19 (12): ref as Prop
React 19 allows passing **ref** as a regular prop to function components—no more forwardRef! This si...
Start Lesson - Step 34
React 19 (13): Document Metadata
React 19 supports rendering **<title>**, **<meta>**, and **<link>** tags directly in your components...
Start Lesson - Step 35
React 19 (14): Asset Loading with Suspense
React 19 integrates **asset preloading** with Suspense. Use APIs like **preload()**, **preconnect()*...
Start Lesson - Step 36
React 19 (15): Server Components Concepts
**React Server Components (RSC)** run on the server and send HTML to the client. They can access dat...
Start Lesson - Step 37
React 19 (16): React Compiler Concepts
The **React Compiler** (formerly React Forget) automatically optimizes your components. It adds memo...
Start Lesson - Step 38
React 19 (17): Advanced Challenge - Real-Time Dashboard
Build a **real-time dashboard** combining multiple React 19 patterns: useTransition for search, useD...
Start Lesson - Step 39
React 32: Testing Basics with React Testing Library
**React Testing Library (RTL)** lets you test components the way users interact with them. Instead o...
Start Lesson - Step 40
React 33: Testing User Interactions
Real users don't just view your app—they click, type, hover, and navigate. **fireEvent** and **userE...
Start Lesson - Step 41
React 34: Testing Custom Hooks
Custom hooks encapsulate reusable logic, but they can't be called outside components. **renderHook**...
Start Lesson - Step 42
React 35: Compound Components Pattern
**Compound Components** let related components share implicit state. Like HTML's `<select>` and `<op...
Start Lesson - Step 43
React 36: Render Props Pattern
**Render Props** share code between components using a prop whose value is a function. The component...
Start Lesson - Step 44
React 37: Headless UI Pattern
**Headless components** provide behavior without styling. They handle complex logic (keyboard naviga...
Start Lesson - Step 45
React 38: TypeScript with React Fundamentals
**TypeScript** adds static types to React, catching errors at compile time instead of runtime. You g...
Start Lesson - Step 46
React 39: Advanced TypeScript Patterns
Advanced TypeScript patterns make your components more flexible and type-safe: **generics** for reus...
Start Lesson - Step 47
React 40: Form Management with React Hook Form
**React Hook Form** minimizes re-renders and simplifies validation. Instead of controlled inputs, it...
Start Lesson - Step 48
React 41: Data Fetching Patterns
Modern data fetching uses **SWR** or **TanStack Query** (React Query) instead of raw useEffect. Thes...
Start Lesson - Step 49
React 42: Performance Profiling
React DevTools **Profiler** reveals why your components render. It shows render times, what triggere...
Start Lesson - Step 50
React 43: Accessibility in React
**Accessibility (a11y)** ensures everyone can use your app—including people using screen readers, ke...
Start Lesson - Step 51
React 44: useReducer — Shopping Cart
A real **useReducer** shines when state has many actions. A shopping cart adds items, changes quanti...
Start Lesson - Step 52
React 45: useContext — Auth Provider + custom hook
Real-world Context wraps a **Provider component** that owns state and a **custom hook** (`useAuth`) ...
Start Lesson - Step 53
React 46: Custom hook — useLocalStorage
A **useLocalStorage** hook gives you `useState` that **persists** across page reloads. It reads the ...
Start Lesson - Step 54
React 47: Custom hook — useFetch with AbortController
A robust **useFetch** hook tracks `data`, `loading` and `error`, and **cancels** stale requests with...
Start Lesson - Step 55
React 48: Portals — Modal that escapes overflow
**createPortal** renders children into a different DOM node — usually `document.body` — while keepin...
Start Lesson - Step 56
React 49: useId for accessible form fields
**useId** generates a stable, unique id that's identical on server and client — perfect for linking ...
Start Lesson - Step 57
React 50: Controlled vs Uncontrolled inputs
A **controlled** input stores its value in React state (`value` + `onChange`) — React is the single ...
Start Lesson - Step 58
React 51: Debounced search box
Searching on every keystroke hammers your API. **Debouncing** waits until the user stops typing for ...
Start Lesson