# General Translation React SDKs (gt-react, gt-next): Traduire du JSX
URL: https://generaltranslation.com/fr/docs/react/guides/translating-jsx.mdx
---
title: Traduire du JSX
description: Comment traduire du JSX sur place avec le composant <T> de General Translation dans React, Next.js, TanStack Start et 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

---

Le composant [`<T>`](/docs/react/reference/components/t) traduit ses éléments enfants JSX dans le paramètre régional actif. Rédigez votre contenu dans votre langue source et entourez-le de ce composant — General Translation extrait le texte, le traduit et affiche le résultat sur place.

Le composant se comporte de la même manière dans tous les frameworks ; seul le package d’importation change.

## Encapsuler le contenu dans `<T>` [#wrap]

Encapsulez tout JSX contenant du texte destiné à l’utilisateur. Le balisage et les éléments imbriqués sont conservés dans la traduction.

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

    *Remarque : dans Next.js, `<T>` fonctionne aussi bien dans les composants serveur que dans les composants client — le même import depuis `gt-next` est automatiquement associé à l’implémentation serveur ou client.*
  </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>;
    ```

    *Remarque : dans React Native, encapsulez les nœuds de texte natifs comme `<Text>` plutôt que les éléments HTML.*
  </Tab>
</Tabs>

Vous n’avez pas à attribuer de clé ni d’id — General Translation identifie l’entrée à partir de son contenu. Gardez le contenu statique ; utilisez des composants variables pour les valeurs dynamiques (voir [Formatage des nombres et des dates](/docs/react/guides/formatting-variables)).

## Désambiguïser avec le contexte [#context]

Lorsque le même texte peut se traduire différemment selon le sens, ajoutez `$context` pour que les traducteurs et le moteur puissent distinguer les entrées. Cela fonctionne de la même façon dans tous les frameworks.

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

## Gardez les entrées stables avec un id [#id]

Passez `$id` pour attribuer à une entrée un identifiant stable qui ne change pas lorsque vous modifiez le balisage alentour. C’est facultatif : utilisez-le lorsque vous souhaitez une référence fixe pour une entrée.

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

*Remarque : le contenu à l’intérieur de `<T>` doit être du JSX statique. Déplacez les valeurs conditionnelles ou les valeurs interpolées dans [`<Var>`](/docs/react/reference/components/var), [`<Plural>`](/docs/react/reference/components/plural) ou [`<Branch>`](/docs/react/reference/components/branch) afin que le texte qui les entoure reste traduisible.*
## 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