diff --git a/docs/runtime/jsx.mdx b/docs/runtime/jsx.mdx index af3f4882ca1c..657ddf8a9707 100644 --- a/docs/runtime/jsx.mdx +++ b/docs/runtime/jsx.mdx @@ -38,6 +38,15 @@ How JSX constructs are transformed into vanilla JavaScript internally. The follo | `json
{
"jsx": "react-jsxdev"
}
` | `tsx
import { jsxDEV } from "react/jsx-dev-runtime";
jsxDEV(
"Box",
{ width: 5, children: "Hello" },
undefined,
false,
undefined,
this,
);
`

The `jsxDEV` variable name is a React convention. The `DEV` suffix marks code intended for development. The development version of React is slower and includes additional validity checks & debugging tools. | | `json
{
"jsx": "preserve"
}
` | `tsx
// JSX is not transpiled
// "preserve" is not supported by Bun currently
Hello
` | + + `"react-jsx"` selects the production automatic runtime (`jsx`/`jsxs` from `/jsx-runtime`) and `"react-jsxdev"` + selects the development runtime (`jsxDEV` from `/jsx-dev-runtime`), matching TypeScript and esbuild. Use + `"react-jsxdev"` during development if you want the `jsxDEV` entry point. + +Prior to Bun 1.4, `"react-jsx"` behaved like `"react-jsxdev"` and emitted the development runtime. + + + ### [`jsxFactory`](https://www.typescriptlang.org/tsconfig#jsxFactory) Only applicable when `jsx` is `react`.