# gt-react: General Translation React SDK: Le composant T
URL: https://generaltranslation.com/fr/docs/react/guides/t.mdx
---
title: Le composant T
description: Comment internationaliser des composants JSX avec le composant T
---

{/* GÉNÉRÉ AUTOMATIQUEMENT : ne modifiez pas directement. Modifiez le template dans content/docs-templates/ à la place. */}

Le [composant `<T>`](/docs/react/api/components/t) est l’outil principal pour internationaliser le contenu JSX de votre application React. Il encapsule vos éléments JSX et les traduit automatiquement en fonction du paramètre régional de l’utilisateur.

<Callout>
  **Astuce :** lorsque l’[injection JSX automatique](/docs/cli/features/auto-jsx-injection) est activée, le compilateur peut automatiquement encapsuler votre JSX dans des composants de traduction au build.
  Dans la plupart des cas, vous n’aurez peut-être pas besoin d’ajouter `<T>` manuellement. L’utilisation manuelle de `<T>` reste utile lorsque vous avez besoin d’un contrôle fin, par exemple pour définir un `id` ou un `context` spécifique.
</Callout>

## Démarrage rapide

Transformez n’importe quel contenu JSX statique en l’encapsulant dans [`<T>`](/docs/react/api/components/t) :

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

// Avant
function Greeting() {
  return <p>Hello, world!</p>;
}

// Après
function Greeting() {
  return <T><p>Hello, world!</p></T>;
}
```

Pour le contenu dynamique dans [`<T>`](/docs/react/api/components/t), utilisez les [composants variables](/docs/react/guides/variables) et les [composants de branchement](/docs/react/guides/branches).


## Utilisation de base

Le [composant `<T>`](/docs/react/api/components/t) accepte n’importe quel contenu JSX comme enfant :

```jsx
// Texte simple
<T>Welcome to our app</T>

// Éléments HTML
<T><h1>Page Title</h1></T>

// JSX imbriqué complexe
<T>
  <div className="alert">
    <span>Important:</span> Please read carefully.
  </div>
</T>
```


## Options de configuration

### Ajouter du contexte

Ajoutez un contexte de traduction pour les termes ambigus :

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


## Quand utiliser T

Utilisez [`<T>`](/docs/react/api/components/t) uniquement pour du **contenu statique** :

```jsx
// ✅ Le contenu statique fonctionne
<T>
  <button>Click here</button>
  <h1>Welcome to our site</h1>
</T>

// ❌ Le contenu dynamique pose problème
<T>
  <p>Hello {username}</p>
  <p>Today is {new Date()}</p>
</T>

// ✅ Utilisez des composants variables pour le contenu dynamique
<T>
  <p>Hello <Var>{username}</Var></p>
</T>
```

<Callout>
  Les composants variables et de branchement sont conçus pour être utilisés dans [`<T>`](/docs/react/api/components/t) avec du contenu dynamique.
  Consultez les guides [Composants variables](/docs/react/guides/variables) et [Composants de branchement](/docs/react/guides/branches) pour en savoir plus.
</Callout>


## Exemples

### Éléments simples

```jsx
// Texte simple
<T>Hello, world!</T>

// Bouton avec texte
<T><Button>Submit Form</Button></T>

// Titre avec mise en forme
<T><h1 className="text-2xl font-bold">Welcome</h1></T>
```


### Composants complexes

```jsx
// Menu de navigation
<T>
  <nav className="navbar">
    <a href="/about">About Us</a>
    <a href="/contact">Contact</a>
  </nav>
</T>

// Message d'alerte
<T>
  <div className="alert alert-warning">
    <AlertIcon className="w-5 h-5" />
    <span>Your session expires in 5 minutes</span>
  </div>
</T>
```


### Avec des variables

Vous pouvez utiliser des composants variables pour le formatage localisé.

```jsx
// Combinaison de texte statique et de valeurs dynamiques
<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>
  Pour en savoir plus sur le composant [`<Var>`](/docs/react/api/components/var), consultez le [guide des composants variables](/docs/react/guides/variables).
</Callout>


## Configuration de production

### Processus de build

Ajoutez la traduction à votre pipeline de build :

```json title="package.json"
{
  "scripts": {
    "build": "npx gt translate && <...YOUR_BUILD_COMMAND...>"
  }
}
```

### Comportement en développement et en production

* **Développement** : Avec une clé API de développement, les traductions se font on-demand au rendu des composants. Vous verrez les traductions en temps réel pendant le développement.
* **Production** : Toutes les traductions sont pré-générées à l’étape de build et seront visibles une fois votre application en ligne.

Définissez votre clé API de développement dans votre environnement pour activer la traduction en temps réel pendant le développement. Vous pouvez en créer une dans le dashboard, sous [Clés API](https://dash.generaltranslation.com/en-US/project/api-keys).

### Considérations relatives à la confidentialité

Le contenu des composants [`<T>`](/docs/react/api/components/t) est envoyé à l’API GT pour être traduit. Pour les données sensibles, utilisez les [Composants variables](/docs/react/guides/variables) afin de conserver les informations privées en local :

```jsx
// Sûr - les données sensibles restent locales
<T>
  Welcome back, <Var>{username}</Var>
</T>
```


## Quelle quantité regrouper dans un seul `<T>`

Regroupez des **blocs de contenu logiques** — du contenu qu’un traducteur lirait et traduirait naturellement comme un ensemble.

```jsx
// ✅ Bien — le contenu associé est regroupé pour donner aux traducteurs le contexte complet
<T>
  <h1>Welcome to Our Platform</h1>
  <p>Get started in minutes with our simple setup process.</p>
</T>

// ✅ Bien — chaque carte est une unité indépendante
{features.map((feature) => (
  <T key={feature.id}>
    <h3><Var>{feature.title}</Var></h3>
    <p><Var>{feature.description}</Var></p>
  </T>
))}

// ❌ Trop fragmenté — découpe la traduction et perd le contexte
<T><h1>Welcome to Our Platform</h1></T>
<T><p>Get started in minutes with our simple setup process.</p></T>

// ❌ Trop large — envelopper toute la page complique la maintenance
<T>
  {/* ...des centaines de lignes de JSX... */}
</T>
```

**Règle générale :** si des textes sont liés visuellement ou sémantiquement, regroupez-les dans un seul `<T>`. Ne les scindez que lorsque le contenu est réellement indépendant (par exemple, un en-tête ou un pied de page).

Regrouper davantage de contenu dans un seul `<T>` donne plus de contexte aux traducteurs, ce qui permet d’obtenir des traductions plus naturelles — certaines langues restructurent les phrases ou ont besoin de faire référence au contenu voisin.


## Problèmes courants

### Limites des composants

[`<T>`](/docs/react/api/components/t) traduit uniquement les enfants directs, et non le contenu à l’intérieur d’autres composants :

```jsx
// ❌ Incorrect - le contenu à l'intérieur des composants ne sera pas traduit
function MyComponent() {
  return <p>Ceci ne sera pas traduit</p>;
}

<T>
  <h1>Ceci sera traduit</h1>
  <MyComponent /> {/* Le contenu à l'intérieur ne sera pas traduit */}
</T>

// ✅ Correct - encapsulez chaque composant individuellement
function MyComponent() {
  return <T><p>Ceci sera traduit</p></T>;
}

<T><h1>Ceci sera traduit</h1></T>
<MyComponent />
```


### Imbrication de composants T

```jsx
// ❌ N'imbriquez pas les composants <T>
<T>
  <T>Hello world</T> {/* Ne faites pas cela */}
</T>
```


### Erreurs liées au contenu dynamique

La CLI renverra une erreur si du contenu dynamique est présent dans [`<T>`](/docs/react/api/components/t). Encapsulez les valeurs dynamiques dans des composants variables :

```jsx
// ❌ Incorrect - le contenu dynamique provoque une erreur
<T><p>Hello {username}</p></T>

// ✅ Correct - utiliser des composants variables
<T><p>Hello <Var>{username}</Var></p></T>
```

<Callout>
  Consultez le [guide des composants variables](/docs/react/guides/variables) pour gérer les valeurs dynamiques, et le [guide des composants de branchement](/docs/react/guides/branches) pour le contenu conditionnel.
</Callout>


## Étapes suivantes

<Callout>
  **Voyez-le en action :** Consultez l’[application d’exemple sur les bases du composant `<T>`](https://github.com/gt-examples/t-component-basics) pour une démo fonctionnelle — [aperçu en direct](https://t-component-basics.generaltranslation.dev).
</Callout>

* [Guide des composants variables](/docs/react/guides/variables) - Gérez le contenu dynamique dans les traductions JSX
* [Guide des composants de branchement](/docs/react/guides/branches) - Ajoutez une logique conditionnelle à vos traductions