# gt-react: General Translation React SDK: Vue d’ensemble
URL: https://generaltranslation.com/fr/docs/react/introduction.mdx
---
title: Vue d’ensemble
description: Vue d’ensemble du SDK React de General Translation
---

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


## Introduction

Le SDK React de General Translation est une bibliothèque d’internationalisation (i18n) open source pour les applications React.

Il fournit un ensemble complet d’outils pour internationaliser votre application React de façon simple et facile à maintenir, avec une parité fonctionnelle avec d’autres bibliothèques i18n populaires.

Le SDK peut être utilisé de façon autonome sans la plateforme General Translation et se comporte de manière similaire aux autres bibliothèques i18n.

Cependant, il s’intègre aussi à notre plateforme pour offrir des fonctionnalités avancées :

* Rechargement à chaud des traductions en développement
* Traductions automatiques par IA
* Synchronisation des traductions avec la plateforme General Translation
* Intégration native à notre CDN de traduction

## Concepts

Voici les 5 concepts principaux à comprendre concernant le SDK.

<Steps>
  <Step>
    Le composant [`<GTProvider>`](/docs/react/api/components/gtprovider)
  </Step>

  <Step>
    Le composant [`<T>`](/docs/react/api/components/t)
  </Step>

  <Step>
    Le hook [`useGT`](/docs/react/api/strings/use-gt)
  </Step>

  <Step>
    La fonction [`msg`](/docs/react/api/strings/msg) pour les chaînes partagées
  </Step>

  <Step>
    (Facultatif) Le hook [`useTranslations`](/docs/react/api/dictionary/use-translations)
  </Step>
</Steps>

## Le composant `<GTProvider>`

Le composant [`<GTProvider>`](/docs/react/api/components/gtprovider) fournit à votre application le contexte de traduction, notamment la langue actuelle et les traductions correspondantes.

```tsx
import { GTProvider } from 'gt-react';

function App() {
  return (
    <GTProvider>
      <div>
        {/* Le contenu de votre application */}
      </div>
    </GTProvider>
  );
}
```

**Important :** le fournisseur doit envelopper l’intégralité de votre application et être placé aussi haut que possible dans l’arborescence des composants, par exemple dans votre composant racine `App`.

Consultez la référence de l’API [`GTProvider`](/docs/react/api/components/gtprovider) pour en savoir plus.


## Le composant `<T>`

Le composant [`<T>`](/docs/react/api/components/t) est la solution recommandée pour traduire le contenu de votre application.

Il s’agit d’un composant React qui peut servir à encapsuler n’importe quel élément JSX et qui affiche automatiquement le contenu de cet élément dans une langue prise en charge.

<Callout type="info">
  Nous recommandons d’utiliser le composant [`<T>`](/docs/react/api/components/t) chaque fois que possible, car c’est lui qui offre la plus grande flexibilité pour la traduction.

  Contrairement aux chaînes, le composant [`<T>`](/docs/react/api/components/t) peut servir à traduire du contenu HTML, ce qui le rend bien plus puissant que la traduction de chaînes.
</Callout>

### Exemples

```tsx
<T>
  <div>Hello, world!</div>
</T>
```

```tsx
<T>
  <div>
    <h1> Here is an image </h1>
    <img src="https://example.com/image.png" alt="Example" />
  </div>
</T>
```

```tsx
<T>
  Formatting can be done easily with the `<T>` component.
  <Num>{1000}</Num>
  <DateTime>{new Date()}</DateTime>
  <Currency currency="USD">{1000}</Currency>
</T>
```

Le composant [`<T>`](/docs/react/api/components/t) fonctionne avec des [composants variables](/docs/react/guides/variables) comme [`<Num>`](/docs/react/api/components/num), [`<DateTime>`](/docs/react/api/components/datetime) et [`<Currency>`](/docs/react/api/components/currency) pour mettre en forme du contenu dynamique.

Consultez le [guide du composant [`<T>`]](/docs/react/guides/t) pour découvrir les différentes manières d’utiliser le composant [`<T>`](/docs/react/api/components/t).


## Le hook `useGT`

Le hook [`useGT`](/docs/react/api/strings/use-gt) est un hook React qui peut être utilisé de façon similaire au composant [`<T>`](/docs/react/api/components/t), avec certaines contreparties.

Le hook renvoie une fonction qui permet de traduire des chaînes.

```tsx
const gt = useGT();

gt('Hello, world!');
```

Par rapport au composant [`<T>`](/docs/react/api/components/t), le hook [`useGT`](/docs/react/api/strings/use-gt) offre plus de flexibilité dans votre base de code.

Par exemple, si vous avez une structure de données complexe avec des chaînes imbriquées, le composant [`<T>`](/docs/react/api/components/t) sera plus difficile à utiliser.

```tsx
const gt = useGT();
const data = {
  title: gt('Hello, world!'),
  description: gt('This is a description'),
};
```

Consultez le guide [sur les chaînes](/docs/react/guides/strings) pour en savoir plus sur le hook [`useGT`](/docs/react/api/strings/use-gt).

## La fonction `msg`

La fonction [`msg`](/docs/react/api/strings/msg) sert à marquer les chaînes à traduire utilisées dans plusieurs composants ou stockées dans des objets de configuration.

C’est particulièrement utile pour du contenu partagé, comme les libellés de navigation, les messages de formulaire ou tout texte qui apparaît à plusieurs endroits de votre application.

```tsx
// Marquer les chaînes pour la traduction
import { msg } from 'gt-react';

const navItems = [
  { label: msg('Home'), href: '/' },
  { label: msg('About'), href: '/about' },
  { label: msg('Contact'), href: '/contact' }
];
```

```tsx
// Décoder et utiliser les chaînes marquées
import { useMessages } from 'gt-react';

function Navigation() {
  const m = useMessages();
  
  return (
    <nav>
      {navItems.map(item => (
        <a key={item.href} href={item.href}>
          {m(item.label)}
        </a>
      ))}
    </nav>
  );
}
```

La fonction [`msg`](/docs/react/api/strings/msg) encode des chaînes avec des métadonnées de traduction, et [`useMessages`](/docs/react/api/strings/use-messages) les décode.

<Callout type="info">
  Utilisez [`msg`](/docs/react/api/strings/msg) pour le contenu partagé qui doit être traduit de manière cohérente dans toute votre application. Pour le contenu propre à un composant, privilégiez [`<T>`](/docs/react/api/components/t) ou [`useGT`](/docs/react/api/strings/use-gt).
</Callout>

Consultez le guide sur les [chaînes partagées](/docs/react/guides/shared-strings) pour en savoir plus sur la fonction `msg`.


## Le hook `useTranslations`

Le hook [`useTranslations`](/docs/react/api/dictionary/use-translations) est un hook React qui renvoie une fonction permettant de récupérer des traductions pour une clé donnée.

```tsx title="dictionary.ts"
const dictionary = {
  hello: {
    world: 'Hello, world!',
  },
};
```

```tsx title="App.tsx"
const translate = useTranslations();
translate('hello.world');
```

Ce comportement est similaire à celui d’autres bibliothèques de traduction, comme [`react-i18next`](https://react.i18next.com/) et [`next-intl`](https://next-intl-docs.vercel.app/).

<Callout type="warn">
  Nous ne recommandons pas d’utiliser le hook [`useTranslations`](/docs/react/api/dictionary/use-translations) dans votre application. Utiliser fréquemment le hook [`useTranslations`](/docs/react/api/dictionary/use-translations) rendra votre base de code plus difficile à maintenir
  et entraînera une dette technique importante.

  Nous vous recommandons plutôt d’utiliser le composant [`<T>`](/docs/react/api/components/t) ou le hook [`useGT`](/docs/react/api/strings/use-gt).

  Si vous migrez depuis une autre bibliothèque d’i18n, le hook [`useTranslations`](/docs/react/api/dictionary/use-translations) constitue un remplacement direct et peut être utile pour migrer progressivement votre base de code.
</Callout>

Consultez le guide [dictionnaires](/docs/react/guides/dictionaries) pour en savoir plus sur le hook [`useTranslations`](/docs/react/api/dictionary/use-translations).

Consultez la [référence de l’API useTranslations](/docs/react/api/dictionary/use-translations) pour plus d’informations.

***


## Étapes suivantes

* Découvrez comment configurer votre projet React avec le SDK : [Quickstart](/docs/react)
* Découvrez comment traduire du contenu JSX avec le composant [`<T>`](/docs/react/api/components/t) : [Guide de traduction JSX](/docs/react/guides/t)
* Découvrez comment traduire des chaînes avec le hook [`useGT`](/docs/react/api/strings/use-gt) : [Guide de traduction des chaînes](/docs/react/guides/strings)
* Découvrez comment utiliser des chaînes partagées avec la fonction [`msg`](/docs/react/api/strings/msg) : [Guide des chaînes partagées](/docs/react/guides/shared-strings)