# 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
Docs index: https://generaltranslation.com/llms.txt
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.

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), en aplicaciones React renderizadas en el servidor 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.

### Aplicaciones React (que no son SPA) [#react-apps]

Para aplicaciones React renderizadas en el servidor que usan Vite, añade el plugin compilador a tu configuración de Vite:

```ts title="vite.config.ts"
import react from '@vitejs/plugin-react';
import { vite as gtCompiler } from '@generaltranslation/compiler';
import { defineConfig } from 'vite';
import gtConfig from './gt.config.json';

export default defineConfig({
  plugins: [react(), gtCompiler(gtConfig)],
});
```

### 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

## Sitemap

See the full [sitemap](https://generaltranslation.com/sitemap.md) for all pages.