Learn ReactBeyond the basics
This handbook has covered the fundamentals: setting a project up, components, JSX, styling, props, state, events, forms, effects, and the hooks that tie them together, along with the process of thinking in React to turn a design into a working app and the work of keeping that app accessible. That's the core of the library, and it's enough to build real, working interfaces. A handful of concerns sit outside that core, and nearly every production React app reaches for some combination of them sooner or later. This chapter is the map: what each one is for, where it fits, and where to go learn it.
Reusable component patterns
Once you've written a few components, the question shifts from how to build one to how to build one that survives its second use. React's answer is composition: a component wraps around content instead of taking a named prop for every variation it might need. Children and composition starts there, compound components splits one component into cooperating pieces the caller arranges as markup, render props and headless components hand a component's internal state back to whoever renders it, and custom hooks in practice pull stateful logic out of components entirely so any component can share it. Together they're how a component library stays small while covering a wide range of uses.
Routing
Routing maps a URL to the view that should show, keeps the address bar in sync as the user moves around, and keeps the back button working, all without a full page reload. React Router is the library most React apps reach for, and Routing covers it in full, through nested layouts, URL params, and guarded routes.
Shared state
State that several distant parts of the app read is the other thing that grows past what props alone handle well. React's own answer is Context, which delivers a value to any component below a provider without threading it through the layers in between. Past a certain size, apps reach for a dedicated store instead: Redux Toolkit and Zustand are the two you'll meet most often. They add tools for organizing updates, debugging them, and keeping them predictable as the number of writers grows. Context is enough for a theme, a signed-in user, or a menu's open state, so start there and let a store earn its place.
The rendering model
React re-runs a component function when its state changes, then works out what to change in the DOM from what that function returns. Knowing the steps it moves through explains why a component runs when it does, why most re-renders cost little enough to ignore, and where an app's slowness actually comes from when it feels sluggish. How React renders walks through those steps and the tools that make them visible, StrictMode and the React Profiler.
Performance
Performance work sits on top of the rendering model, because most of it comes down to doing less of what a render costs. Memoization covers useMemo, memo, and useCallback, the three tools for remembering a result between renders, along with the referential equality rule that decides whether any of them help. Code splitting handles the other half, the size of the bundle a browser downloads before anything appears, by loading parts of the app on demand with lazy and Suspense. Both add complexity, so reach for them once you've measured a problem worth fixing.
Meta-frameworks
React itself only renders the interface. It doesn't ship an opinion on routing, how to load data before a page appears, or how to render a page on a server before it reaches the browser, three things almost every production app needs. A meta-framework is a framework built on top of React that supplies those missing pieces, and Next.js is the one most of the React world reaches for. That's why most production React apps aren't React on its own: they're React running inside Next.js or something like it. The kinds of frameworks covers meta-frameworks in more depth, including how Next.js relates to React.
Tooling
This piece already has a chapter of its own. Setting up a React project covered why the JSX used throughout this handbook isn't valid JavaScript by itself, and how Vite runs a dev server, compiles JSX on the fly, and bundles everything into optimized files when it's time to ship. It belongs on this map because it sits underneath every other item here: a router, a meta-framework, and a deploy step all assume a build tool is already doing that job. Go back to the setup chapter when you want the mechanics again.
TypeScript
Most React jobs and most existing codebases use TypeScript, which adds types on top of JavaScript so the editor and the build can catch a misspelled prop or a value that might be missing before the app runs. React works the same either way; what changes is that components, props, and state carry type annotations. TypeScript in React covers the React-specific parts once you're comfortable with the fundamentals here.
Deployment
Once the app is built, it needs a home. Running a build command, vite build for a Vite project, produces a folder of plain HTML, CSS, and JavaScript files: the static output of the app. Shipping that folder to a host, such as Netlify, Vercel, or Cloudflare Pages, is what puts the app on the internet for other people to use.
Where this leaves you
That's the map: composition patterns for components that get used more than once, routing to move between views, context or a store for state that travels, the rendering model and the performance work resting on it, a meta-framework like Next.js to handle what React leaves out, TypeScript for the safety net most teams work with, the Vite build from the setup chapter turning the code into files a browser can load, and a host to put the result online. None of it needs to be learned today. Choosing and learning a framework is the guide for deciding whether and when to add a piece like Next.js, and how to weigh the options once that time comes. The fastest way through all of it is the same approach that got you this far: build one small real project. Pick something worth making, lean on the fundamentals from this handbook, and bring in the pieces above only once the project actually asks for them. The chapters after this one go deeper into several of them: reusable component patterns built on children and context, React Router end to end, how React renders and the performance work that rests on it, and finally authentication and TypeScript.
Vite is already in your hands from the setup chapter, and routing, Next.js, and deployment are pieces you'll pick up naturally once a project actually needs them.
Go build something small next. You're ready for it.
Next up: Children and composition, where reusable components start with letting callers put content inside them.