Skip to main content
Bun has native support for React and JSX, making it easy to build React applications without any build configuration.

​
Quick Start

1

Create a new project

mkdir my-react-app
cd my-react-app
bun init -y
2

Install React

bun add react react-dom
bun add -d @types/react @types/react-dom
3

Create app.tsx

app.tsx
import React from "react";

export function App() {
  return (
    <div>
      <h1>Hello from React + Bun!</h1>
    </div>
  );
}
4

Create server.tsx

server.tsx
import { renderToString } from "react-dom/server";
import { App } from "./app";

Bun.serve({
  port: 3000,
  fetch() {
    const html = renderToString(<App />);
    return new Response(
      `<!DOCTYPE html>
      <html>
        <head><title>React + Bun</title></head>
        <body><div id="root">${html}</div></body>
      </html>`,
      { headers: { "Content-Type": "text/html" } }
    );
  },
});

console.log("Server running at http://localhost:3000");
5

Run the server

bun run server.tsx

​
JSX Configuration

Bun automatically transforms JSX. Configure it in tsconfig.json:
tsconfig.json
{
  "compilerOptions": {
    "jsx": "react-jsx",
    "jsxImportSource": "react"
  }
}

​
Next Steps

Next.js

Build full-stack React apps with Next.js

JSX

Learn about JSX support in Bun

Build docs developers (and LLMs) love

Get started for freeTalk to us