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

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


## Panoramica

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

Ti forniremo anche alcuni consigli e suggerimenti per rendere la migrazione il più agevole possibile.

## Prerequisiti

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

## Perché migrare?

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

Eccone alcuni:

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

## Setup

<Steps>
  <Step>
    Installa `gt-react` e lo strumento da riga di comando `gt`.

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

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

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

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

  <Step>
    Crea un file `gt.config.json` nella root 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 prop tramite lo spread.

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

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

    Per una procedura più dettagliata, consulta la guida di [quickstart del progetto](/docs/react).
  </Step>

  <Step>
    A questo punto, hai 3 opzioni:

    1. Migra completamente l&#39;intero progetto a `gt-react` 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 a `gt-react` solo una parte del progetto.

    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`.

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

Poi dovrai sostituire tutte le chiavi di stringa con i rispettivi valori testuali effettivi.

Ad esempio, se il tuo vecchio codice è simile a questo:

```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 tuo progetto, ma continua a usare i dizionari della vecchia libreria i18n

Supponiamo che tu voglia migrare il tuo progetto a `gt-react`, 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:

Individua tutte le occorrenze della tua vecchia libreria i18n, ad esempio 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'
    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 root del progetto o nella directory `src`.
Copia il contenuto del tuo vecchio file di dizionario in questo nuovo file, quindi passalo al componente `GTProvider`.

```tsx
import { GTProvider } from 'gt-react'
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/guides/dictionaries).


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

Questa opzione è la più flessibile e richiede il minor numero di modifiche al codice in un unico passaggio.

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

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

<Callout type="warn">
  Questa opzione è sconsigliata, perché dovrai gestire due librerie i18n diverse nel tuo progetto, il che può risultare complesso e causare bug.
</Callout>

## Suggerimenti per la migrazione

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

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

In futuro sarà molto più facile modificare i contenuti e la tua base di codice sarà 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 che già hai.

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 migrare il 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 il contenuto completo di questa documentazione, quindi il tuo strumento di IA avrà accesso a tutte le informazioni necessarie per aiutarti nella migrazione del progetto.