@babel/plugin-transform-react-jsx

What is @babel/plugin-transform-react-jsx?

The @babel/plugin-transform-react-jsx package is a Babel plugin that transforms JSX syntax into standard JavaScript function calls that browsers can understand. JSX is a syntax extension for JavaScript that is typically used with React to describe what the UI should look like. By transforming JSX into JavaScript, this plugin allows developers to write their components in a more readable and expressive way while still being able to run them in environments that do not understand JSX natively.

What are @babel/plugin-transform-react-jsx's main functionalities?

Transform JSX to React.createElement calls

This feature transforms JSX syntax into equivalent React.createElement calls. The above JSX code would be transformed into something like: React.createElement('div', { className: 'greeting' }, 'Hello, world!');

const element = <div className='greeting'>Hello, world!</div>;

Custom pragma support

This feature allows the use of a custom pragma (a comment that specifies which function to use instead of React.createElement) to tell Babel to use a different function to create elements. The above code would be transformed to use myCreateElement instead of React.createElement.

/** @jsx myCreateElement */ const element = <div className='greeting'>Hello, world!</div>;

Fragment syntax support

This feature supports the transformation of React Fragment syntax into React.createElement calls. The above code would be transformed into React.createElement(React.Fragment, null, React.createElement(ChildA, null), React.createElement(ChildB, null));

const element = <> <ChildA /> <ChildB /> </>;

Other packages similar to @babel/plugin-transform-react-jsx

@vue/babel-plugin-transform-vue-jsx

This package is similar to @babel/plugin-transform-react-jsx but is tailored for Vue.js instead of React. It transforms JSX syntax into Vue's render function calls.

babel-plugin-inferno

This Babel plugin is designed for the Inferno library, which is similar to React. It transforms JSX into calls that are compatible with Inferno's createElement function.

babel-preset-solid

This package includes a Babel plugin that transforms JSX for the Solid.js library, which is a declarative JavaScript library for building user interfaces, similar to React but with a different reactivity model.

README

@babel/plugin-transform-react-jsx

Turn JSX into React function calls

Example

React

In

var profile = <div>
  <img src="avatar.png" className="profile" />
  <h3>{[user.firstName, user.lastName].join(' ')}</h3>
</div>;

Out

var profile = React.createElement("div", null,
  React.createElement("img", { src: "avatar.png", className: "profile" }),
  React.createElement("h3", null, [user.firstName, user.lastName].join(" "))
);

Custom

In

/** @jsx dom */

var { dom } = require("deku");

var profile = <div>
  <img src="avatar.png" className="profile" />
  <h3>{[user.firstName, user.lastName].join(' ')}</h3>
</div>;

Out

/** @jsx dom */

var dom = require("deku").dom;

var profile = dom("div", null,
  dom("img", { src: "avatar.png", className: "profile" }),
  dom("h3", null, [user.firstName, user.lastName].join(" "))
);

Fragments

Fragments are a feature available in React 16.2.0+.

React

In

var descriptions = items.map(item => (
  <>
    <dt>{item.name}</dt>
    <dd>{item.value}</dd>
  </>
));

Out

var descriptions = items.map(item => React.createElement(
  React.Fragment,
  null,
  React.createElement("dt", null, item.name),
  React.createElement("dd", null, item.value)
));

Custom

In

/** @jsx dom */
/** @jsxFrag DomFrag */

var { dom, DomFrag } = require("deku"); // DomFrag is fictional!

var descriptions = items.map(item => (
  <>
    <dt>{item.name}</dt>
    <dd>{item.value}</dd>
  </>
));

Out

/** @jsx dom */
/** @jsxFrag DomFrag */

var { dom, DomFrag } = require("deku"); // DomFrag is fictional!

var descriptions = items.map(item => dom(
  DomFrag,
  null,
  dom("dt", null, item.name),
  dom("dd", null, item.value)
));

Note that if a custom pragma is specified, then a custom fragment pragma must also be specified if the <></> is used. Otherwise, an error will be thrown.

Installation

npm install --save-dev @babel/plugin-transform-react-jsx

Usage

Via .babelrc (Recommended)

.babelrc

Without options:

{
  "plugins": ["@babel/plugin-transform-react-jsx"]
}

With options:

{
  "plugins": [
    ["@babel/plugin-transform-react-jsx", {
      "pragma": "dom", // default pragma is React.createElement
      "pragmaFrag": "DomFrag", // default is React.Fragment
      "throwIfNamespace": false // defaults to true
    }]
  ]
}

Via CLI

babel --plugins @babel/plugin-transform-react-jsx script.js

Via Node API

require("@babel/core").transform("code", {
  plugins: ["@babel/plugin-transform-react-jsx"]
});

Options

pragma

string, defaults to React.createElement.

Replace the function used when compiling JSX expressions.

Note that the @jsx React.DOM pragma has been deprecated as of React v0.12

pragmaFrag

string, defaults to React.Fragment.

Replace the component used when compiling JSX fragments.

useBuiltIns

boolean, defaults to false.

When spreading props, use Object.assign directly instead of Babel's extend helper.

throwIfNamespace

boolean, defaults to true.

Toggles whether or not to throw an error if a XML namespaced tag name is used. For example:

<f:image />

Though the JSX spec allows this, it is disabled by default since React's JSX does not currently have support for it.