# gt-react: General Translation React SDK: El componente T
URL: https://generaltranslation.com/es/docs/react/guides/t.mdx
---
title: El componente T
description: Cómo internacionalizar componentes JSX con el componente T
---

{/* GENERADO AUTOMÁTICAMENTE: No lo edites directamente. En su lugar, edita la plantilla en content/docs-templates/. */}

El [componente `<T>`](/docs/react/api/components/t) es la herramienta principal para internacionalizar el contenido JSX de tu aplicación React. Envuelve los elementos JSX y los traduce automáticamente según la configuración regional del usuario.

<Callout>
  **Consejo:** Con la [inyección automática de JSX](/docs/cli/features/auto-jsx-injection) habilitada, el compilador puede envolver automáticamente tu JSX en componentes de traducción en tiempo de construcción.
  Es posible que no necesites añadir `<T>` manualmente en la mayoría de los casos. Aun así, usar `<T>` manualmente sigue siendo útil cuando necesitas un control más preciso, por ejemplo, para establecer un `id` o un `context` específicos.
</Callout>

## Inicio rápido

Transforma cualquier contenido JSX estático envolviéndolo en [`<T>`](/docs/react/api/components/t):

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

// Antes
function Greeting() {
  return <p>Hello, world!</p>;
}

// Después
function Greeting() {
  return <T><p>Hello, world!</p></T>;
}
```

Para contenido dinámico dentro de [`<T>`](/docs/react/api/components/t), usa [Componentes de variable](/docs/react/guides/variables) y [Componentes de ramificación](/docs/react/guides/branches).

## Uso básico

El [componente `<T>`](/docs/react/api/components/t) acepta cualquier contenido JSX como `children`:

```jsx
// Texto simple
<T>Welcome to our app</T>

// Elementos HTML
<T><h1>Page Title</h1></T>

// JSX anidado complejo
<T>
  <div className="alert">
    <span>Important:</span> Please read carefully.
  </div>
</T>
```


## Opciones de configuración

### Añadir contexto

Proporciona contexto para la traducción de términos ambiguos:

```jsx
<T context="notification popup, not bread">
  Click the toast to dismiss
</T>
```


## Cuándo usar T

Usa [`<T>`](/docs/react/api/components/t) **solo para contenido estático**:

```jsx
// ✅ El contenido estático funciona
<T>
  <button>Click here</button>
  <h1>Welcome to our site</h1>
</T>

// ❌ El contenido dinámico falla
<T>
  <p>Hello {username}</p>
  <p>Today is {new Date()}</p>
</T>

// ✅ Usa componentes de variable para contenido dinámico
<T>
  <p>Hello <Var>{username}</Var></p>
</T>
```

<Callout>
  Los componentes de variable y de ramificación están diseñados para funcionar dentro de [`<T>`](/docs/react/api/components/t) con contenido dinámico.
  Consulta las guías de [Componentes de variable](/docs/react/guides/variables) y [Componentes de ramificación](/docs/react/guides/branches) para obtener más detalles.
</Callout>


## Ejemplos

### Elementos simples

```jsx
// Texto básico
<T>Hello, world!</T>

// Botón con texto
<T><Button>Submit Form</Button></T>

// Encabezado con estilos
<T><h1 className="text-2xl font-bold">Welcome</h1></T>
```


### Componentes complejos

```jsx
// Menú de navegación
<T>
  <nav className="navbar">
    <a href="/about">About Us</a>
    <a href="/contact">Contact</a>
  </nav>
</T>

// Mensaje de alerta
<T>
  <div className="alert alert-warning">
    <AlertIcon className="w-5 h-5" />
    <span>Your session expires in 5 minutes</span>
  </div>
</T>
```


### Con variables

Puedes usar componentes de variable para aplicar formato localizado.

```jsx
// Combinando texto estático con valores dinámicos
<T>
  <p>Welcome back, <Var>{user.name}</Var>!</p>
  <p>You have <Num>{user.friends.length}</Num> friends online</p>
  <p>Your birthday is <DateTime>{user.birthday}</DateTime></p>
  <p>Your balance is <Currency>{user.balance}</Currency></p>
</T>
```

<Callout>
  Más información sobre el [componente `<Var>`](/docs/react/api/components/var) en la [Guía de componentes de variable](/docs/react/guides/variables).
</Callout>


## Configuración para producción

### Proceso de compilación

Integra la traducción en tu flujo de compilación:

```json title="package.json"
{
  "scripts": {
    "build": "npx gt translate && <...YOUR_BUILD_COMMAND...>"
  }
}
```


### Comportamiento en desarrollo frente a producción

* **Desarrollo**: Con una clave de API de desarrollo, las traducciones se generan bajo demanda cuando se renderizan los componentes. Verás las traducciones en tiempo real mientras desarrollas.
* **Producción**: Todas las traducciones se generan previamente durante la fase de compilación y estarán disponibles una vez que tu aplicación esté en producción.

Configura tu clave de API de desarrollo en tu entorno para habilitar la traducción en tiempo real durante el desarrollo. Puedes crear una en el Dashboard, en [API Keys](https://dash.generaltranslation.com/en-US/project/api-keys).

### Consideraciones de privacidad

El contenido de los componentes [`<T>`](/docs/react/api/components/t) se envía a la API de GT para traducirse. Para datos sensibles, usa [componentes de variable](/docs/react/guides/variables) para mantener la información privada de forma local:

```jsx
// Seguro - los datos sensibles se mantienen locales
<T>
  Welcome back, <Var>{username}</Var>
</T>
```


## Cuánto incluir en un solo `<T>`

Envuelve **bloques lógicos de contenido**: contenido que un traductor leería y traduciría de forma natural como una sola unidad.

```jsx
// ✅ Correcto — agrupar contenido relacionado da a los traductores el contexto completo
<T>
  <h1>Welcome to Our Platform</h1>
  <p>Get started in minutes with our simple setup process.</p>
</T>

// ✅ Correcto — cada tarjeta es una unidad independiente
{features.map((feature) => (
  <T key={feature.id}>
    <h3><Var>{feature.title}</Var></h3>
    <p><Var>{feature.description}</Var></p>
  </T>
))}

// ❌ Demasiado granular — fragmenta la traducción y pierde contexto
<T><h1>Welcome to Our Platform</h1></T>
<T><p>Get started in minutes with our simple setup process.</p></T>

// ❌ Demasiado amplio — envolver toda la página dificulta el mantenimiento
<T>
  {/* ...cientos de líneas de JSX... */}
</T>
```

**Regla general:** si el texto está relacionado visual o semánticamente, envuélvelo en un solo `<T>`. Divídelo solo cuando el contenido sea realmente independiente (p. ej., un encabezado frente a un pie de página).

Envolver más contenido en un único `<T>` les da a los traductores un mejor contexto, lo que da lugar a traducciones más naturales: algunos idiomas reestructuran las oraciones o necesitan hacer referencia al contenido cercano.


## Problemas comunes

### Límites de componentes

[`<T>`](/docs/react/api/components/t) solo traduce los hijos directos, no el contenido dentro de otros componentes:

```jsx
// ❌ Incorrecto - el contenido dentro de los componentes no se traducirá
function MyComponent() {
  return <p>This won't be translated</p>;
}

<T>
  <h1>This will be translated</h1>
  <MyComponent /> {/* El contenido interno no se traducirá */}
</T>

// ✅ Correcto - envuelve cada componente individualmente
function MyComponent() {
  return <T><p>This will be translated</p></T>;
}

<T><h1>This will be translated</h1></T>
<MyComponent />
```


### Anidar componentes T

```jsx
// ❌ No anides componentes <T>
<T>
  <T>Hello world</T> {/* No hagas esto */}
</T>
```


### Errores de contenido dinámico

La CLI mostrará un error si hay contenido dinámico en [`<T>`](/docs/react/api/components/t). Envuelve los valores dinámicos con componentes de variable:

```jsx
// ❌ Incorrecto - el contenido dinámico falla
<T><p>Hello {username}</p></T>

// ✅ Correcto - usa componentes de variable
<T><p>Hello <Var>{username}</Var></p></T>
```

<Callout>
  Consulta la [Guía de componentes de variable](/docs/react/guides/variables) para gestionar valores dinámicos y la [Guía de componentes de ramificación](/docs/react/guides/branches) para contenido condicional.
</Callout>

## Próximos pasos

<Callout>
  **Míralo en acción:** Consulta la [app de ejemplo de conceptos básicos del componente `<T>`](https://github.com/gt-examples/t-component-basics) para ver una demostración funcional — [vista previa en vivo](https://t-component-basics.generaltranslation.dev).
</Callout>

* [Guía de componentes de variable](/docs/react/guides/variables) - Maneja contenido dinámico en las traducciones de JSX
* [Guía de componentes de ramificación](/docs/react/guides/branches) - Agrega lógica condicional a tus traducciones