React from Basics to Advanced

JSX lets you write HTML-like tags inside JavaScript. Learn what JSX turns into, how curly braces work, the three rules of JSX, and common mistakes. Every example runs in the page.

A component is a function you write. An element is the object JSX makes. Learn who calls your component and when, why logs appear twice in development, and three mistakes that come from mixing the two up.

Props are the values a parent gives to a child component. Learn how to pass them, type them, give them defaults, use children, and why a component must never change its props.

State is what a component remembers between renders. Learn how useState works, why state is a snapshot, how to update it many times in one click, and common mistakes.

To change an object or array in state, make a new one. Learn why changing the old one doesn’t update the page, and how to add, remove and change items with spread, filter and map.

Make a page respond to clicks, typing and forms. Learn why you pass a function and don’t call it, how events bubble up, and when to use preventDefault.

Show a part of the page only when something is true. Learn if, the ternary, && and its 0 bug, null, and why removing a component makes it forget its state.

Turn an array into a list with map, and give each item a key. Learn why React needs keys, the bug that index keys cause, and how a key can reset a component.

When two components must agree, move their state up to the closest common parent. Learn how to pass data down and events up, where state should live, and what not to store.

Make a real React project on your computer with Vite. Learn what each file does, how the page updates when you save, how to build for real users, and the first mistakes people make.

An Effect is code React runs after it updates the page. Learn when Effects run, why they run twice in development, how the dependency array works, and when you don’t need one.

An Effect can return a cleanup function. Learn when React calls it, why Strict Mode runs it early, and how to stop timers, listeners, subscriptions and old requests.

Load data from a server when a component appears. Learn promises and await, loading and error states, a Retry button, the race fix, and why Strict Mode asks twice.

useRef keeps a value between renders without causing a render, and it lets your code reach a real tag on the page. Learn both jobs, when a ref is null, and the common mistakes.

useReducer moves every state change into one function, the reducer. Learn actions, dispatch, why reducers must be pure, TypeScript types for actions, and how to test a reducer.

A custom hook is your own function that calls React’s hooks. Learn to move shared code into one, why its name starts with use, and why each component still keeps its own state.

Some hooks add a behaviour to any component, like closing on a click outside, without owning any tags. Learn the shapes they take, prop getters, and how to fix handlers that see old values.

What makes React render, why a child renders when its parent does, and how React compares two renders to keep or replace parts of the page.

Keep a slow part of the page from rendering on every key you type. Move state down, or pass the slow part in as children. We count every render.

React.memo lets React skip a child when its props are the same as last time. See how it compares props, what breaks it, and when to use it.

useMemo keeps the answer of a calculation between renders, and useCallback keeps a function. Learn how they decide, the three real reasons to use them, and when to leave them out.

The React Compiler adds memoization to your components when you build the app. See the code it writes, what it skips, how to turn it on with Vite, and what you still do by hand.

Context lets a component read a value from far above it, with no props in between. Learn how to give and read it, who re-renders, and the traps.

A provider component shares a value, usually its own state, through context. Learn the reducer and context pattern, why only readers render, two contexts, useMemo for the value, and where providers go.

A component that reads one field of a context still renders when any other field changes. Learn why, and build a small store with selectors, so a store change renders only the components whose part changed.

Flags like isLoading and isError can both be true at once. Learn to list your states and events, draw them, and build a state machine with useReducer.

What belongs in global state, and what doesn’t. Build a small store for the whole app with no library and no provider, save it, log it, and learn its costs.

An input’s text can live in the browser or in your state. Learn both ways, what React does on each key, checkboxes, selects, number boxes, and the warnings you will meet.

Pass a function to a form’s action prop, and React calls it with the form’s data. Learn useActionState for results and errors, useFormStatus for a busy button, and the form reset.

useOptimistic shows the result of a click at once, while the server is still working. Learn how it falls back when the server says no, lists with a Sending label, and when not to use it.

Read a promise while rendering with use, and show a loading message with Suspense. Learn why the promise must be cached, where boundaries go, Transitions and errors.

When a component throws while React renders it and nothing catches the error, React removes your whole app. Learn error boundaries: catch, show a message, try again.

Some React components run only on a server and send just their result. Learn Server Components, ‘use client’, props that can cross, Server Functions and how to keep them safe.

Load a component’s code only when the page needs it, with lazy and Suspense. We measure a real Vite build, then cover preloading, failed downloads and common mistakes.

A list of 10,000 rows puts 10,000 tags on the page. Learn to show only the rows that fit in a box, build one from scratch, and see what it costs.

Measure before you make React faster. Use the Profiler component, React DevTools and the browser’s Performance panel, then find bugs with errors, logs and Strict Mode.

Build a small router from scratch, so you know what React Router does. Read the address, change it with no page load, match pages, and handle Back, queries and focus.

Compound components are parts that work together and share state through context. Build an accordion, make it flexible, controlled and accessible, and learn when not to.

Build tabs that work with a mouse, a keyboard and a screen reader. Learn the roles, the arrow keys, the roving tabindex, matching by value, and hidden panels.

A render prop is a function you pass to a component. The component calls it with its own data, and your function says what to show. Learn when to use one, and when a hook is better.

A higher-order component is a function that takes a component and gives back a new one. Learn how to build and type one, its rules and problems, and why hooks replaced most of them.

A portal draws a component’s tags somewhere else on the page. Learn why modals need one, how events and context still work, and how to build a modal.

Make one Button that can also be a link. Learn the as prop, the asChild pattern, how to build a small Slot that merges props, and when to use each.

The children prop holds plain data you can read. Learn what it holds, React’s Children API and its traps, and the simpler ways React’s docs suggest instead.

A slot is a prop that holds JSX, so one component can have many holes for the parent to fill. Build a Card, a page layout and a notice with named slots.

How screen readers learn about a page, why a real button beats a div, and how to write ARIA names, states and live regions in JSX. The examples are checked in Chromium.

Make a React app work with only a keyboard. Learn Tab order, tabIndex, focus rings, moving focus with refs, a focus trap for a modal, skip links and arrow keys.

Give every box a name, link hints and errors to their boxes, move the focus to an error summary, and tell everyone when the form is busy or done.

Add Vitest and React Testing Library to your Vite project. Find things by role, click like a user, wait for data, read a failing test, and avoid the common traps.

Turn accessibility checks into tests. Role queries, axe-core in Vitest, keyboard tests, Oxlint, axe in real browsers, and the checks only a person can do.

Build a file explorer step by step, as in a coding interview. A flat map of nodes, a component that renders itself, a reducer, and a tree that works with a keyboard.

Build a search box with suggestions, step by step, the way an interview asks for it. Old answers, debouncing, loading and error states, the keyboard, ARIA, highlighting and a cache.

Build a toast system step by step, as in an interview. A provider and a hook, a portal, a timer for each toast, pause on hover, live regions and a stable API.

Build a small task board step by step, as in a coding interview. Move cards with the mouse, a finger and the keyboard, and show where each card will land.

Build a list that loads more posts as you scroll, step by step. Cursors, a Load more button, IntersectionObserver, one request at a time, errors, focus, windowing and the feed role.

Read old React code, turn a class component into a function without changing what it does, see what React 19 removed, and plan the move for a big app.

A design system is shared tokens, components, docs and rules. Learn tokens and themes, component APIs that are hard to use wrongly, safe changes with version numbers, and who decides.

A performance budget is a limit you agree on before you build. Measure a real Vite build, make CI fail when it grows too big, and watch real users’ speed.