Bun supports .jsx and .tsx files natively — no Babel or Webpack configuration required. React works with Bun out of the box.
Create a React app
Use bun init --react to scaffold a full-stack React app with a built-in API server and hot module reloading:
bun init --react my-app
cd my-app
├── src/
│ ├── index.tsx # Server entry point with API routes
│ ├── frontend.tsx # React app entry point with HMR
│ ├── App.tsx # Main React component
│ ├── index.html # HTML template
│ ├── index.css # Styles
│ └── *.svg # Static assets
├── package.json
├── tsconfig.json
├── bunfig.toml
└── bun.lock
Development
Start the app in development mode with hot reloading:
This starts both the API server and the React frontend in a single process with hot module replacement (HMR). Changes to any file are reflected immediately in the browser.
Production
Build static site
Run full-stack server
Compile the React app to a dist/ directory:Serve the output with any static hosting service, CDN, or Bun’s built-in file server. Start the API server and frontend together as a single Bun process: JSX support
Bun transpiles JSX and TSX at runtime without Babel. The jsx and jsxImportSource settings in tsconfig.json control JSX behavior:
{
"compilerOptions": {
"jsx": "react-jsx",
"lib": ["ESNext", "DOM"],
"target": "ESNext"
}
}
.tsx files without any additional configuration:
export default function App() {
return (
<main>
<h1>Hello from Bun + React</h1>
</main>
);
}
Manual bundling with Bun.build
For more control over the output, use Bun.build directly or the bun build CLI:
bun build ./src/frontend.tsx --outdir ./dist --minify
await Bun.build({
entrypoints: ["./src/frontend.tsx"],
outdir: "./dist",
minify: true,
target: "browser",
});
Using Vite
If you prefer Vite’s ecosystem, scaffold a React + Vite project with:
bun create vite my-app --template react-ts
cd my-app
bun install
bun run dev
bun create is an alias for bunx create-*. It fetches the template package from npm, runs the scaffolding, and installs dependencies — all in one step.
