メインコンテンツへスキップ

@babel/preset-react

このプリセットには、常に以下のプラグインが含まれています。

そして、`development` オプションを有効にすると

Classic ランタイムでは以下が追加されます

Automatic ランタイム ( `v7.9.0` 以降) では、 `development` オプションが有効になっている場合、これらのプラグインの機能が自動的に追加されます。 Automatic ランタイムが有効になっている場合、@babel/plugin-transform-react-jsx-self または @babel/plugin-transform-react-jsx-source を追加するとエラーが発生します。

注: v7 では Flow 構文のサポートは有効ではなくなりました。 Flow を使用するには、Flow プリセットを追加する必要があります。

インストール​

React の 入門ページもご覧ください。

npm install --save-dev @babel/preset-react

使用方法​

オプションなし

babel.config.json
{
  "presets": ["@babel/preset-react"]
}

オプションあり

babel.config.json
{
  "presets": [
    [
      "@babel/preset-react",
      {
        "pragma": "dom", // default pragma is React.createElement (only in classic runtime)
        "pragmaFrag": "DomFrag", // default is React.Fragment (only in classic runtime)
        "throwIfNamespace": false, // defaults to true
        "runtime": "classic" // defaults to classic
        // "importSource": "custom-jsx-library" // defaults to react (only in automatic runtime)
      }
    ]
  ]
}

CLI 経由​

シェル
babel --presets @babel/preset-react script.js

Node API 経由​

JavaScript
require("@babel/core").transformSync("code", {
  presets: ["@babel/preset-react"],
});

オプション​

両ランタイム​

`runtime`​

`classic` | `automatic`、デフォルトは `classic`

追加バージョン: `v7.9.0`

注: デフォルトのランタイムは Babel 8 で `automatic` に切り替わります。

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

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

`development`​

`boolean`、デフォルトは `false`。

`__source` や `__self` を追加するなど、開発に固有の動作を切り替えます。

これは、env オプション設定または js 設定ファイルと組み合わせると便利です。

`throwIfNamespace`​

`boolean`、デフォルトは `true`。

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

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

`pure`​

`boolean`、デフォルトは `true`。

`@babel/plugin-transform-react-pure-annotations` を有効にします。これは、ツリーシェイキングのためにトップレベルの React メソッド呼び出しを pure としてマークします。

React Automatic ランタイム​

`importSource`​

`string`、デフォルトは `react`。

追加バージョン: `v7.9.0`

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

React Classic ランタイム​

`pragma`​

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

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

`pragmaFrag`​

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

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

`useBuiltIns`​

`boolean`、デフォルトは `false`。

警告

このオプションは Babel 8 で削除されます。モダンブラウザをターゲットにしている場合は、`useBuiltIns` を `true` に設定してください。

動作をポリフィルする代わりに、ネイティブの組み込み関数を使用します。

`useSpread`​

`boolean`、デフォルトは `false`。

追加バージョン: `v7.7.0`

警告

このオプションは Babel 8 で削除されます。モダンブラウザをターゲットにしている場合は、 `useSpread` を `true` に設定してください。

props を展開する場合、Babel の extend ヘルパーまたは `Object.assign` の代わりに、スプレッド要素を含むインラインオブジェクトを直接使用します。

:::

babel.config.js​

babel.config.js
module.exports = {
  presets: [
    [
      "@babel/preset-react",
      {
        development: process.env.BABEL_ENV === "development",
      },
    ],
  ],
};

babel.config.json​

注: `env` オプションは近日中に廃止される予定です。

babel.config.json
{
  "presets": ["@babel/preset-react"],
  "env": {
    "development": {
      "presets": [["@babel/preset-react", { "development": true }]]
    }
  }
}

プリセットオプションの設定について詳しくは、こちらをご覧ください。