# 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 de JSX con el componente `<T>`
---

{/* GENERADO AUTOMÁTICAMENTE: No edites esto 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 contenido JSX en tu aplicación React Native. Envuelve los elementos JSX y los traduce automáticamente según la configuración regional del usuario.


## Inicio rápido

Transforma cualquier contenido JSX estático envolviéndolo con [`<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 el contenido dinámico dentro de [`<T>`](/docs/react-native/api/components/t), usa [componentes Variable](/docs/react-native/guides/variables) y [componente de bifurcación](/docs/react-native/guides/branches).

## Uso básico

El [componente `<T>`](/docs/react-native/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 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 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 usarse dentro de [`<T>`](/docs/react-native/api/components/t) con contenido dinámico.
  Consulta las guías [componentes Variable](/docs/react-native/guides/variables) y [componente de bifurcación](/docs/react-native/guides/branches) para 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 estilo
<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 Variable para dar 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>
  Obtener más información sobre el [componente `<Var>`](/docs/react-native/api/components/var) en la [Guía de componentes Variable](/docs/react-native/guides/variables).
</Callout>

## Configuración para producción

### Proceso de compilación

Añade la traducción a tu proceso 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 API de desarrollo, las traducciones se realizan bajo demanda cuando los componentes se renderizan. Verás la traducción 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.

Establece tu clave API de desarrollo en el 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 de privacidad

El contenido de los componentes [`<T>`](/docs/react-native/api/components/t) se envía a la API de GT para su traducción. Para datos sensibles, usa [componentes Variable](/docs/react-native/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-native/api/components/t) solo traduce los elementos hijo directos, no el contenido 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-native/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-native/guides/variables) para manejar valores dinámicos y la [Guía de componentes de bifurcación](/docs/react-native/guides/branches) para el contenido condicional.
</Callout>

## Siguientes pasos

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