@babel/plugin-transform-react-jsx

情報

このプラグインは@babel/preset-reactに含まれています。

このプラグインは、本番環境に対応したJSコードを生成します。開発環境でReactアプリケーションを開発している場合は、デバッグエクスペリエンス向上のために@babel/plugin-transform-react-jsx-developmentを使用してください。

例

React自動ランタイム

自動ランタイムはv7.9.0で追加された機能です。このランタイムを有効にすると、JSXがコンパイルされる関数が自動的にインポートされます。

入力

JavaScript

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

出力

JavaScript

import { jsx as _jsx } from "react/jsx-runtime";
import { jsxs as _jsxs } from "react/jsx-runtime";

const profile = _jsxs("div", {
  children: [
    _jsx("img", {
      src: "avatar.png",
      className: "profile",
    }),
    _jsx("h3", {
      children: [user.firstName, user.lastName].join(" "),
    }),
  ],
});

自動ランタイムインポートのカスタマイズ

入力

JavaScript

/** @jsxImportSource custom-jsx-library */

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

出力

JavaScript

import { jsx as _jsx } from "custom-jsx-library/jsx-runtime";
import { jsxs as _jsxs } from "custom-jsx-library/jsx-runtime";

const profile = _jsxs("div", {
  children: [
    _jsx("img", {
      src: "avatar.png",
      className: "profile",
    }),
    _jsx("h3", {
      children: [user.firstName, user.lastName].join(" "),
    }),
  ],
});

入力

JavaScript

/** @jsxRuntime classic */

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

出力

JavaScript

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

Reactクラシックランタイム

自動インポートを使用しない（または使用できない）場合は、v7以前のデフォルトの動作であるクラシックランタイムを使用できます。

入力

JavaScript

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

出力

JavaScript

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

クラシックランタイムインポートのカスタマイズ

入力

JavaScript

/** @jsx Preact.h */

import Preact from "preact";

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

出力

JavaScript

/** @jsx Preact.h */

import Preact from "preact";

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

フラグメント

フラグメントは、React 16.2.0以降で使用可能な機能です。

React自動ランタイム

入力

JavaScript

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

出力

JavaScript

import { jsxs as _jsxs } from "react/jsx-runtime";
import { Fragment as _Fragment } from "react/jsx-runtime";
import { jsx as _jsx } from "react/jsx-runtime";

const descriptions = items.map((item) =>
  _jsxs(_Fragment, {
    children: [
      _jsx("dt", {
        children: item.name,
      }),
      _jsx("dd", {
        children: item.value,
      }),
    ],
  })
);

Reactクラシックランタイム

入力

JavaScript

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

出力

JavaScript

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

クラシックランタイムでのカスタマイズ

入力

JavaScript

/** @jsx Preact.h */
/** @jsxFrag Preact.Fragment */

import Preact from "preact";

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

出力

JavaScript

/** @jsx Preact.h */
/** @jsxFrag Preact.Fragment */

import Preact from "preact";

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

カスタムpragmaが指定されている場合、フラグメント構文<></>を使用する場合は、カスタムフラグメントpragmaも指定する必要があることに注意してください。指定しないと、エラーが発生します。

インストール

npm

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

Yarn

yarn add --dev @babel/plugin-transform-react-jsx

pnpm

pnpm add --save-dev @babel/plugin-transform-react-jsx

使用方法

設定ファイルを使用する場合（推奨）

オプションなし

babel.config.json

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

オプションあり

babel.config.json

{
  "plugins": [
    [
      "@babel/plugin-transform-react-jsx",
      {
        "throwIfNamespace": false, // defaults to true
        "runtime": "automatic", // defaults to classic
        "importSource": "custom-jsx-library" // defaults to react
      }
    ]
  ]
}

CLI経由

シェル

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

Node API経由

JavaScript

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

オプション

両方のランタイム

throwIfNamespace

boolean、デフォルトはtrue。

XML名前空間付きタグ名を使用した場合にエラーをスローするかどうかを切り替えます。例えば

JSX仕様ではこれが許可されていますが、ReactのJSXは現在これをサポートしていないため、デフォルトでは無効になっています。

ヒント

プラグインオプションの設定について詳しくは、こちらをご覧ください。

runtime

classic | automatic、デフォルトはclassic

追加バージョン: v7.9.0

使用するランタイムを決定します。

automaticは、JSXがトランスパイルする関数を自動的にインポートします。 classicは、何も自動的にインポートしません。

React自動ランタイム

importSource

string、デフォルトはreact。

追加バージョン: v7.9.0

関数をインポートする際のインポートソースを置き換えます。

Reactクラシックランタイム

pragma

string、デフォルトはReact.createElement。

JSX式をコンパイルするときに使用される関数を置き換えます。修飾名（例：React.createElement）または識別子（例：createElement）である必要があります。

@jsx React.DOM pragmaはReact v0.12で非推奨になったことに注意してください。

pragmaFrag

string、デフォルトはReact.Fragment。

JSXフラグメントをコンパイルするときに使用されるコンポーネントを置き換えます。有効なJSXタグ名である必要があります。

useBuiltIns

boolean、デフォルトはfalse。

プロパティをスプレッドするときに、Babelの拡張ヘルパーの代わりにObject.assignを直接使用します。

`useSpread`

boolean、デフォルトはfalse。

プロパティをスプレッドするときに、Babelの拡張ヘルパーまたは`Object.assign`の代わりに、スプレッド要素を持つインラインオブジェクトを直接使用します。