Chapter 1 of 6

What is a React toolchain?

When people say "toolchain," they mean the set of tools that turn the React code you write into something a browser or phone can run — plus the tools that keep that code healthy.

You do not run JSX directly in a browser. You need tools to transform it, bundle your files together, type-check your TypeScript, and lint for bugs and style. That collection is the toolchain.

Input Write JSX + TS
Job 1 Transform JSX / TS → JS
BabelSWCOxc
Job 2 Bundle combine + minify
RolldownTurbopackWebpack
Output Ship browser / phone
Quality gates — run alongside, on every change
Type-checktsc · tsgo
Lint + FormatESLint · oxlint · Biome
Five jobs: transform, bundle & minify, type-check, lint, and ship.

The story of React tooling is mostly about these jobs getting split apart, glued back together, and then rewritten in Rust and Go — because JavaScript-based tools were too slow for big projects.

If you have ever watched a CI pipeline spend two minutes on a lint step, or waited several seconds for HMR to reflect a one-line change, you have felt the problem native tools solve. The shift from JavaScript-based tools to Rust and Go implementations is primarily a speed story: the same work done by a compiled binary instead of a Node process, typically 10× to 100× faster. The tradeoff used to be a thinner plugin ecosystem. That gap has mostly closed.

Now that you know the five jobs, the next chapter walks through six eras of how those jobs got done — from hand-rolled Webpack configs to Rolldown and Turbopack.