# gt-react: General Translation React SDK: Panoramica
URL: https://generaltranslation.com/it/docs/react/introduction.mdx
---
title: Panoramica
description: Panoramica dell'SDK React di General Translation
---

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


## Introduzione

L’SDK React di General Translation è una libreria open source per l’internazionalizzazione (i18n) delle applicazioni React.

Offre un set completo di strumenti per internazionalizzare la tua applicazione React in modo semplice e facile da mantenere, con una parità di funzionalità rispetto ad altre popolari librerie i18n.

L’SDK può essere usato in modo autonomo, senza la piattaforma General Translation, e si comporta in modo simile ad altre librerie i18n.

Tuttavia, si integra anche con la nostra piattaforma per offrire funzionalità avanzate:

* Aggiornamento a caldo delle traduzioni in fase di sviluppo
* Traduzioni automatiche con IA
* Sincronizzazione delle traduzioni con la piattaforma General Translation
* Integrazione nativa con la nostra CDN per le traduzioni

## Concetti

Ci sono 5 concetti principali da comprendere sull’SDK.

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

  <Step>
    Il componente [`<T>`](/docs/react/api/components/t)
  </Step>

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

  <Step>
    La funzione [`msg`](/docs/react/api/strings/msg) per le stringhe condivise
  </Step>

  <Step>
    (Facoltativo) L’hook [`useTranslations`](/docs/react/api/dictionary/use-translations)
  </Step>
</Steps>

## Il componente `<GTProvider>`

Il componente [`<GTProvider>`](/docs/react/api/components/gtprovider) fornisce il contesto di traduzione alla tua applicazione, inclusi la lingua corrente e le relative traduzioni.

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

function App() {
  return (
    <GTProvider>
      <div>
        {/* Il contenuto della tua applicazione */}
      </div>
    </GTProvider>
  );
}
```

**Importante:** il provider deve avvolgere l&#39;intera applicazione ed essere posizionato il più in alto possibile nell&#39;albero dei componenti, ad esempio nel componente root App.

Consulta il riferimento API di [`GTProvider`](/docs/react/api/components/gtprovider) per maggiori informazioni.


## Il componente `<T>`

Il componente [`<T>`](/docs/react/api/components/t) è il modo consigliato per tradurre i contenuti della tua applicazione.

È un componente React che può essere usato per racchiudere qualsiasi elemento JSX e visualizza automaticamente il contenuto dell&#39;elemento in una lingua supportata.

<Callout type="info">
  Ti consigliamo di usare il componente [`<T>`](/docs/react/api/components/t) ogni volta che è possibile, poiché offre la massima flessibilità per le traduzioni.

  A differenza delle stringhe, il componente [`<T>`](/docs/react/api/components/t) può essere usato per tradurre contenuti HTML, risultando molto più potente delle semplici traduzioni di stringhe.
</Callout>

### Esempi

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

Il componente [`<T>`](/docs/react/api/components/t) funziona con [componenti variabili](/docs/react/guides/variables) come [`<Num>`](/docs/react/api/components/num), [`<DateTime>`](/docs/react/api/components/datetime) e [`<Currency>`](/docs/react/api/components/currency) per la formattazione dinamica dei contenuti.

Consulta la [guida al componente `<T>`](/docs/react/guides/t) per scoprire i diversi modi di usare il componente [`<T>`](/docs/react/api/components/t).


## L&#39;hook `useGT`

L&#39;hook [`useGT`](/docs/react/api/strings/use-gt) è un hook di React che può essere usato in modo simile al componente [`<T>`](/docs/react/api/components/t), con alcuni compromessi.

L&#39;hook restituisce una funzione che può essere utilizzata per tradurre stringhe.

```tsx
const gt = useGT();

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

Rispetto al componente [`<T>`](/docs/react/api/components/t), l&#39;hook [`useGT`](/docs/react/api/strings/use-gt) offre maggiore flessibilità nella base di codice.

Ad esempio, se hai una struttura dati complessa con stringhe nidificate, un componente [`<T>`](/docs/react/api/components/t) sarebbe più difficile da usare.

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

Consulta la guida [strings](/docs/react/guides/strings) per approfondire l&#39;hook [`useGT`](/docs/react/api/strings/use-gt).


## La funzione `msg`

La funzione [`msg`](/docs/react/api/strings/msg) viene usata per contrassegnare le stringhe da tradurre che vengono utilizzate in più componenti o archiviate in oggetti di configurazione.

Questo è particolarmente utile per contenuti condivisi come etichette di navigazione, messaggi dei moduli o qualsiasi testo che compare in più punti dell&#39;applicazione.

```tsx
// Contrassegna le stringhe per la traduzione
import { msg } from 'gt-react';

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

```tsx
// Decodifica e utilizza le stringhe contrassegnate
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 funzione [`msg`](/docs/react/api/strings/msg) codifica le stringhe con metadati di traduzione e [`useMessages`](/docs/react/api/strings/use-messages) le decodifica.

<Callout type="info">
  Usa [`msg`](/docs/react/api/strings/msg) per i contenuti condivisi che devono essere tradotti in modo coerente in tutta l&#39;applicazione. Per i contenuti specifici di un componente, preferisci [`<T>`](/docs/react/api/components/t) o [`useGT`](/docs/react/api/strings/use-gt).
</Callout>

Per saperne di più sulla funzione `msg`, consulta la guida alle [stringhe condivise](/docs/react/guides/shared-strings).


## L&#39;hook `useTranslations`

L&#39;hook [`useTranslations`](/docs/react/api/dictionary/use-translations) è un hook di React che restituisce una funzione da usare per recuperare le traduzioni di una determinata chiave.

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

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

Questo comportamento è simile a quello di altre librerie di traduzione, come [`react-i18next`](https://react.i18next.com/) e [`next-intl`](https://next-intl-docs.vercel.app/).

<Callout type="warn">
  Sconsigliamo di usare l&#39;hook [`useTranslations`](/docs/react/api/dictionary/use-translations) nella tua applicazione. L&#39;uso frequente dell&#39;hook [`useTranslations`](/docs/react/api/dictionary/use-translations) renderà la tua base di codice più difficile da mantenere
  e porterà a un notevole debito tecnico.

  Ti consigliamo invece di usare il componente [`<T>`](/docs/react/api/components/t) o l&#39;hook [`useGT`](/docs/react/api/strings/use-gt).

  Se stai migrando da un&#39;altra libreria i18n, l&#39;hook [`useTranslations`](/docs/react/api/dictionary/use-translations) è un sostituto immediato e può essere utile per migrare gradualmente la tua base di codice.
</Callout>

Consulta la guida ai [dizionari](/docs/react/guides/dictionaries) per saperne di più sull&#39;hook [`useTranslations`](/docs/react/api/dictionary/use-translations).

Consulta il [riferimento API di useTranslations](/docs/react/api/dictionary/use-translations) per ulteriori informazioni.

***


## Passaggi successivi

* Scopri come configurare il tuo progetto React con l’SDK: [Quickstart](/docs/react)
* Scopri come tradurre contenuti JSX con il componente [`<T>`](/docs/react/api/components/t): [Guida alla traduzione di JSX](/docs/react/guides/t)
* Scopri come tradurre stringhe con l’hook [`useGT`](/docs/react/api/strings/use-gt): [Guida alla traduzione delle stringhe](/docs/react/guides/strings)
* Scopri come usare le stringhe condivise con la funzione [`msg`](/docs/react/api/strings/msg): [Guida alle stringhe condivise](/docs/react/guides/shared-strings)