React

Reactive, composable interfaces

React is the go-to library for building user interfaces. Components, JSX, state and hooks, then data handling, performance and architecture: from your first component all the way to expert patterns.

Foundations

Beginner - the basics, step by step

• Why React, your first component and JSXDiscover what React is, write your very first component, and learn the basic rules of JSX.
• Props: passing data to a componentLearn how to make your components reusable by passing data to them through props.
• Local state with useStateGive your components memory with useState so you can display values that change as the user interacts.
• Events and conditional renderingReact to user actions and show or hide elements based on conditions.
• Rendering lists and the role of keysTurn an array of data into a list of on-screen elements with map, and identify each element with keys.

Progression

Intermediate - build real things

• Controlled formsLearn to drive every form field from React state so you can validate and submit reliable data.
• useEffect: effects, dependencies, cleanupSynchronize your components with the outside world using useEffect, mastering dependencies and cleanup.
• Lifting state up and sharing dataPlace each piece of state in the closest common ancestor to share data between several components without duplicating it.
• Composition: children and splitting into componentsBuild reusable container components with the children prop and split your screens into clear responsibilities.
• Calling an API: fetch, loading, and errorsLoad remote data with fetch inside an effect, cleanly modeling the loading and error states.

Advanced

Proficient - advanced patterns and performance

• useReducer for complex stateStructure complex state with a pure reducer that centralizes transitions and rules out impossible combinations.
• Context: sharing without prop drillingMove data around without prop drilling using context, while keeping its re-renders and limits under control.
• Custom hooks: extracting and reusing logicExtract stateful logic into reusable, composable, testable hooks.
• Memoization: memo, useMemo, useCallbackLearn when React.memo, useMemo, and useCallback genuinely speed up your app, and when they complicate it for nothing.
• useRef and DOM manipulationManipulate the DOM and keep instance values with useRef, without breaking render purity.

Mastery

Expert - architecture, internals and edge cases

• Under the hood: reconciliation, batching, concurrent renderingDiscover how Fiber reconciles the tree, batches updates, and makes rendering work interruptible.
• Suspense, lazy, and code splittingMaster the suspension mechanism, lazy component loading, and bundle splitting.
• Expert patterns: compound components, inversion of controlDesign flexible component APIs with compound components, the state reducer, and the right choice between render props and hooks.
• Modern React: Server Components, use, useTransition, useOptimisticExplore server components, reading promises with use, and React 19's optimistic updates.
• Quality: Testing Library, StrictMode, ProfilerTest behavior rather than implementation, leverage StrictMode's double invocations, and measure renders with Profiler.