# react-native: Migration
URL: https://generaltranslation.com/fr/docs/react-native/guides/migration.mdx
---
title: Migration
description: Découvrez comment effectuer la migration d’un projet vers gt-react-native
---

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


## Vue d’ensemble

Ce guide présente les étapes nécessaires pour migrer un projet qui utilise déjà une bibliothèque d’i18n vers `gt-react-native`.

Nous vous donnerons également quelques conseils et recommandations pour que la migration se passe le plus facilement possible.

## Prérequis

* Un projet utilisant actuellement une autre bibliothèque d’i18n.
* Une connaissance de base de la bibliothèque `gt-react-native`.

## Pourquoi migrer ?

Il existe de nombreuses raisons de migrer votre projet vers `gt-react-native`.

En voici quelques-unes :

* **Fini les fichiers JSON :** Ne gérez plus jamais vos traductions dans des fichiers JSON.
  Tout votre contenu se trouve directement dans votre code, là où il doit être.
* **Traductions automatiques :** Générez des traductions contextuelles de haute qualité avec notre outil CLI.
  Vous n’aurez plus jamais à attendre vos traductions.
* **Expérimentez en développement :** Testez facilement les traductions en développement grâce au rechargement à chaud.

## Configuration

<Steps>
  <Step>
    Installez `gt-react-native` ainsi que l’outil CLI `gt`.

    <Tabs items={['npm', 'yarn', 'bun', 'pnpm']}>
      <Tab value="npm">
        ```bash
        npm i gt-react-native
        npm i gt
        ```
      </Tab>

      <Tab value="yarn">
        ```bash
        yarn add gt-react-native
        yarn add --dev gt
        ```
      </Tab>

      <Tab value="bun">
        ```bash
        bun add gt-react-native
        bun add --dev gt
        ```
      </Tab>

      <Tab value="pnpm">
        ```bash
        pnpm add gt-react-native
        pnpm add --save-dev gt
        ```
      </Tab>
    </Tabs>
  </Step>

  <Step>
    Créez un fichier `gt.config.json` à la racine de votre projet, avec une propriété `defaultLocale` et un tableau `locales`.

    ```json title="gt.config.json" copy
    {
      "defaultLocale": "en",
      "locales": ["en", "fr", "es"]
    }
    ```

    Ajoutez le composant `<GTProvider>` à la racine de votre application, puis transmettez l’objet `config` via les props.

    ```tsx
    import { GTProvider } from 'gt-react-native'
    import config from './gt.config.json'

    <GTProvider {...config}>
      <App />
    </GTProvider>
    ```

    Pour plus d’informations, consultez le guide de [démarrage rapide du projet](/docs/react-native).
  </Step>

  <Step>
    À ce stade, trois options s’offrent à vous :

    1. Migrez entièrement votre projet vers `gt-react-native` et supprimez l’ancienne bibliothèque i18n.
    2. Migrez entièrement votre projet, mais continuez à utiliser les dictionnaires de l’ancienne bibliothèque i18n.
    3. Continuez à utiliser l’ancienne bibliothèque i18n pour le moment, et ne migrez qu’une partie de votre projet vers `gt-react-native`.

    Pour en savoir plus sur chaque option, consultez la section [stratégies de migration](#strategies).
  </Step>
</Steps>

## Stratégies de migration [#strategies]

### Option 1 : Migrez l’intégralité de votre projet

Cette option est la plus simple, mais c’est aussi celle qui nécessitera le plus de modifications de code d’un seul coup.

Après avoir configuré votre projet, vous devrez rechercher toutes les occurrences de votre ancienne bibliothèque i18n et les remplacer par `gt-react-native`.

Si votre application utilise des hooks React comme `useTranslation`, recherchez toutes les occurrences de `useTranslation` dans votre code et remplacez-les par `useGT`.

Ensuite, vous devrez remplacer toutes les clés de chaîne par les valeurs de chaîne correspondantes.

Par exemple, si votre ancien code ressemble à ceci :

```json title="dictionary.json"
{
  "hello": {
    "description": "Hello, world!"
  }
}
```

```tsx
export default function MyComponent() {
  const { t } = useTranslation()
  return <div>{t('hello.description')}</div>
}
```

Vous devrez le remplacer par :

```tsx
export default function MyComponent() {
  const { t } = useGT()
  return <div>{t('Hello, world!')}</div>
}
// OU
export default function MyComponent() {
  return <T>Hello, world!</T>
}
```

Faites-le pour toutes les occurrences de votre ancienne bibliothèque i18n.


### Option 2 : Migrez entièrement votre projet, mais continuez à utiliser les dictionnaires de l’ancienne bibliothèque i18n

Supposons que vous souhaitiez migrer votre projet vers `gt-react-native`, tout en continuant à utiliser les dictionnaires de l’ancienne bibliothèque i18n
et en réservant les fonctionnalités inline de GT aux nouveaux contenus.

Dans ce cas, vous pouvez procéder d’une manière similaire à l’option 1 :

Repérez tous les usages de votre ancienne bibliothèque i18n, par exemple les hooks `useTranslation`, puis remplacez-les par des hooks `useTranslations`.

Le hook `useTranslations` se comporte de façon très similaire au hook `useTranslation`, et vous pouvez l’utiliser de la même manière.

<Tabs items={['Avant', 'Après']}>
  <Tab value="Avant">
    ```tsx
    import { useTranslation } from 'react-i18next'
    export default function MyComponent() {
      const { t } = useTranslation()
      return <div>{t('hello.description')}</div>
    }
    ```
  </Tab>

  <Tab value="Après">
    ```tsx
    import { useTranslations } from 'gt-react-native'
    export default function MyComponent() {
      const t = useTranslations()
      return <div>{t('hello.description')}</div>
    }
    ```
  </Tab>
</Tabs>

Côté configuration, vous devrez créer un fichier `dictionary.[js|ts|json]` à la racine de votre projet ou dans le répertoire `src`.
Copiez le contenu de votre ancien fichier de dictionnaire dans ce nouveau fichier, puis passez-le au composant `GTProvider`.

```tsx
import { GTProvider } from 'gt-react-native'
import dictionary from './dictionary.json'
import config from './gt.config.json'

<GTProvider {...config} dictionary={dictionary}>
  <App />
</GTProvider>
```

Consultez le guide [dictionaries](/docs/react-native/guides/dictionaries) pour en savoir plus.


### Option 3 : continuez à utiliser l’ancienne bibliothèque i18n pour le moment et ne migrez qu’une partie de votre projet vers `gt-react-native`

Cette option est la plus flexible et nécessite le moins de modifications de code d’un seul coup.

Dans ce cas, vous pouvez faire quelque chose de similaire à l’option 2, mais en ne migrant qu’une partie de votre projet vers `gt-react-native`.

Par exemple, vous pouvez continuer à utiliser l’ancienne bibliothèque i18n pour certains composants, et réserver `gt-react-native` aux autres ainsi qu’au nouveau contenu.

<Callout type="warn">
  Cette option n’est pas recommandée, car vous devrez gérer deux bibliothèques i18n différentes dans votre projet, ce qui peut être complexe et entraîner des bugs.
</Callout>

## Conseils de migration

### 1. Utilisez autant que possible le hook `useGT` ou le composant `<T>`

Dans la mesure du possible, nous vous recommandons d’utiliser le hook `useGT` ou le composant `<T>`.

Cela vous facilitera grandement la modification de votre contenu à l’avenir et rendra votre code beaucoup plus lisible.

### 2. Utilisez le hook `useTranslations` pour le contenu existant

Le hook `useTranslations` est un excellent moyen de continuer à utiliser vos dictionnaires existants.

Nous le proposons pour faciliter la migration, mais nous ne recommandons pas de l’utiliser pour du nouveau contenu.

### 3. Utiliser l’IA

Si vous utilisez l’IA pour vous aider à migrer votre projet, les fichiers `LLMs.txt` et `LLMs-full.txt` sont disponibles ici :

* [LLMs.txt](/llms.txt)
* [LLMs-full.txt](/llms-full.txt)

Ces fichiers contiennent l’intégralité de cette documentation, afin que votre outil d’IA ait accès à toutes les informations nécessaires pour vous aider à migrer votre projet.