TSConfig

jsx

Controls how JSX constructs are emitted in JavaScript files. This only affects output of JS files that started in .tsx files.

  • react-jsx: Emit .js files with the JSX changed to _jsx calls optimized for production
  • react-jsxdev: Emit .js files with the JSX changed to _jsx calls for development only
  • preserve: Emit .jsx files with the JSX unchanged
  • react-native: Emit .js files with the JSX unchanged
  • react: Emit .js files with JSX changed to the equivalent React.createElement calls

For example

This sample code:

tsx
export const HelloWorld = () => <h1>Hello world</h1>;

React: "react-jsx"[1]

tsx
import { jsx as _jsx } from "react/jsx-runtime";
export const HelloWorld = () => _jsx("h1", { children: "Hello world" });
 
Try

React dev transform: "react-jsxdev"[1]

tsx
import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
const _jsxFileName = "/home/runner/work/TypeScript-Website/TypeScript-Website/packages/typescriptlang-org/index.tsx";
export const HelloWorld = () => _jsxDEV("h1", { children: "Hello world" }, void 0, false, { fileName: _jsxFileName, lineNumber: 9, columnNumber: 32 }, this);
 
Try

Preserve: "preserve"

tsx
import React from 'react';
export const HelloWorld = () => <h1>Hello world</h1>;
 
Try

React Native: "react-native"

tsx
import React from 'react';
export const HelloWorld = () => <h1>Hello world</h1>;
 
Try

Legacy React runtime: "react"

tsx
import React from 'react';
export const HelloWorld = () => React.createElement("h1", null, "Hello world");
 
Try

This option can be used on a per-file basis too using an @jsxRuntime comment.

Always use the classic runtime ("react") for this file:

tsx
/* @jsxRuntime classic */
export const HelloWorld = () => <h1>Hello world</h1>;

Always use the automatic runtime ("react-jsx") for this file:

tsx
/* @jsxRuntime automatic */
export const HelloWorld = () => <h1>Hello world</h1>;