@babel/plugin-transform-react-jsx

Traduction Bêta Non Officielle

Cette page a été traduite par PageTurner AI (bêta). Non approuvée officiellement par le projet. Vous avez trouvé une erreur ? Signaler un problème →

info

Ce plugin est inclus dans @babel/preset-react

Ce plugin génère du code JS prêt pour la production. Si vous développez une application React dans un environnement de développement, utilisez plutôt @babel/plugin-transform-react-jsx-development pour une meilleure expérience de débogage.

Exemple

Runtime automatique React

Le runtime automatique est une fonctionnalité ajoutée dans v7.9.0. Lorsqu'il est activé, les fonctions vers lesquelles JSX est compilé sont importées automatiquement.

Entrée

JavaScript

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

Sortie

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

Personnalisation de l'import du runtime automatique

Entrée

JavaScript

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

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

Sortie

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

Entrée

JavaScript

/** @jsxRuntime classic */

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

Sortie

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 classique React

Si vous ne souhaitez pas (ou ne pouvez pas) utiliser l'import automatique, vous pouvez utiliser le runtime classique, qui est le comportement par défaut pour v7 et les versions antérieures.

Entrée

JavaScript

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

Sortie

JavaScript

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

Personnalisation de l'import du runtime classique

Entrée

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

Sortie

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

Fragments

Les Fragments sont une fonctionnalité disponible dans React 16.2.0+.

Runtime automatique React

Entrée

JavaScript

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

Sortie

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 classique React

Entrée

JavaScript

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

Sortie

JavaScript

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

Personnalisation avec le runtime classique

Entrée

JavaScript

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

import Preact from "preact";

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

Sortie

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

Notez que si une pragma personnalisée est spécifiée, une pragma de fragment personnalisée doit également être définie si la syntaxe de fragment <></> est utilisée. Sinon, une erreur sera générée.

Installation

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

Utilisation

Avec un fichier de configuration (Recommandé)

Sans options :

babel.config.json

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

Avec options :

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

Via CLI

Shell

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

Via l'API Node

JavaScript

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

Options

Pour les deux runtimes

throwIfNamespace

boolean, par défaut true.

Active ou désactive la génération d'une erreur si un nom de balise avec espace de nom XML est utilisé. Exemple :

Bien que la spécification JSX le permette, cette fonctionnalité est désactivée par défaut car le JSX de React ne la prend actuellement pas en charge.

astuce

Vous pouvez en savoir plus sur la configuration des options de plugin ici

runtime

classic | automatic, par défaut classic

Ajouté dans : v7.9.0

Détermine quel runtime utiliser.

automatic importe automatiquement les fonctions vers lesquelles JSX est transpilé. classic n'importe rien automatiquement.

Runtime automatique React

importSource

string, par défaut react.

Ajouté dans : v7.9.0

Remplace la source d'import lors de l'importation des fonctions.

Runtime classique React

pragma

string, par défaut React.createElement.

Remplace la fonction utilisée lors de la compilation des expressions JSX. Doit être un nom qualifié (ex. React.createElement) ou un identifiant (ex. createElement).

Notez que la pragma @jsx React.DOM est dépréciée depuis React v0.12.

pragmaFrag

string, par défaut React.Fragment.

Remplace le composant utilisé lors de la compilation des fragments JSX. Il doit s'agir d'un nom de balise JSX valide.

useBuiltIns

boolean, par défaut false.

Lors de l'étalement des props, utilise Object.assign directement au lieu de l'aide d'extension de Babel.

useSpread

boolean, par défaut false.

Lors de l'étalement des props, utilise un objet en ligne avec des éléments étalés directement au lieu de l'aide d'extension de Babel ou de Object.assign.