@babel/plugin-transform-react-jsx

Traducción Beta No Oficial

Esta página fue traducida por PageTurner AI (beta). No está respaldada oficialmente por el proyecto. ¿Encontraste un error? Reportar problema →

información

Este plugin está incluido en @babel/preset-react

Este plugin genera código JavaScript listo para producción. Si estás desarrollando una aplicación React en un entorno de desarrollo, utiliza @babel/plugin-transform-react-jsx-development para una mejor experiencia de depuración.

Ejemplo

Runtime Automático de React

El runtime automático es una característica añadida en v7.9.0. Con este runtime activado, las funciones a las que JSX se compila se importarán automáticamente.

Entrada

JavaScript

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

Salida

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

Personalización de la Importación Automática

Entrada

JavaScript

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

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

Salida

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

Entrada

JavaScript

/** @jsxRuntime classic */

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

Salida

JavaScript

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

Runtime Clásico de React

Si no deseas (o no puedes usar) la importación automática, puedes usar el runtime clásico, que es el comportamiento predeterminado para v7 y versiones anteriores.

Entrada

JavaScript

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

Salida

JavaScript

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

Personalización de la Importación Clásica

Entrada

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>
);

Salida

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

Fragmentos

Los fragmentos son una característica disponible en React 16.2.0+.

Runtime Automático de React

Entrada

JavaScript

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

Salida

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

Runtime Clásico de React

Entrada

JavaScript

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

Salida

JavaScript

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

Personalización con el Runtime Clásico

Entrada

JavaScript

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

import Preact from "preact";

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

Salida

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)
  )
);

Ten en cuenta que si se especifica una pragma personalizada, también debe especificarse una pragma de fragmento personalizada si se usa la sintaxis de fragmentos <></>. De lo contrario, se lanzará un error.

Instalación

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

Bun

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

Uso

Mediante un archivo de configuración (Recomendado)

Sin opciones:

babel.config.json

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

Con opciones:

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
      }
    ]
  ]
}

Mediante la CLI

Shell

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

Mediante la API de Node

JavaScript

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

Opciones

Ambos Runtimes

throwIfNamespace

boolean, valor predeterminado: true.

Activa/desactiva si se debe lanzar un error cuando se usa un nombre de etiqueta con espacio de nombres XML. Por ejemplo:

Aunque la especificación JSX lo permite, está desactivado por defecto ya que el JSX de React actualmente no lo soporta.

consejo

Puedes leer más sobre cómo configurar opciones de plugins aquí

runtime

classic | automatic, valor predeterminado: classic

Añadido en: v7.9.0

Determina qué runtime usar.

automatic importa automáticamente las funciones a las que JSX se transpila. classic no importa nada automáticamente.

Runtime Automático de React

importSource

string, valor predeterminado: react.

Añadido en: v7.9.0

Reemplaza la fuente de importación al importar funciones.

Runtime Clásico de React

pragma

string, valor predeterminado: React.createElement.

Reemplaza la función utilizada al compilar expresiones JSX. Debe ser un nombre calificado (ej. React.createElement) o un identificador (ej. createElement).

Nota: la pragma @jsx React.DOM está obsoleta desde React v0.12

pragmaFrag

string, valor predeterminado: React.Fragment.

Reemplaza el componente utilizado al compilar fragmentos de JSX. Debe ser un nombre de etiqueta JSX válido.

useBuiltIns

boolean, por defecto false.

Al esparcir props, usa Object.assign directamente en lugar del helper extend de Babel.

useSpread

boolean, por defecto false.

Al esparcir props, usa objetos en línea con elementos spread directamente en lugar del helper extend de Babel o Object.assign.