# General Translation React SDKs (gt-react, gt-next, gt-react-native): Panoramica URL: https://generaltranslation.com/it/docs/react/overview.mdx Docs index: https://generaltranslation.com/llms.txt Description: Scopri quale libreria React e quickstart sono adatti al tuo framework. Le librerie di internazionalizzazione React di General Translation condividono componenti, hook e configurazione tra React SPA, Next.js App Router, Next.js Pages Router, TanStack Start e 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 famiglia di framework ha il proprio pacchetto: * `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. Consulta i relativi quickstart per conoscere le limitazioni attuali prima di scegliere uno dei due. ## Modello di traduzione condiviso [#shared-model] Poiché ogni libreria i18n React condivide gli stessi componenti core e hook, esiste un unico modello di traduzione da imparare. Le parti importanti sono: * [``](/docs/react/reference/components/t) **componente.** Avvolgi qualsiasi JSX in [``](/docs/react/reference/components/t) per tradurlo direttamente, inclusi elementi annidati e formattazione. [``](/docs/react/reference/components/t) traduce il suo contenuto come un'unica unità. * [`useGT`](/docs/react/reference/hooks/use-gt) **hook.** 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`. * [`GTProvider`](/docs/react/reference/components/gt-provider) **componente.** 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 il proprio quickstart. * `gt` **CLI.** Il pacchetto `gt` genera e scarica le traduzioni. Il relativo file [`gt.config.json`](/docs/cli/reference/config) specifica il tuo `defaultLocale`, i `locales` di destinazione e i percorsi di output delle traduzioni. Esegui [`npx gt translate`](/docs/cli/reference/commands/translate) per tradurre il tuo progetto tramite l'API di traduzione di General Translation. Anche i componenti variabili ([``](/docs/react/reference/components/var), [``](/docs/react/reference/components/num), [``](/docs/react/reference/components/currency) e [``](/docs/react/reference/components/datetime)) sono condivisi, insieme a [``](/docs/react/reference/components/plural), [``](/docs/react/reference/components/branch), [``](/docs/react/reference/components/derive) e agli hook dell'impostazione regionale come [`useLocale`](/docs/react/reference/hooks/use-locale). ## 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`](/docs/react/reference/components/gt-provider). 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 [``](/docs/react/reference/components/t) 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 in `src/router.tsx` e idrata [`GTProvider`](/docs/react/reference/components/gt-provider) dal loader della route radice. 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. ## Sitemap See the full [sitemap](https://generaltranslation.com/sitemap.md) for all pages.