React with Bun

Create and run a full-stack React application with Bun, including built-in JSX support, hot reloading, and production bundling.

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

This generates a project with the following structure:

├── 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:

bun dev

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

Compile the React app to a dist/ directory:

bun run build

Serve the output with any static hosting service, CDN, or Bun’s built-in file server.

Run full-stack server

Start the API server and frontend together as a single Bun process:

bun start

JSX support

Bun transpiles JSX and TSX at runtime without Babel. The jsx and jsxImportSource settings in tsconfig.json control JSX behavior:

tsconfig.json

{
  "compilerOptions": {
    "jsx": "react-jsx",
    "lib": ["ESNext", "DOM"],
    "target": "ESNext"
  }
}

You can also use JSX in .tsx files without any additional configuration:

src/App.tsx

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

build.ts

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.