# 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. Il componente [``](/docs/react/api/components/gtprovider) Il componente [``](/docs/react/api/components/t) L’hook [`useGT`](/docs/react/api/strings/use-gt) La funzione [`msg`](/docs/react/api/strings/msg) per le stringhe condivise (Facoltativo) L’hook [`useTranslations`](/docs/react/api/dictionary/use-translations) ## Il componente `` Il componente [``](/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 (
{/* Il contenuto della tua applicazione */}
); } ``` **Importante:** il provider deve avvolgere l'intera applicazione ed essere posizionato il più in alto possibile nell'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 `` Il componente [``](/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'elemento in una lingua supportata. Ti consigliamo di usare il componente [``](/docs/react/api/components/t) ogni volta che è possibile, poiché offre la massima flessibilità per le traduzioni. A differenza delle stringhe, il componente [``](/docs/react/api/components/t) può essere usato per tradurre contenuti HTML, risultando molto più potente delle semplici traduzioni di stringhe. ### Esempi ```tsx
Hello, world!
``` ```tsx

Here is an image

Example
``` ```tsx Formatting can be done easily with the `` component. {1000} {new Date()} {1000} ``` Il componente [``](/docs/react/api/components/t) funziona con [componenti variabili](/docs/react/guides/variables) come [``](/docs/react/api/components/num), [``](/docs/react/api/components/datetime) e [``](/docs/react/api/components/currency) per la formattazione dinamica dei contenuti. Consulta la [guida al componente ``](/docs/react/guides/t) per scoprire i diversi modi di usare il componente [``](/docs/react/api/components/t). ## L'hook `useGT` L'hook [`useGT`](/docs/react/api/strings/use-gt) è un hook di React che può essere usato in modo simile al componente [``](/docs/react/api/components/t), con alcuni compromessi. L'hook restituisce una funzione che può essere utilizzata per tradurre stringhe. ```tsx const gt = useGT(); gt('Hello, world!'); ``` Rispetto al componente [``](/docs/react/api/components/t), l'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 [``](/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'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'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 ( ); } ``` 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. Usa [`msg`](/docs/react/api/strings/msg) per i contenuti condivisi che devono essere tradotti in modo coerente in tutta l'applicazione. Per i contenuti specifici di un componente, preferisci [``](/docs/react/api/components/t) o [`useGT`](/docs/react/api/strings/use-gt). Per saperne di più sulla funzione `msg`, consulta la guida alle [stringhe condivise](/docs/react/guides/shared-strings). ## L'hook `useTranslations` L'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/). Sconsigliamo di usare l'hook [`useTranslations`](/docs/react/api/dictionary/use-translations) nella tua applicazione. L'uso frequente dell'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 [``](/docs/react/api/components/t) o l'hook [`useGT`](/docs/react/api/strings/use-gt). Se stai migrando da un'altra libreria i18n, l'hook [`useTranslations`](/docs/react/api/dictionary/use-translations) è un sostituto immediato e può essere utile per migrare gradualmente la tua base di codice. Consulta la guida ai [dizionari](/docs/react/guides/dictionaries) per saperne di più sull'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 [``](/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)