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

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

El [componente `<T>`](/docs/react-native/api/components/t) es la herramienta principal para internacionalizar el contenido JSX de tu aplicación de React Native. Envuelve tus 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.
  Puede que no necesites agregar `<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-native/api/components/t):

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

// 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-native/api/components/t), usa [componentes de variable](/docs/react-native/guides/variables) y [componentes condicionales](/docs/react-native/guides/branches).


## Uso básico

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

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

### Agregar contexto

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

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


## Cuándo usar T

Usa [`<T>`](/docs/react-native/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 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 componentes condicionales están diseñados para usarse dentro de [`<T>`](/docs/react-native/api/components/t) con contenido dinámico.
  Consulta las guías de [Componentes de variable](/docs/react-native/guides/variables) y [Componentes condicionales](/docs/react-native/guides/branches) para 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-native/api/components/var) en la [Guía de componentes de variable](/docs/react-native/guides/variables).
</Callout>


## Configuración para producción

### Proceso de compilación

Añade 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

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

Configura tu clave de API de desarrollo en el 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-native/api/components/t) se envía a la API de GT para traducirse. Si manejas datos sensibles, usa [componentes de variable](/docs/react-native/guides/variables) para mantener la información privada en local:

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


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

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

```jsx
// ✅ Correcto — agrupar contenido relacionado da a los traductores 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 práctica:** si un 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).

Agrupar más contenido en un único `<T>` da más contexto a los traductores, lo que permite obtener traducciones más naturales: algunos idiomas reestructuran las frases o necesitan hacer referencia al contenido cercano.


## Problemas comunes

### Límites de los componentes

[`<T>`](/docs/react-native/api/components/t) solo traduce los elementos secundarios 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 />
```


### Componentes T anidados

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


### Errores de contenido dinámico

La CLI generará un error si hay contenido dinámico en [`<T>`](/docs/react-native/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-native/guides/variables) para manejar valores dinámicos y la [Guía de componentes condicionales](/docs/react-native/guides/branches) para el contenido condicional.
</Callout>


## Próximos pasos

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

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