Documentation Index
Fetch the complete documentation index at: https://mintlify.com/zhcndoc/bun/llms.txt
Use this file to discover all available pages before exploring further.
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
import React from "react";
export function App() {
return (
<div>
<h1>Hello from React + Bun!</h1>
</div>
);
}
Create 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");
JSX Configuration
Bun automatically transforms JSX. Configure it in 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
