# 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 edites esto directamente. Edita la plantilla en content/docs-templates/. */}

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


## 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 Variable](/docs/react/guides/variables) y [componente de bifurcación](/docs/react/guides/branches).

## Uso básico

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

```jsx
// Texto sencillo
<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

### Agregar contexto

Proporciona contexto de traducción para los 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 con 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 no funciona
<T>
  <p>Hello {username}</p>
  <p>Today is {new Date()}</p>
</T>

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

<Callout>
  Los componentes Variable y componente de bifurcació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 Variable](/docs/react/guides/variables) y [componente de bifurcación](/docs/react/guides/branches) para obtener más detalles.
</Callout>

## Ejemplos

### Elementos sencillos

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

Puede usar componentes 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>
  Obtén más información sobre el [componente `<Var>`](/docs/react/api/components/var) en la [Guía de componentes Variable](/docs/react/guides/variables).
</Callout>

## Configuración para producción

### Proceso de compilación

Agrega la traducción a tu flujo de compilación:

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


### Comportamiento en desarrollo vs. producción

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

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

### Consideraciones sobre la privacidad

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

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

## Problemas comunes

### Límites de los 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>Esto no se traducirá</p>;
}

<T>
  <h1>Esto se traducirá</h1>
  <MyComponent /> {/* El contenido interno no se traducirá */}
</T>

// ✅ Correcto - envuelve cada componente de forma individual
function MyComponent() {
  return <T><p>Esto se traducirá</p></T>;
}

<T><h1>Esto se traducirá</h1></T>
<MyComponent />
```


### Anidación de componentes `<T>`

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


### Errores de contenido dinámico

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

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

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

<Callout>
  Consulta la [Guía de componentes Variable](/docs/react/guides/variables) para trabajar con valores dinámicos y la [Guía de componentes de bifurcación](/docs/react/guides/branches) para el contenido condicional.
</Callout>

## Próximos pasos

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