# gt-react: General Translation React SDK: T
URL: https://generaltranslation.com/es/docs/react/api/components/t.mdx
---
title: T
description: Referencia de la API del componente T
---

{/* GENERADO AUTOMÁTICAMENTE: No edites esto directamente. En su lugar, edita el template en content/docs-templates/. */}


## Descripción general

El componente `<T>` es el método principal de traducción en `gt-react`.

```jsx
<T id="example"> // [!code highlight]
    Today, I went to
    {" the store"}
    <p>
        to <b>buy</b> some <i>groceries</i>.
    </p>
</T> // [!code highlight]
```

El componente `<T>` admite la traducción de texto sin formato, así como de estructuras JSX complejas.
Además, ofrece funciones para gestionar variables, plurales y traducciones específicas del contexto.

<Callout>
  **Traducción en tiempo de construcción:**
  Las traducciones de `<T>` se realizan en tiempo de construcción.
  Esto significa que la traducción se lleva a cabo antes del despliegue para reducir la latencia.
  Asegúrate de seguir la [guía de despliegue en este enlace](/docs/react/tutorials/quickdeploy).
</Callout>

## Referencia

### Props

<TypeTable
  type={{
  "children": {
      type: 'any',
      optional: false,
  },
  "id": {
      type: 'string',
      optional: false,
  },
  "context?": {
      type: 'string',
      optional: true,
      default: 'undefined',
  },
}}
/>

### Descripciones

| Prop       | Descripción                                                                                           |
| ---------- | ----------------------------------------------------------------------------------------------------- |
| `children` | El contenido que se va a traducir. Puede incluir texto sin formato o estructuras JSX.                 |
| `id`       | Un identificador único para la cadena. Esto garantiza una traducción coherente en toda tu aplicación. |
| `context`  | Contexto adicional para ajustar la traducción. Útil para desambiguar frases.                          |

### Devuelve

`React.JSX.Element|undefined`, que contiene la traducción renderizada o el contenido de reserva según la configuración proporcionada.

***

## Funcionamiento

### Producción

Durante el proceso de CD, todo el contenido dentro de un `<T>` se traducirá antes de que se despliegue tu aplicación.
Esto garantiza tiempos de carga rápidos para todas las configuraciones regionales, pero solo puede traducir contenido conocido en tiempo de construcción.

Una vez generadas, las traducciones se almacenan (1) en la CDN o (2) en la salida de compilación de tu aplicación, según tu configuración.
A partir de ahí, el contenido traducido se sirve a tus usuarios.
Si no se encuentra una traducción, se usará el contenido original.

Asegúrate de seguir la [guía de despliegue aquí](/docs/react/tutorials/quickdeploy).

### Desarrollo

Durante el desarrollo, la función `<T>` traducirá el contenido on-demand.
Esto resulta útil para crear prototipos de cómo se verá tu aplicación en distintos idiomas.
Recuerda añadir una API key de desarrollo a tu entorno para habilitar este comportamiento.

Mientras se carga, `<T>` devolverá undefined, a menos que los idiomas sean similares (en-US vs en-GB), aunque este comportamiento se puede personalizar con la configuración de renderizado.
Si se produce un error, `<T>` devolverá el contenido original.

Verás una demora durante la traducción on-demand en desarrollo.
Esta demora no se producirá en las compilaciones de producción, ya que todo ya estará traducido.

***

## Ejemplos

### Uso básico

El componente `<T>` puede traducir cadenas simples usando un `id` y su contenido secundario.
Recuerda que el componente `<T>` debe usarse dentro de un [`<GTProvider>`](/docs/react/api/components/gtprovider) para acceder a las traducciones.

```jsx title="SimpleTranslation.jsx" copy
import { T } from 'gt-react';

export default function Greeting() {
    return (
        <T id="greeting"> // [!code highlight]
            Hello, world!
        </T> // [!code highlight]
    );
}
```


### Con variables

El componente `<T>` puede incluir variables para mostrar contenido dinámico dentro de las traducciones.

```jsx title="DynamicGreeting.jsx" copy
import { T, Var } from 'gt-react';

export default function DynamicGreeting(user) {
    return (
        <T id="greeting">
            Hello, <Var>{user.name}</Var>! // [!code highlight]
        </T>
    );
}
```


### Con plurales

El componente `<T>` también admite la pluralización con el componente `<Plural>`.

```jsx title="ItemCount.jsx" copy
import { T, Plural } from 'gt-react';

export default function ItemCount({ count }) {
    return (
        <T id="item_count">
            <Plural n={count}  // [!code highlight] 
                one={<>Tienes un artículo.</>}  // [!code highlight] 
                other={<>Tienes artículos.</>}  // [!code highlight] 
            />  // [!code highlight]
        </T>
    );
}
```


### Limitaciones

El componente `<T>` no traduce contenido dinámico.

```jsx title="DynamicContent.jsx" copy
import { T } from 'gt-react';

export default function DynamicContent({greeting}) {
    return (
        <T>
            {greeting} // generará un error // [!code highlight]
        </T>
    );
}
```

La función `<T>` traduce sus elementos hijos.

```jsx title="Example.jsx" copy
import { T } from 'gt-react';

const ValidTranslation = ({ children }) => (<div><b>{children}</b></div>);

const InvalidTranslation = ({ children }) => (<div><b>No translation</b></div>);

export default function Example() {
    return (
        <T>
            <div><b>This is valid!</b></div> // se traducirá // [!code highlight]

            <ValidTranslation> // se traducirá // [!code highlight]
                Hello, world! // [!code highlight]
            </ValidTranslation> // [!code highlight]

            <InvalidTranslation /> // no se traducirá
        </T>
    );
}
```

<Callout>
  **Nota:** Como regla general, cualquier contenido que esté *literalmente* entre los dos `<T>` del archivo se traducirá.
  Siempre puedes añadir otro `<T>` para traducir el contenido que no se esté traduciendo, aunque no se recomienda anidar componentes `<T>`.
</Callout>

***


## Notas

* El componente `<T>` está diseñado para traducir el contenido de tu aplicación. Es el método principal de localización en `gt-react`.
* Usa el componente `<T>` para traducir texto sin formato o estructuras JSX, incluidas variables y plurales.
* Asegúrate de que el componente `<T>` esté dentro de un [`<GTProvider>`](/docs/react/api/components/gtprovider) para acceder al contexto de traducción.

## Próximos pasos

* Para funciones más avanzadas, como la traducción on-demand, las variables, el contexto y el manejo de plurales, consulta la documentación sobre [patrones de diseño de `<T>`](/docs/react/guides/t).
* Para traducir cadenas, consulta [`useGT`](/docs/react/api/strings/use-gt).