React Tutorial with Live Examples
A free React 19 tutorial: components, JSX, props, state, hooks and performance. Every example runs on the page, so you can edit the code and watch the component and its console update.
Start the courseGetting Started
- What Is ReactReact is a JavaScript library for building user interfaces out of components. You describe what the screen should show for the current data, and React keeps the page in sync when that data changes.
- Install ReactInstall React by creating a project with Vite: check Node.js, run one create command, install dependencies and start the dev server. Also covers the generated files, building for production, and why Create React App is deprecated.
- JSXJSX is a syntax extension for JavaScript that lets you write HTML-like markup inside React components. Learn its rules: one root element, closed tags, className, camelCase attributes, curly braces, inline styles, comments, and what it compiles to.
- ComponentsA React component is a JavaScript function that returns JSX. Learn how to write and name function components, compose them into a tree, split them across files, keep them pure, and how components differ from elements.
- PropsProps are the inputs of a React component: values a parent passes to a child as JSX attributes. Learn how to pass and destructure props, set default values, pass functions, spread props, and why props are read only.
- Childrenchildren is the prop that holds whatever you put between a component's opening and closing tags. Learn how to build wrapper and layout components with it, pass several slots as named props, use children as a function, and when the Children API is the wrong tool.
- FragmentsA React Fragment groups several elements into one return value without adding a node to the page. Learn the short <>...</> syntax, when you need <Fragment key>, and why fragments matter inside tables and lists.
- Conditional RenderingConditional rendering in React is plain JavaScript: an if statement, a ternary or && decides which JSX a component returns. Learn each pattern, the stray 0 that && can print, returning null, and why hiding a component is not the same as not rendering it.
- Lists and KeysTo render a list in React you call map() on an array and return JSX for each item, giving every item a key prop. Learn filter then map, where keys should come from, and why array index keys mix up items when the list changes.
- EventsReact events are props like onClick and onChange that take a function, which React calls with an event object when the user acts. Learn how to pass a handler instead of calling it, pass arguments, read e.target.value and e.key, prevent form reloads and stop bubbling.
- StylingYou style React components with className and ordinary CSS, with the style prop for values computed in JavaScript, with CSS Modules for scoped class names, or with Tailwind utility classes. Learn each one, conditional classes, and when to use which.
State and Forms
- useStateuseState gives a component a value that survives re-renders and a setter that redraws the screen when the value changes. Learn the syntax, updater functions, objects and arrays in state, and why a value looks stale right after you set it.
- Updating Arrays and ObjectsTo change an array or object in React state, build a new one and pass it to the setter. Learn how to add, remove, replace, insert and sort items, update nested objects, and why mutating state leaves the screen unchanged.
- FormsBuild forms in React with controlled inputs: text fields, textarea, select, checkboxes and radio buttons, one state object for many fields, submitting with onSubmit, showing validation errors, and React 19 form actions.
- Controlled vs UncontrolledA controlled input gets its value from React state and changes only through onChange. An uncontrolled input keeps its own value in the DOM, and you read it with a ref or FormData. Learn the difference, the common warnings, and when to use each.
- Lifting State UpLifting state up means moving state out of two components and into their closest common parent, which passes the value and a setter back down as props. Learn when to lift, how to do it in three steps, and when to keep state local instead.
- useReduceruseReducer stores state and moves every update into one reducer function: you dispatch an action, and the reducer returns the next state. Learn the syntax, how to write a pure reducer, a todo list example, lazy initialization, and when to pick it over useState.
Effects and Refs
- useEffectuseEffect runs code after React has updated the screen, so a component can sync with something outside React: a timer, a subscription, an event listener. Learn the three dependency array shapes, cleanup, infinite loops and when you do not need an effect at all.
- Fetching DataFetch data in React by starting the request in useEffect, keeping loading, error and data in state, and ignoring responses that arrive after the inputs changed. Covers async/await in effects, AbortController, race conditions and when to use a library instead.
- useRefuseRef gives a component a box, `{ current }`, that keeps its contents between renders without causing a render when you change it. Use it to reach a DOM node (focus, scroll, measure) or to store a timer id or any value the screen does not show.
- forwardRefforwardRef lets a component take a ref from its parent and attach it to a DOM node inside. In React 19 function components receive `ref` as a normal prop, so new code no longer needs forwardRef. See both versions running, plus useImperativeHandle and TypeScript types.
- useLayoutEffectuseLayoutEffect works like useEffect but runs right after React updates the DOM and before the browser paints. Use it to measure an element and adjust layout without a visible flicker, and keep useEffect for everything else.
Hooks and Context
- React HooksA hook is a function whose name starts with use that lets a component use a React feature such as state, context, refs or effects. See every built-in hook grouped by purpose, the two rules every hook follows, and how to write your own.
- useContextuseContext reads a value that a parent component provides, so a deeply nested component gets it without every component in between passing it down as a prop. Learn createContext, providers, updating context from a child, and how context affects re-renders.
- Prop DrillingProp drilling is passing a prop through components that do not use it, only so a component further down can. See it in a runnable example, why it hurts as an app grows, and the fixes in the order to try them: composition, context, then a state library.
- Custom HooksA custom hook is a function whose name starts with use and that calls other hooks, so several components can reuse the same stateful logic. Build useToggle, useLocalStorage, useDebounce and useWindowWidth, and learn why each call gets its own state.
- Rules of HooksHooks have two rules: call them at the top level of a component, never inside conditions, loops or nested functions, and call them only from function components or custom hooks. Learn why React needs the same call order on every render and how to fix the errors you get when it changes.
- useIduseId returns a unique, stable id for each component instance, so a label, an input and an aria-describedby hint can point at each other even when the component appears many times. Learn why Math.random and counters break with server rendering, and why useId is not for list keys.
- useSyncExternalStoreuseSyncExternalStore subscribes a component to data that lives outside React, such as a small store module or a browser API like navigator.onLine, and renders again whenever that data changes. Learn subscribe and getSnapshot, why the snapshot must be cached, and getServerSnapshot.
Rendering and Performance
- RenderingA React component renders again when its state changes, when its parent renders, or when a context it reads changes. Learn the difference between render and commit, what the virtual DOM really means, and how to stop renders you do not need.
- useMemouseMemo caches the result of a calculation between renders and recomputes it only when its dependencies change. Learn the syntax, how to keep an object stable for a memo child, and when useMemo is not worth it.
- useCallbackuseCallback returns the same function between renders until its dependencies change. It only helps when that function is passed to a memo child or used as an effect dependency. Learn the syntax, the difference from useMemo, and the mistakes to avoid.
- React.memomemo wraps a component so React skips its re-render when its props are shallowly equal to last time. Learn when it helps, why new objects and functions in props defeat it, and what it does not stop.
- useTransitionuseTransition marks a state update as non-urgent, so React can keep the page responsive while it renders the slow part in the background. Learn isPending, startTransition, async transitions in React 19, and why it is not debouncing.
- useDeferredValueuseDeferredValue gives you a copy of a value that is allowed to lag behind during heavy renders, so an input stays responsive while a slow list catches up. Learn how it works, the React 19 initial value, and how it compares with useTransition and debouncing.
- Suspense and lazySuspense shows a fallback while the components inside it are not ready, and React.lazy loads a component's code only when it first renders. Learn code splitting, nested boundaries, Suspense with use() in React 19, and handling errors.
React 19 and Advanced
- React 19React 19 added Actions, useActionState, useOptimistic, use, ref as a prop and document metadata, and 19.2 added Activity and useEffectEvent. See each feature run, what was removed, and how to upgrade.
- useActionStateuseActionState wraps an async action, keeps the value it last returned, and tells you whether it is still running. Learn the signature, form actions, returning validation errors, and calling it outside a form.
- useOptimisticuseOptimistic shows the result you expect while an async action is still running, then falls back to the real state when it ends, so a failed request undoes itself. Learn the syntax, the reducer form, and why it must run inside an action.
- useuse reads the value of a promise or a context during render. With a promise it suspends until the data arrives and shows the nearest Suspense fallback. Unlike other hooks it can run inside if statements and loops.
- Error BoundariesAn error boundary is a component that catches errors thrown while rendering the components inside it and shows a fallback instead of a blank screen. Learn what it catches, how to write one as a class, how to reset it, and the react-error-boundary library.
- PortalscreatePortal renders part of a component into a different DOM node, such as document.body, while it stays in the same place in the React tree. Use it for modals, tooltips and menus that must escape overflow hidden and z-index stacking.
- Strict ModeStrictMode is a development-only wrapper that renders components twice, runs effects setup, cleanup, setup on mount, and warns about deprecated APIs, so impure renders and missing cleanups show up early. It does nothing in production.
- Component LifecycleEvery React component mounts (appears), updates (renders again) and unmounts (is removed). Learn how each phase maps to useEffect, the class lifecycle methods and their hook equivalents, and the render and commit phases.
- Class ComponentsA class component is a JavaScript class that extends React.Component and returns JSX from a render method. Learn this.props, this.state and setState, binding event handlers, lifecycle methods, PureComponent, and how to convert a class to a function component.
Comparisons and Interviews
- React Interview QuestionsAround 30 React interview questions from beginner to advanced, each with a short answer an interviewer would accept and live code for the ones that are easier to see than to read.
- React vs AngularReact is a UI library you combine with other tools; Angular is a full framework with routing, forms, HTTP and dependency injection built in. Compare the same components written in both, side by side.
- React vs VueReact and Vue are both JavaScript tools for building user interfaces from components. They differ in markup (JSX vs templates), in how they react to changes (immutable state and re-renders vs mutable reactive refs), and in how much of the ecosystem is official.
- React with TypeScriptHow to type a React app with TypeScript: props and children, useState with unions and null, useRef for DOM elements, event handlers, context, generic components and native element props.
