React 19 Course
Master what's new in React 19: Actions, useActionState, useFormStatus, useOptimistic, the use() API, ref as a prop, document metadata and Suspense improvements — inside the Arena IDE.
- Step 1
Your first component
A React component is a JavaScript function that returns JSX (markup). Component names must start wit...
Start Lesson - Step 2
Exporting components
Each file has ONE default export (your root component) and any number of named exports. App is the d...
Start Lesson - Step 3
Writing markup with JSX
JSX looks like HTML but is stricter: return a single parent element, close every tag, and use classN...
Start Lesson - Step 4
JavaScript in JSX: curly braces
Curly braces { } open a window to JavaScript inside JSX. Put any expression there — a variable, a ca...
Start Lesson - Step 5
Styling components
Style React with className (CSS classes) or the style prop, which takes a JavaScript object: style={...
Start Lesson - Step 6
Props: passing data
Props let a parent pass data to a child component, like attributes on a tag: <UserCard name="Ada" />...
Start Lesson - Step 7
Default props & children
Default parameter values make props optional, and the special children prop holds whatever you nest ...
Start Lesson - Step 8
Conditional rendering
Show different UI based on conditions using the ternary operator (cond ? a : b) and the logical AND ...
Start Lesson - Step 9
Rendering lists
Turn an array into UI with .map(), returning one element per item. Each sibling needs a stable, uniq...
Start Lesson - Step 10
Keeping components pure
A component should be a pure function of its props: same props in, same JSX out, with no side effect...
Start Lesson - Step 11
Fragments: returning siblings
A component returns ONE root. To return several siblings without adding an extra <div> to the DOM, w...
Start Lesson - Step 12
Capstone: profile card list
Combine everything: a component that takes props, a list rendered with .map() and keys, conditional ...
Start Lesson - Step 13
React 19: What's New
React 19 is the biggest update in years: Actions for async transitions, new hooks (useActionState, u...
Start Lesson - Step 14
Actions & useActionState
In React 19 you pass an async function to a <form action={...}>. useActionState wraps that action an...
Start Lesson - Step 15
useFormStatus
useFormStatus (from react-dom) lets a child component read the pending state of the nearest parent <...
Start Lesson - Step 16
useOptimistic
useOptimistic shows an instant, optimistic UI update while the real async request is in flight, then...
Start Lesson - Step 17
The use() API: Promises
use(promise) reads a promise during render and suspends the component until it resolves — Suspense s...
Start Lesson - Step 18
The use() API: Context
use(Context) reads context like useContext, but because use() can run conditionally, you can read co...
Start Lesson - Step 19
ref as a Prop (no forwardRef)
In React 19 function components can receive ref as a normal prop. Destructure { ref } from props and...
Start Lesson - Step 20
Document Metadata
React 19 hoists <title>, <meta> and <link> tags rendered anywhere in your tree up into the document ...
Start Lesson - Step 21
<Context> as Provider & ref Cleanup
React 19 lets you render <MyContext value={...}> directly as a provider — no more .Provider. And ref...
Start Lesson - Step 22
useTransition & Suspense
React 19 lets you pass an async function to startTransition — Actions. isPending stays true across a...
Start Lesson