# General Translation Knowledge Base: Come si traduce un'app React? URL: https://generaltranslation.com/it/kb/translate-react-app.mdx Docs index: https://generaltranslation.com/llms.txt Description: Tradurre un'app React significa internazionalizzarne i componenti affinché vengano renderizzati nella lingua dell'utente, quindi tradurre ogni stringa in ciascuna lingua supportata. gt-react di General Translation traduce il JSX in-place nel componente ``, mentre npx gt translate genera un file per ogni lingua. Category: Internazionalizzazione Last updated: 2026-10-21 Authors: Kevin Liu, Kevin Wu Published: 2026-10-21 Tradurre un'app React richiede due attività distinte: l'internazionalizzazione (i18n), che permette ai componenti di essere renderizzati nella lingua dell'utente, e la traduzione di ogni stringa in ciascuna lingua supportata. È un lavoro complesso perché il testo si trova all'interno del JSX, mescolato a markup, variabili e plurali, le cui regole cambiano da lingua a lingua (l'inglese ha 2 forme, l'arabo ne ha 6). Nella configurazione tipica ogni stringa viene sostituita da una chiave, come `t('home.welcome')`, con un file JSON per lingua da mantenere sincronizzato. Se tradotto senza il contesto della UI, un pulsante "Save" può diventare in tedesco *sparen* (risparmiare denaro) anziché *speichern* (salvare un file). ## Video The video is narrated in English, with English captions. [How do I translate a React app?](https://caxecubb9c64cezv.public.blob.vercel-storage.com/films/kb-translate-react-app.mp4) (48 s) General Translation lets you initialize `gt-react` before the app renders and wrap its text in `T`. List your languages in `gt.config.json` and add a `loadTranslations` file, let an entry file call `initializeGTSPA` first, wrap the page's text in ``, then sign in, set your project ID and run `npx gt translate`. ## Modi per tradurre un'app React | Approccio | Punti di forza | Cosa resta a tuo carico | | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | Una libreria i18n basata su chiavi ([`i18next`](/kb/general-translation-vs-i18next) con `react-i18next`, oppure [`react-intl`](/kb/general-translation-vs-react-intl)) | Runtime maturo per renderizzare le traduzioni, selezionare le forme plurali e formattare i valori | Sostituire le stringhe con chiavi, mantenere sincronizzato un file JSON per ogni lingua e produrre tutte le traduzioni | | [Lingui](/kb/general-translation-vs-lingui) | Mantiene i testi inline con la macro ``, mentre `lingui extract` genera un catalogo per ogni lingua | Tradurre ogni catalogo, a mano o tramite un servizio collegato, e rieseguire extract e compile ogni volta che i testi cambiano | | Un sistema di gestione delle traduzioni ([Crowdin](/kb/general-translation-vs-crowdin), [Lokalise](/kb/general-translation-vs-lokalise)) | Un editor web, sincronizzato con il tuo repository, in cui i traduttori lavorano con screenshot, glossario e memoria di traduzione | La libreria i18n e i file di chiavi nel codice, la configurazione della sincronizzazione e l'attesa dei traduttori prima di ogni rilascio | | General Translation (`gt-react` e la CLI `gt`) | [``](/docs/react/reference/components/t) traduce il JSX in-place senza chiavi, e [`npx gt translate`](/docs/cli/reference/commands/translate) genera un file per ogni lingua, usando come contesto la struttura JSX circostante | Racchiudere il testo in [``](/docs/react/reference/components/t), una configurazione iniziale da fare una sola volta (lingue in `gt.config.json`, un loader, un file di ingresso, l'accesso e un ID progetto) e rieseguire [`npx gt translate`](/docs/cli/reference/commands/translate) (in locale o in CI) quando i contenuti cambiano | Usa solo una libreria basata su chiavi, con file JSON scritti a mano, se l'app ha poche stringhe che cambiano raramente. Scegli Lingui se vuoi mantenere i testi inline e disponi di traduttori che ne compilino i cataloghi, e un sistema di gestione delle traduzioni se un team di localizzazione traduce a mano ogni rilascio. Scegli General Translation se l'app è in continua evoluzione e ogni rilascio deve uscire in tutte le lingue. ## Tradurre un'app React con General Translation La libreria open source `gt-react` e la CLI `gt` di General Translation consentono di tradurre una single-page app (SPA) React, come un progetto Vite o webpack. La procedura guidata di configurazione `npx gt@latest` può configurare automaticamente l'entry di Vite e il caricamento delle traduzioni (passaggio sperimentale). Per eseguire la configurazione manualmente: 1. Installa `gt-react` e la CLI `gt`. 2. Elenca le tue lingue in `gt.config.json`. 3. Aggiungi una funzione [`loadTranslations`](/docs/react/reference/functions/load-translations) e chiama [`initializeGTSPA`](/docs/react/reference/config#initialize-spa) in un piccolo file di ingresso, in modo che le traduzioni vengano caricate prima del rendering dell'app. 4. Racchiudi il testo nel componente [``](/docs/react/reference/components/t): ```tsx title="src/components/Welcome.tsx" import { T } from 'gt-react'; export default function Welcome() { return (

Welcome to my app

This content will be translated automatically.
); } ``` 5. Accedi con [`npx gt login`](/docs/cli/reference/commands/login) e imposta l'ID progetto. 6. Esegui [`npx gt translate`](/docs/cli/reference/commands/translate) per generare un file di traduzione per ogni lingua. La prop `context` di [``](/docs/react/reference/components/t) permette di disambiguare parole come "Salva", mentre il Glossario e i prompt personalizzati nella dashboard garantiscono coerenza di terminologia e tono. Le app [React server-rendered](/docs/react/react-quickstart), [React Router framework](/docs/react/react-router-quickstart) e [Next.js](/docs/react/nextjs-quickstart) (con `gt-next`) hanno ciascuna la propria guida di avvio rapido; per una SPA, trovi tutti i passaggi nella [Guida rapida per SPA React](/docs/react/react-spa-quickstart). ## Related questions - [Come si aggiunge l'i18n a un'app Next.js con App Router?](https://generaltranslation.com/it/kb/add-i18n-to-nextjs.mdx): Inizia con gt init per configurare General Translation in un progetto App Router supportato, poi contrassegna il contenuto di origine, genera le traduzioni e verifica il cambio di lingua. gt-next mantiene i testi nel JSX insieme al contesto di traduzione; la CLI, l'editor della Dashboard e Locadex si occupano di generazione, revisione e aggiornamenti continui. Questa guida mostra anche la configurazione esplicita con file locali. - [Come si traduce un'app React Native?](https://generaltranslation.com/it/kb/translate-react-native-app.mdx): Contrassegna il testo nei tuoi componenti, genera un file di traduzione per ogni lingua, aggiungi i Polyfill Intl e carica il file corrispondente alla lingua del dispositivo. Con gt-react-native, la libreria sperimentale di General Translation, racchiudi il testo in ``, un plugin Babel aggiunge i polyfill e npx gt translate genera i file. - [Posso fare i18n senza file di traduzione?](https://generaltranslation.com/it/kb/i18n-without-translation-files.mdx): Sì. Le librerie gt-react e gt-next di General Translation gestiscono l'i18n in React e Next.js senza chiavi di traduzione e senza dover mantenere un file JSON per ogni lingua. I testi restano inline nel JSX all'interno del componente `` e il comando gt translate genera le traduzioni per ogni lingua durante la build, sfruttando il contesto del tuo codice. Locadex può mantenerle aggiornate tramite pull request. - [Come si traducono le stringhe al di fuori di JSX?](https://generaltranslation.com/it/kb/translate-strings-outside-jsx.mdx): Passa ogni stringa che non è un figlio JSX, come un segnaposto o una costante a livello di modulo, a una funzione di traduzione nel punto in cui viene renderizzata. L'hook useGT di General Translation restituisce questa funzione, mentre msg con useMessages traduce le costanti definite al di fuori di un componente. - [Come si gestiscono i plurali in React?](https://generaltranslation.com/it/kb/how-to-handle-plurals-in-react.mdx): Per gestire i plurali in React, fornisci per ogni lingua una frase per ciascuna forma plurale e scegli quella corretta in base alle regole del plurale di quella lingua, dato che l'inglese ha 2 forme, il russo 4 e l'arabo 6. Il componente `` di General Translation in gt-react e gt-next accetta le tue forme sorgente, e General Translation genera le forme necessarie per ogni lingua di destinazione. ## Previous and next questions - Previous question: [Come si traduce un'app React Native?](https://generaltranslation.com/it/kb/translate-react-native-app.mdx) - Next question: [Come si traduce un'app Vue?](https://generaltranslation.com/it/kb/translate-vue-app.mdx) ## Sitemap See the [Knowledge Base sitemap](https://generaltranslation.com/it/kb/sitemap.md) for every article.