# react-native: Migrazione
URL: https://generaltranslation.com/it/docs/react-native/guides/migration.mdx
---
title: Migrazione
description: Scopri come migrare un progetto a gt-react-native
---

{/* GENERATO AUTOMATICAMENTE: non modificare direttamente. Modifica invece il modello in content/docs-templates/. */}


## Panoramica

Questa guida illustra i passaggi necessari per migrare a `gt-react-native` un progetto che utilizza già una libreria i18n.

Forniremo anche alcuni consigli e suggerimenti per rendere la migrazione il più semplice possibile.

## Prerequisiti

* Un progetto che utilizza già un'altra libreria i18n.
* Una conoscenza di base della libreria `gt-react-native`.

## Perché migrare?

Ci sono molti motivi per cui potresti voler migrare il tuo progetto su `gt-react-native`.

Eccone alcuni:

* **Niente più file JSON:** Non dovrai più gestire le traduzioni nei file JSON.
  Tutti i contenuti restano inline nel codice, dove devono stare.
* **Traduzioni automatiche:** Genera traduzioni di alta qualità, consapevoli del contesto, con il nostro strumento CLI.
  Non dovrai più aspettare le traduzioni.
* **Sperimenta in dev:** Prova facilmente le traduzioni durante lo sviluppo grazie al ricaricamento a caldo delle traduzioni.

## Setup

<Steps>
  <Step>
    Installa `gt-react-native` e lo strumento 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>
    Crea un file `gt.config.json` nella directory radice del progetto contenente una proprietà `defaultLocale` e un array `locales`.

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

    Aggiungi il componente `<GTProvider>` alla radice dell&#39;app e passa l&#39;oggetto `config` come props con lo spread.

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

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

    Per istruzioni più dettagliate, consulta la guida di [quickstart del progetto](/docs/react-native).
  </Step>

  <Step>
    A questo punto hai 3 opzioni:

    1. Migra completamente l&#39;intero progetto a `gt-react-native` e rimuovi la vecchia libreria i18n.
    2. Migra completamente il progetto, ma continua a usare i dizionari della vecchia libreria i18n.
    3. Continua a usare per ora la vecchia libreria i18n e migra solo una parte del progetto a `gt-react-native`.

    Per maggiori dettagli su ciascuna opzione, consulta la sezione [strategie di migrazione](#strategies).
  </Step>
</Steps>

## Strategie di migrazione [#strategies]

### Opzione 1: Migra completamente l&#39;intero progetto

Questa opzione è la più semplice, ma richiederà anche il maggior numero di modifiche al codice tutte in una volta.

Dopo aver configurato il progetto, dovrai cercare tutte le occorrenze della tua vecchia libreria i18n e sostituirle con `gt-react-native`.

Se la tua app usa hook di React come `useTranslation`, cerca tutte le occorrenze di `useTranslation` nel codice e sostituiscile con `useGT`.

Poi dovrai sostituire tutte le chiavi di stringa con i valori effettivi delle stringhe.

Ad esempio, se il tuo vecchio codice è così:

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

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

Dovrai sostituirlo con:

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

Fallo per tutte le occorrenze della tua vecchia libreria i18n.


### Opzione 2: Migra completamente il progetto, ma continua a usare i dizionari della vecchia libreria i18n

Supponiamo che tu voglia migrare il tuo progetto a `gt-react-native`, ma continuare a usare i dizionari della vecchia libreria i18n
e utilizzare le funzionalità inline di GT solo per i nuovi contenuti.

In questo caso, puoi fare qualcosa di simile all&#39;Opzione 1:

Trova tutte le occorrenze della vecchia libreria i18n, come gli hook `useTranslation`, e sostituiscile con gli hook `useTranslations`.

L&#39;hook `useTranslations` si comporta in modo molto simile agli hook `useTranslation` e puoi usarlo allo stesso modo.

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

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

Per quanto riguarda la configurazione, dovrai creare un file `dictionary.[js|ts|json]` nella directory radice del progetto o nella directory `src`.
Copia il contenuto del vecchio file di dizionario in questo nuovo file, quindi passalo al componente `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>
```

Per maggiori dettagli, consulta la guida [dictionaries](/docs/react-native/guides/dictionaries).


### Opzione 3: continua a usare per ora la vecchia libreria i18n e migra solo una parte del progetto a `gt-react-native`

Questa opzione è la più flessibile e richiede il minor numero di modifiche al codice tutte insieme.

In questo caso, puoi fare qualcosa di simile all&#39;opzione 2, ma migrare solo una parte del progetto a `gt-react-native`.

Ad esempio, puoi continuare a usare la vecchia libreria i18n per alcuni componenti e usare `gt-react-native` solo per altri e per i nuovi contenuti.

<Callout type="warn">
  Questa opzione non è consigliata, perché dovrai gestire due librerie i18n diverse nello stesso progetto, il che può risultare complesso e portare a bug.
</Callout>

## Consigli per la migrazione

### 1. Usa l&#39;hook `useGT` o il componente `<T>` il più possibile

Quando possibile, ti consigliamo di usare l&#39;hook `useGT` o il componente `<T>`.

In questo modo, in futuro sarà molto più facile modificare i contenuti e il codebase risulterà molto più leggibile.

### 2. Usa l&#39;hook `useTranslations` per i contenuti esistenti

L&#39;hook `useTranslations` è un ottimo modo per continuare a usare i dizionari esistenti.

Lo mettiamo a disposizione per semplificare la migrazione, ma non ne consigliamo l&#39;uso per i nuovi contenuti.

### 3. Uso dell&#39;IA

Se usi l&#39;IA per aiutarti nella migrazione del tuo progetto, mettiamo a disposizione `LLMs.txt` e `LLMs-full.txt` ai seguenti indirizzi:

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

Questi file contengono l&#39;intero contenuto di questa documentazione, quindi il tuo strumento di IA avrà accesso a tutte le informazioni necessarie per aiutarti a migrare il tuo progetto.