# General Translation React SDKs (gt-react, gt-next): Traducir JSX
URL: https://generaltranslation.com/es/docs/react/guides/translating-jsx.mdx
---

title: Traducir JSX
description: Cómo traducir JSX en el mismo documento con el componente <T> de General Translation en React, Next.js, TanStack Start y React Native.
related:
  links:
    - /docs/react/guides/translating-strings
    - /docs/react/guides/formatting-variables
    - /docs/react/guides/handling-plurals-and-branches
    - /docs/react/guides/translating-with-dictionaries

---

El componente [`<T>`](/docs/react/reference/components/t) traduce sus elementos hijos de JSX a la configuración regional activa. Escribe tu contenido en tu idioma de origen y envuélvelo: General Translation extrae el texto, lo traduce y muestra el resultado en el mismo documento.

El componente se comporta de forma idéntica en todos los frameworks; solo cambia el paquete de importación.

## Envuelve el contenido en `<T>` [#wrap]

Envuelve cualquier JSX que contenga texto visible para el usuario. El marcado y los elementos anidados se conservan en la traducción.

<Tabs items={['React', 'Next.js', 'TanStack Start', 'React Native']}>
  <Tab value="React">
    ```tsx
    import { T } from 'gt-react';

    <T>
      <h1>Welcome back</h1>
      <p>Your order is on its way.</p>
    </T>;
    ```
  </Tab>

  <Tab value="Next.js">
    ```tsx
    import { T } from 'gt-next';

    <T>
      <h1>Welcome back</h1>
      <p>Your order is on its way.</p>
    </T>;
    ```

    *Nota: En Next.js, `<T>` funciona tanto en componentes de servidor como en componentes de cliente; la misma importación de `gt-next` se resuelve automáticamente a la implementación de servidor o cliente.*
  </Tab>

  <Tab value="TanStack Start">
    ```tsx
    import { T } from 'gt-tanstack-start';

    <T>
      <h1>Welcome back</h1>
      <p>Your order is on its way.</p>
    </T>;
    ```
  </Tab>

  <Tab value="React Native">
    ```tsx
    import { T } from 'gt-react-native';

    <T>
      <Text>Welcome back</Text>
      <Text>Your order is on its way.</Text>
    </T>;
    ```

    *Nota: En React Native, envuelve nodos de texto nativos como `<Text>` en lugar de elementos HTML.*
  </Tab>
</Tabs>

No asignes una key ni un id: General Translation identifica la entrada a partir de su contenido. Mantén el contenido estático; usa componentes variables para los valores dinámicos (consulta [Formatting numbers and dates](/docs/react/guides/formatting-variables)).

## Desambigua con contexto [#context]

Cuando un mismo texto puede traducirse de formas distintas según el significado, agrega `$context` para que los traductores y el motor puedan diferenciar las entradas. Esto funciona igual en todos los frameworks.

```tsx
<T $context="a bank of a river">
  <span>Bank</span>
</T>;
```

## Mantén estables las entradas con un id [#id]

Pasa `$id` para darle a una entrada un identificador estable que no cambie cuando edites el marcado de alrededor. Esto es opcional; úsalo cuando quieras una referencia fija para una entrada.

```tsx
<T $id="home.hero.title">
  <h1>Welcome back</h1>
</T>;
```

*Nota: El contenido dentro de `<T>` debe ser JSX estático. Mueve los valores condicionales o interpolados a [`<Var>`](/docs/react/reference/components/var), [`<Plural>`](/docs/react/reference/components/plural) o [`<Branch>`](/docs/react/reference/components/branch) para que el texto que lo rodea siga siendo traducible.*
## Next steps

- /docs/react/guides/translating-strings
- /docs/react/guides/formatting-variables
- /docs/react/guides/handling-plurals-and-branches
- /docs/react/guides/translating-with-dictionaries