Learn React

React is a library for building user interfaces out of components that describe what the screen should look like for given data.

Scaffold a React app with Vite, understand its files, and run the dev server with fast refresh.

Define components as capitalised functions that return JSX, nest them, and export them from modules.

Write markup in JavaScript with JSX: curly braces for expressions, camelCase attributes, className and style objects.

Pass data to components through props, destructure them, set defaults, and pass JSX as children.

Show different UI depending on conditions with if/return, the ternary operator and &&.

Turn arrays into elements with map and filter, and give each item a stable key so React can track it.

Attach event handlers with onClick and friends, pass handlers as props, and use the event object.

Give a component memory with useState, understand that state is a snapshot, and use updater functions.

Treat objects and arrays in state as immutable: copy them with spread, map and filter instead of mutating.

Build forms with controlled inputs bound to state, or uncontrolled inputs read on submit with FormData.

Break a UI into components, find the minimal state, decide which component owns it, and lift state up to share it.

Consolidate complex state updates into a reducer function that handles dispatched actions.

Keep rendering pure (same inputs, same JSX, no side effects) and use Strict Mode to catch impurity during development.

Use effects to synchronize a component with external systems, with correct dependencies and cleanup, and know when not to use one.

Keep mutable values that don't trigger renders with useRef, reach DOM nodes through ref, and render elsewhere with createPortal.

Extract reusable stateful logic into your own use-prefixed functions that call other Hooks.

Pass data deeply without prop drilling using createContext, a provider, and useContext or use.

Fetch data in effects without race conditions, and know when to use a data library, a framework loader or use() instead.

Choose between plain CSS, CSS Modules, utility CSS like Tailwind and CSS-in-JS, and use className and style correctly.

Map URLs to components with React Router: routes, nested layouts, links, URL params and navigation.

Test components the way users use them with Vitest and React Testing Library: render, query by role, interact, assert.

Understand trigger, render and commit, how React diffs trees by type and key, and when state is preserved or reset.

Skip unnecessary work with memo, useMemo and useCallback, and let the React Compiler apply memoization automatically.

Find slow renders with the React DevTools Profiler, the Profiler component and browser performance tools, then fix the real cause.

Declare loading states with Suspense boundaries, code-split with lazy, and read promises during render with use().

Mark updates as non-urgent with useTransition and startTransition, and defer slow parts of the UI with useDeferredValue.

Catch rendering errors in a subtree and show fallback UI with an error boundary, and report errors from the root.

Handle async mutations with Actions: form action props, useActionState, useFormStatus and useOptimistic.

How React's Fiber architecture splits rendering into interruptible units of work, prioritises updates with lanes, and commits atomically.

Subscribe to state that lives outside React safely, without tearing, using useSyncExternalStore.

Render components on the server or at build time with React Server Components, and mark interactive parts with 'use client'.

Call server code from the client with 'use server' functions, use them as form actions, and secure them like public endpoints.

Render to HTML on the server, stream it with Suspense, and hydrate it on the client without mismatches.