Saltar al contenido principal

@babel/preset-react

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 →

Este preset siempre incluye los siguientes plugins:

Y con la opción development:

El runtime clásico añade:

El runtime automático (desde v7.9.0) añade la funcionalidad de estos plugins automáticamente cuando se habilita la opción development. Si tienes el runtime automático habilitado, añadir @babel/plugin-transform-react-jsx-self o @babel/plugin-transform-react-jsx-source producirá un error.

Nota: El soporte para sintaxis Flow ya no está habilitado en v7. Para ello, necesitarás añadir el preset de Flow.

Instalación​

También puedes consultar la página de inicio de React

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

Uso​

Mediante un archivo de configuración (Recomendado)​

Sin opciones:

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

Con opciones:

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

Mediante la CLI​

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

Mediante la API de Node​

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

Opciones​

Ambos Runtimes​

runtime​

classic | automatic, valor predeterminado: classic

Añadido en: v7.9.0

Nota: El runtime predeterminado cambiará a automatic en Babel 8.

Determina qué runtime usar.

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

development​

boolean, valor predeterminado: false.

Activa o desactiva comportamientos específicos de desarrollo, como añadir __source y __self.

Es útil cuando se combina con la configuración de la opción env o archivos de configuración js.

throwIfNamespace​

boolean, valor predeterminado: true.

Activa o desactiva si se lanza 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.

pure​

boolean, valor predeterminado: true.

Habilita @babel/plugin-transform-react-pure-annotations. Marcará las llamadas a métodos de React de nivel superior como puras para tree shaking.

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

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, valor predeterminado: false.

advertencia

Esta opción será eliminada en Babel 8. Establece useBuiltIns en true si estás orientado a navegadores modernos.

Utilizará el built-in nativo en lugar de intentar aplicar un polyfill al comportamiento de cualquier plugin que lo requiera.

useSpread​

boolean, valor predeterminado: false.

Añadido en: v7.7.0

advertencia

Esta opción será eliminada en Babel 8. Establece useSpread en true si estás orientado a navegadores modernos.

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

babel.config.js​

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

babel.config.json​

Nota: la opción env probablemente quedará obsoleta pronto

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

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