Bun

GuidesEcosystem

Use React and JSX with Bun

React just works with Bun. Bun supports .jsx and .tsx files out of the box.

Remember that JSX is just a special syntax for including HTML-like syntax in JavaScript files. React uses JSX syntax, as do alternatives like Preact and Solid. Bun's internal transpiler converts JSX syntax into vanilla JavaScript before execution.

Bun assumes you're using React (unless you configure it otherwise) so a line like this:

const element = <h1>Hello, world!</h1>;

is internally converted into something like this:

// jsxDEV
import { jsx } from "react/jsx-dev-runtime";

const element = jsx("h1", { children: "Hello, world!" });

This code requires react to run, so make sure you've installed React.

bun install react

Bun implements special logging for JSX components to make debugging easier.

bun run log-my-component.tsx
<Component message="Hello world!" />

As far as "official support" for React goes, that's it. React is a library like any other, and Bun can run that library. Bun is not a framework, so you should use a framework like Vite to build an app with server-side rendering and hot reloading in the browser.

Refer to Runtime > JSX for complete documentation on configuring JSX.