@babel/preset-react

Этот пресет всегда включает следующие плагины:

• @babel/plugin-syntax-jsx
• @babel/plugin-transform-react-jsx
• @babel/plugin-transform-react-display-name

И с опцией development:

Классический рантайм добавляет:

• @babel/plugin-transform-react-jsx-self
• @babel/plugin-transform-react-jsx-source

Автоматический рантайм (с v7.9.0) добавляет функциональность этих плагинов автоматически, когда включена опция development. Если у вас включён автоматический рантайм, добавление @babel/plugin-transform-react-jsx-self или @babel/plugin-transform-react-jsx-source приведёт к ошибке.

Примечание: поддержка синтаксиса Flow больше не включена в версии v7. Для этого вам потребуется добавить пресет Flow Flow preset.

Установка​

Вы также можете ознакомиться со страницей быстрой настройки React Getting Started page

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

yarn add --dev @babel/preset-react

pnpm add --save-dev @babel/preset-react

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

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

Без опций:

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

С опциями:

{
  "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)
      }
    ]
  ]
}

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

babel --presets @babel/preset-react script.js

Через Node API​

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

Опции​

Оба рантайма​

runtime​

classic | automatic, по умолчанию classic

Добавлен в: v7.9.0

Определяет, какой рантайм использовать.

automatic автоматически импортирует функции, к которым транспилируется JSX. classic ничего не импортирует автоматически.

development​

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

Это переключает поведение, специфичное для разработки, например, добавление __source и __self.

Это полезно в сочетании с настройками опции env или файлами конфигурации js.

throwIfNamespace​

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

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

<f:image />

Хотя спецификация JSX это допускает, по умолчанию эта функция отключена, так как в текущей реализации React JSX не поддерживает эту возможность.

pure​

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

Включает @babel/plugin-transform-react-pure-annotations. Это позволит пометить вызовы методов React верхнего уровня как чистые для удаления лишнего кода.

Автоматический рантайм React​

importSource​

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

Добавлен в: v7.9.0

Заменяет исходный импорт при импорте функций.

Классический рантайм React​

pragma​

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

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

pragmaFrag​

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

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

useBuiltIns​

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

Использует встроенный аналог вместо попытки полифилить поведение для плагинов, требующих его.

useSpread​

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

Добавлен в: v7.7.0

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

babel.config.js​

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

babel.config.json​

Примечание: опция env вероятно будет устаревать в ближайшее время

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

Дополнительную информацию о настройке опций пресета вы можете найти здесь