# gt-react: General Translation React SDK: Compilador
URL: https://generaltranslation.com/es/docs/react/concepts/compiler.mdx
---
title: Compilador
description: Cómo la CLI de gt procesa tus archivos de origen de React
---

La CLI de `gt` incluye un compilador que analiza tus archivos de origen de React en tiempo de construcción. Detecta errores comunes de traducción y, de forma opcional, puede automatizar el uso de componentes de traducción para envolver JSX.

## Funcionalidades

### Detección de contenido dinámico

Detecta contenido dinámico no envuelto en componentes de traducción:

```jsx
// ❌ Inválido - contenido dinámico sin envolver
<T>Hello {userName}</T>

// ✅ Válido - contenido dinámico envuelto en un componente variable  
<T>Hello <Var>{userName}</Var></T>
```


### Validación de llamadas a funciones

Detecta argumentos no literales que se pasan a funciones de traducción:

```jsx
const gt = useGT();

// ❌ Inválido - literales de plantilla y concatenación
gt(`Hello ${name}`)
gt("Hello " + name)

// ✅ Válido - cadenas literales con sustitución de variables
gt("Hello, {name}!", { name })
```


## inyección automática de JSX

Con inyección automática de JSX activado, el compilador envuelve automáticamente el texto traducible de JSX en componentes de traducción, así no tienes que añadir manualmente componentes `<T>` alrededor de cada fragmento de texto.

### Activar la inyección automática de JSX

Agrega `enableAutoJsxInjection` a tu `gt.config.json`:

```json title="gt.config.json"
{
  "files": {
    "gt": {
      "output": "public/_gt/[locale].json",
      "parsingFlags": {
        "enableAutoJsxInjection": true
      }
    }
  }
}
```


### Antes y después

Sin inyección automática de JSX, debes envolver el texto manualmente:

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

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

Con inyección automática de JSX habilitado, escribes JSX simple y el compilador se encarga del resto:

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

El compilador detecta el texto traducible y lo encapsula automáticamente cuando ejecutas `npx gt translate`.


### Lo que respeta el compilador

* Los **componentes `<T>` escritos por el usuario** se dejan intactos: el compilador no envolverá tu código dos veces
* También respeta **otros componentes de GT** como `<Var>`, `<Branch>`, `<Plural>` y `<Derive>`
* Los **atributos de cadena** (p. ej., `placeholder`, `alt`) no se ven afectados: solo se envuelve el contenido JSX
* Se ignora el **contenido no textual**, como números y booleanos