Use React and JSX

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

Quick Start

Create a new project

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

Install React

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

Create app.tsx

app.tsx

import React from "react";

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

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");

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

⌘I

Ecosystem

HTTP & WebSocket

File System

Testing

Use React and JSX

Quick Start

JSX Configuration

Next Steps

Next.js

JSX

​Quick Start

​JSX Configuration

​Next Steps

Next.js

JSX

Quick Start

JSX Configuration

Next Steps