# General Translation React SDKs (gt-react, gt-next): Panoramica URL: https://generaltranslation.com/it/docs/react/overview.mdx --- title: Panoramica description: Scopri l'ecosistema React di General Translation, come funziona il suo modello di traduzione condiviso e quale quickstart seguire per il tuo framework. --- General Translation internazionalizza l'ecosistema React attraverso un'unica API condivisa. Gli stessi componenti, hook e la stessa configurazione funzionano sia che tu stia sviluppando un'app React a pagina singola, un'app Next.js, un'app TanStack Start o un'app React Native. Questa è la pagina introduttiva della sezione React. Continua a leggere per capire meglio l'ecosistema e scegliere il framework più adatto, poi segui il quickstart corrispondente. ## L'ecosistema React [#ecosystem] Ogni framework ha il proprio pacchetto, ma tutti espongono la stessa API di traduzione: * `gt-react` — per app React con rendering lato server e app a pagina singola (SPA), come Vite o Create React App. Vedi il [React Quickstart](/docs/react/react-quickstart) o il [React SPA Quickstart](/docs/react/react-spa-quickstart). * `gt-next` — per app Next.js che usano App Router e Pages Router. Vedi il [Next.js App Router Quickstart](/docs/react/nextjs-quickstart) o il [Next.js Pages Router Quickstart](/docs/react/nextjs-pages-router-quickstart). * `gt-tanstack-start` — per app TanStack Start. Vedi il [TanStack Start Quickstart](/docs/react/tanstack-start-quickstart). * `gt-react-native` — per app React Native, incluse Expo e React Native CLI puro. Vedi il [React Native Quickstart](/docs/react/react-native-quickstart). *Nota:* `gt-tanstack-start` *e* `gt-react-native` *sono sperimentali e non sono ancora consigliati in produzione.* ## Modello di traduzione condiviso [#shared-model] Poiché ogni pacchetto si basa sullo stesso core, impari il modello una volta sola e lo riutilizzi ovunque. Gli elementi sono: * **Il componente** [``](/docs/react/reference/components/t) **.** Avvolgi qualsiasi JSX in `` per tradurlo direttamente, inclusi elementi annidati e formattazione. `` traduce il suo contenuto come un'unica unità. * **L'hook** [`useGT`](/docs/react/reference/hooks/use-gt) **.** Traduci stringhe autonome — placeholder, valori `aria-label`, testo alt — usando la funzione che restituisce. Usalo così: `const gt = useGT();`, poi `gt('Hello, world!')`. Nei componenti asincroni dell'App Router, usa [`getGT`](/docs/react/nextjs/reference/functions/get-gt) da `gt-next/server`. * **Il componente** `GTProvider` **.** Avvolgi la tua app in modo che i componenti possano accedere alle traduzioni e all'impostazione regionale attiva. Il modo in cui gli fornisci le traduzioni varia leggermente a seconda del framework, ed è per questo che ognuno ha la propria guida introduttiva. * `gt.config.json`**.** Un unico file di configurazione nella radice del progetto che specifica il tuo `defaultLocale`, i `locales` di destinazione e dove vengono salvati i file di traduzione. * **La** `gt` **CLI.** Il pacchetto `gt` genera e scarica le traduzioni. Esegui `npx gt translate` per tradurre il tuo progetto tramite l'API di traduzione di General Translation. I componenti variabili ([``](/docs/react/reference/components/var), [``](/docs/react/reference/components/num), [``](/docs/react/reference/components/currency), [``](/docs/react/reference/components/datetime)), i componenti [``](/docs/react/reference/components/plural) e [``](/docs/react/reference/components/branch), e gli hook per l'impostazione regionale sono condivisi anche tra tutti i framework. ## Scegli il framework [#frameworks] Ogni configurazione usa gli stessi componenti di traduzione e la stessa CLI, ma l'inizializzazione e il modo in cui vengono caricate le traduzioni cambiano. Inizia dal quickstart del tuo framework: * **Per creare un'app React con rendering lato server:** inizializza `gt-react`, carica le traduzioni sul server e idrata `GTProvider`. Vedi [React Quickstart](/docs/react/react-quickstart). * **Per creare una React SPA (Vite, Create React App):** inizializza `gt-react` nel browser prima del rendering. Vedi [React SPA Quickstart](/docs/react/react-spa-quickstart). * **Per creare un'app Next.js con App Router:** aggiungi il plugin `withGTConfig` e usa `` nei componenti server e client. Vedi [Next.js App Router Quickstart](/docs/react/nextjs-quickstart). * **Per creare un'app Next.js con Pages Router:** carica l'impostazione regionale e le traduzioni tramite le props della pagina. Vedi [Next.js Pages Router Quickstart](/docs/react/nextjs-pages-router-quickstart). * **Per creare un'app TanStack Start:** inizializza General Translation nella root route e idrata `GTProvider` da un loader. Vedi [TanStack Start Quickstart](/docs/react/tanstack-start-quickstart). * **Per creare un'app React Native:** inizializza nell'entry point e aggiungi il plugin Babel per i polyfill. Vedi [React Native Quickstart](/docs/react/react-native-quickstart). Una volta completata la configurazione, [Guides](/docs/react/guides/configuring) copre i workflow condivisi — traduzione di JSX e stringhe, formattazione delle variabili, plurali, dizionari e gestione delle impostazioni regionali — mentre [Reference](/docs/react/reference/config) documenta ogni componente, hook, funzione e opzione di configurazione. Entrambi si applicano a tutti i framework, con le differenze specifiche mostrate nelle schede.