# gt: General Translation CLI tool: Uso de la inyección automática de JSX
URL: https://generaltranslation.com/es/docs/cli/guides/using-auto-jsx.mdx
---

title: Uso de la inyección automática de JSX
description: Cómo envolver texto JSX traducible en componentes de General Translation en tiempo de compilación mediante la inyección automática de JSX.
related:
  links:
    - /docs/cli/guides/using-autoderive
    - /docs/cli/guides/generating-translations
    - /docs/cli/guides/configuring
    - /docs/cli/guides/managing-translations

---

La inyección automática de JSX hace que el compilador envuelva el texto JSX traducible en componentes [`<T>`](/docs/react/reference/components/t) en tiempo de compilación, por lo que no tienes que agregarlos manualmente.

La inyección automática de JSX está desactivada de forma predeterminada. Funciona en aplicaciones React de una sola página (SPA) y en compilaciones de webpack de Next.js.

## Habilitar la inyección automática de JSX [#enable]

Instala el compilador:

<Tabs items={['npm', 'yarn', 'bun', 'pnpm']}>
  <Tab value="npm">
    ```bash
    npm install @generaltranslation/compiler
    ```
  </Tab>

  <Tab value="yarn">
    ```bash
    yarn add @generaltranslation/compiler
    ```
  </Tab>

  <Tab value="bun">
    ```bash
    bun add @generaltranslation/compiler
    ```
  </Tab>

  <Tab value="pnpm">
    ```bash
    pnpm add @generaltranslation/compiler
    ```
  </Tab>
</Tabs>

Configura `enableAutoJsxInjection` en `files.gt.parsingFlags` de `gt.config.json`. Esto mantiene sincronizadas la extracción de la CLI y las transformaciones del compilador.

```json title="gt.config.json"
{
  "files": {
    "gt": {
      "parsingFlags": {
        "enableAutoJsxInjection": true
      }
    }
  }
}
```

## Configura la compilación [#configure-build]

La opción de `gt.config.json` surte efecto cuando se ejecuta el compilador de General Translation.

### aplicación de una sola página de React

Agrega `@generaltranslation/compiler` a la configuración de Vite, webpack, Rollup, Rspack o esbuild. Consulta [Desarrollo con traducciones para SPA](/docs/react/guides/developing-spa-translations#setup) para ver ejemplos de adaptadores.

### Next.js

Configura `gt-next` para usar el compilador de webpack basado en Babel:

```ts title="next.config.ts"
import { withGTConfig } from 'gt-next/config';

const nextConfig = {};

export default withGTConfig(nextConfig, {
  experimentalCompilerOptions: {
    type: 'babel',
    enableAutoJsxInjection: true,
  },
});
```

Ejecuta tanto el servidor de desarrollo como la compilación para producción con webpack:

```json title="package.json"
{
  "scripts": {
    "dev": "next dev --webpack",
    "build": "next build --webpack"
  }
}
```

Next.js 16 usa Turbopack de forma predeterminada. Turbopack deshabilita el compilador Babel, advierte que se omitirá la inyección automática y deja el JSX sin envolver en componentes. Consulta [las opciones del compilador de Next.js](/docs/react/nextjs/config#compiler-options).

## Cómo funciona [#how]

Sin inyección, debes envolver tú mismo el texto traducible.

```jsx
import { T } from 'gt-react';

function Welcome() {
  return (
    <T>
      <h1>Welcome to our app</h1>
    </T>
  );
}
```

En los proyectos de Next.js, [`<T>`](/docs/react/reference/components/t) se importa desde `gt-next` en su lugar.

Con la inyección habilitada, el compilador detecta el texto traducible y lo envuelve automáticamente en tiempo de compilación.

```jsx
function Welcome() {
  return <h1>Welcome to our app</h1>;
}
```

El texto que ya has envuelto en [`<T>`](/docs/react/reference/components/t), junto con otros componentes de General Translation como [`<Var>`](/docs/react/reference/components/var), [`<Branch>`](/docs/react/reference/components/branch), [`<Plural>`](/docs/react/reference/components/plural) y [`<Derive>`](/docs/react/reference/components/derive), permanece sin cambios.
## Next steps

- /docs/cli/guides/using-autoderive
- /docs/cli/guides/generating-translations
- /docs/cli/guides/configuring
- /docs/cli/guides/managing-translations