@vitejs/plugin-react

@vitejs/plugin-react is the default, officially maintained Vite plugin for React projects, enabling JSX/TSX compilation and Babel-based Fast Refresh so component edits update in the browser instantly without losing component state. It is scaffolded automatically by create-vite for every React template and is the plugin most React + Vite projects depend on without ever needing to configure directly.

The plugin lives in the vite-plugin-react monorepo alongside @vitejs/plugin-react-swc (an SWC-based alternative optimized for faster cold starts) and experimental React Server Components tooling (@vitejs/plugin-rsc). @vitejs/plugin-react itself uses Babel, which trades a small amount of transform speed for broader plugin/preset compatibility (including optional React Compiler integration), making it the default recommendation for most projects.

What You Get

• Automatic JSX/TSX transformation for .jsx/.tsx files using Babel during both dev and build
• Babel-powered React Fast Refresh, preserving component state across hot module reloads in development
• Configurable Babel plugin/preset injection for custom transforms (e.g. styled-components, emotion)
• Optional integration with the React Compiler (babel-plugin-react-compiler) via a dedicated preset
• Zero-config setup as the default plugin scaffolded by create-vite’s React templates

Common Use Cases

• Standard React + Vite application development, added automatically via create-vite --template react
• Enabling Fast Refresh so component state survives edits during local development
• Adding custom Babel plugins/presets (e.g. for CSS-in-JS libraries) to a Vite-based React build
• Opting a React codebase into the React Compiler’s automatic memoization via the plugin’s compiler preset

Under The Hood

Architecture: The plugin (packages/plugin-react/src/index.ts) implements Vite’s Plugin interface, transforming matched .[tj]sx? files with Babel and injecting a refresh-runtime.js preamble plus a virtual preamble plugin from the shared @vitejs/react-common package (also used by the SWC sibling plugin-react-swc) so both variants share Fast Refresh wiring logic; a separate reactCompilerPreset.ts composes an optional Babel preset that layers in babel-plugin-react-compiler for projects opting into the compiler. Tech Stack: TypeScript throughout, built as an ESM package consumed by Vite’s plugin pipeline, tested with Vitest, and versioned as one package among several (plugin-react, plugin-react-swc, plugin-rsc, common) in a pnpm-workspace monorepo maintained by the core Vite team (Evan You among the listed authors). Code Quality: The compiler preset ships its own dedicated test file (reactCompilerPreset.test.ts) and the plugin is exercised indirectly by Vite’s own extensive e2e suite across the ecosystem given its status as the default React integration; the small, focused src/ surface (three files) keeps the reviewable footprint minimal for a project this widely depended upon. API Design: The Options interface documents every knob (include/exclude patterns, jsxImportSource, jsxRuntime) with inline JSDoc and sensible defaults, so the overwhelming majority of consumers add react() to their vite.config.ts plugins array with zero configuration.