# react-native: Vue d’ensemble
URL: https://generaltranslation.com/fr/docs/react-native/introduction.mdx
---
title: Vue d’ensemble
description: Vue d’ensemble du SDK React Native 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 Native de General Translation est une bibliothèque d’internationalisation (i18n) open source pour les applications React Native.

Il fournit un ensemble complet d’outils pour internationaliser votre application React Native de manière 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 également à 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 avec notre CDN de traduction

## Concepts

Voici les 5 principaux concepts à comprendre à propos du SDK.

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

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

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

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

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

## Le composant `<GTProvider>`

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

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

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

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

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


## Le composant `<T>`

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

Il s’agit d’un composant React qui peut servir à envelopper 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 vous recommandons d’utiliser le composant [`<T>`](/docs/react-native/api/components/t) chaque fois que possible, car c’est lui qui offre le plus de flexibilité pour les traductions.

  Contrairement aux chaînes de caractères, le composant [`<T>`](/docs/react-native/api/components/t) peut aussi servir à traduire du contenu HTML, ce qui le rend bien plus puissant que les traductions de chaînes de caractères.
</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>
  La mise en forme est facile avec le composant `<T>`.
  <Num>{1000}</Num>
  <DateTime>{new Date()}</DateTime>
  <Currency currency="USD">{1000}</Currency>
</T>
```

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

Consultez le [guide du composant `<T>`](/docs/react-native/guides/t) pour découvrir les différentes façons d&#39;utiliser le composant [`<T>`](/docs/react-native/api/components/t).


## Le hook `useGT`

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

Ce hook renvoie une fonction qui permet de traduire des chaînes de caractères.

```tsx
const gt = useGT();

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

Comparé au composant [`<T>`](/docs/react-native/api/components/t), le hook [`useGT`](/docs/react-native/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, un composant [`<T>`](/docs/react-native/api/components/t) serait plus difficile à utiliser.

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

Consultez le guide [strings](/docs/react-native/guides/strings) pour en apprendre davantage sur le hook [`useGT`](/docs/react-native/api/strings/use-gt).

## La fonction `msg`

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

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

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

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-native';

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-native/api/strings/msg) encode les chaînes avec des métadonnées de traduction, et [`useMessages`](/docs/react-native/api/strings/use-messages) les décode.

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

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


## Le hook `useTranslations`

Le hook [`useTranslations`](/docs/react-native/api/dictionary/use-translations) est un hook React qui renvoie une fonction permettant d’obtenir 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&#39;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 vous déconseillons d&#39;utiliser le hook [`useTranslations`](/docs/react-native/api/dictionary/use-translations) dans votre application. Utiliser fréquemment le hook [`useTranslations`](/docs/react-native/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&#39;utiliser le composant [`<T>`](/docs/react-native/api/components/t) ou le hook [`useGT`](/docs/react-native/api/strings/use-gt).

  Si vous migrez depuis une autre bibliothèque d&#39;i18n, le hook [`useTranslations`](/docs/react-native/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-native/guides/dictionaries) pour en savoir plus sur le hook [`useTranslations`](/docs/react-native/api/dictionary/use-translations).

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

***


## Prochaines étapes

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