@babel/plugin-transform-react-jsx

ПРИМЕЧАНИЕ: Этот плагин включён в @babel/preset-react

Пример

Автоматический запуск React

Автоматический запуск — это функция, добавленная в v7.9.0. При включённом автоматическом запуске функции, к которым транспилируется JSX, будут импортированы автоматически.

Вход

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

Выход

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(" "),
    }),
  ],
});

Настройка автоматического импорта запуска

Вход

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

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

Выход

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(" "),
    }),
  ],
});

Вход

/** @jsxRuntime classic */

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

Выход

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 и ранее.

Вход

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

Выход

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

Настройка импорта классического запуска

Вход

/** @jsx Preact.h */

import Preact from "preact";

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

Выход

/** @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

Вход

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

Выход

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

Вход

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

Выход

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

Настройка с классическим запуском

Вход

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

import Preact from "preact";

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

Выход

/** @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)
  )
);

Обратите внимание, что если указан пользовательский префикс, то пользовательский префикс фрагмента также должен быть указан, если используется синтаксис фрагмента <></>. В противном случае будет выброшено сообщение об ошибке.

Установка

npm
Yarn
pnpm

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

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

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

Использование

С файлом конфигурации (рекомендуется)

Без параметров:

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

С параметрами:

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

Через командную строку

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

Через API Node.js

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

Параметры

Оба запуска

`throwIfNamespace`

boolean, по умолчанию true.

Включает/выключает выброс ошибки, если используется имя тега с пространством имён XML. Например:

<f:image />

Хотя спецификация 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 устарел начиная с React v0.12

`pragmaFrag`

string, по умолчанию React.Fragment.

Заменяет компонент, используемый при транспиляции фрагментов JSX. Она должна быть допустимым именем тега JSX.

`useBuiltIns`

boolean, по умолчанию false.

При распространении свойств используйте Object.assign напрямую вместо вспомогательной функции Babel «extend».

`useSpread`

boolean, по умолчанию false.

При распространении свойств используйте вложенный объект со ссылками непосредственно вместо вспомогательной функции Babel «extend» или Object.assign.

© 2014-present Sebastian McKenzie
Licensed under the MIT License.
https://babeljs.io/docs/babel-plugin-transform-react-jsx/

Пример​

Автоматический запуск React​

Настройка автоматического импорта запуска​

Классический запуск React​

Настройка импорта классического запуска​

Фрагменты​

Автоматический запуск React​

Классический запуск React​

Настройка с классическим запуском​

Установка​

Использование​

С файлом конфигурации (рекомендуется)​

Через командную строку​

Через API Node.js​

Параметры​

Оба запуска​

throwIfNamespace​

runtime​

Автоматический запуск React​

importSource​

Классический запуск React​

pragma​

pragmaFrag​

useBuiltIns​

useSpread​

Пример

Автоматический запуск React

Настройка автоматического импорта запуска

Классический запуск React

Настройка импорта классического запуска

Фрагменты

Автоматический запуск React

Классический запуск React

Настройка с классическим запуском

Установка

Использование

С файлом конфигурации (рекомендуется)

Через командную строку

Через API Node.js

Параметры

Оба запуска

`throwIfNamespace`

`runtime`

Автоматический запуск React

importSource

Классический запуск React

`pragma`

`pragmaFrag`

`useBuiltIns`

`useSpread`