> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify.com/oven-sh/bun/llms.txt
> Use this file to discover all available pages before exploring further.

# 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:

```bash theme={null}
bun init --react my-app
cd my-app
```

This generates a project with the following structure:

```text theme={null}
├── 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:

```bash theme={null}
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

<Tabs>
  <Tab title="Build static site">
    Compile the React app to a `dist/` directory:

    ```bash theme={null}
    bun run build
    ```

    Serve the output with any static hosting service, CDN, or Bun's built-in file server.
  </Tab>

  <Tab title="Run full-stack server">
    Start the API server and frontend together as a single Bun process:

    ```bash theme={null}
    bun start
    ```
  </Tab>
</Tabs>

## JSX support

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

```json tsconfig.json theme={null}
{
  "compilerOptions": {
    "jsx": "react-jsx",
    "lib": ["ESNext", "DOM"],
    "target": "ESNext"
  }
}
```

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

```tsx src/App.tsx theme={null}
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:

```bash theme={null}
bun build ./src/frontend.tsx --outdir ./dist --minify
```

```typescript build.ts theme={null}
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:

```bash theme={null}
bun create vite my-app --template react-ts
cd my-app
bun install
bun run dev
```

<Tip>
  `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.
</Tip>