# react-native: Le composant `<T>`
URL: https://generaltranslation.com/fr/docs/react-native/guides/t.mdx
---
title: Le composant `<T>`
description: Comment internationaliser des composants JSX avec le composant `<T>`
---

{/* GÉNÉRÉ AUTOMATIQUEMENT : ne modifiez pas ce fichier directement. Modifiez plutôt le modèle dans content/docs-templates/. */}

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

<Callout>
  **Astuce :** Avec l’[injection JSX automatique](/docs/cli/features/auto-jsx-injection) activée, le compilateur peut automatiquement encapsuler votre JSX dans des composants de traduction au moment du build.
  Vous n’aurez peut-être pas besoin d’ajouter `<T>` manuellement dans la plupart des cas. L’utilisation manuelle de `<T>` reste néanmoins utile lorsque vous avez besoin d’un contrôle plus 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’entourant de [`<T>`](/docs/react-native/api/components/t) :

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

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

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

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


## Utilisation de base

Le [composant `<T>`](/docs/react-native/api/components/t) accepte n’importe quel contenu JSX en tant qu’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

Fournissez 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-native/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-native/api/components/t) afin de gérer le contenu dynamique.
  Consultez les guides [Composants variables](/docs/react-native/guides/variables) et [Composants de branchement](/docs/react-native/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 appliquer un 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-native/api/components/var), consultez le [guide des composants variables](/docs/react-native/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 à la demande au moment du rendu des composants. Vous verrez les traductions en temps réel pendant le développement.
* **Production** : toutes les traductions sont générées à l’avance lors de 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 tableau de bord, sous [API Keys](https://dash.generaltranslation.com/en-US/project/api-keys).

### Considérations relatives à la confidentialité

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

```jsx
// Sécurisé - les données sensibles restent en local
<T>
  Welcome back, <Var>{username}</Var>
</T>
```


## Que mettre dans un seul `<T>`

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

```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 éléments de texte sont liés visuellement ou sémantiquement, regroupez-les dans un seul `<T>`. Ne les séparez que si le contenu est réellement indépendant (par exemple, un en-tête et un pied de page).

Regrouper davantage de contenu dans un seul `<T>` donne plus de contexte aux traducteurs, ce qui produit des traductions plus naturelles — certaines langues restructurent les phrases ou doivent faire référence au contenu alentour.


## Problèmes courants

### Limites des composants

[`<T>`](/docs/react-native/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 />
```


### Composants `<T>` imbriqués

```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-native/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-native/guides/variables) pour gérer les valeurs dynamiques, et le [Guide des composants de branchement](/docs/react-native/guides/branches) pour gérer le contenu conditionnel.
</Callout>


## Étapes suivantes

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

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