# gt-react: General Translation React SDK: Guida rapida a React
URL: https://generaltranslation.com/it/docs/react.mdx
---
title: Guida rapida a React
description: Aggiungi più lingue alla tua app React in meno di 10 minuti
---
Alla fine di questa guida, la tua app React mostrerà contenuti in più lingue, con un selettore di lingua con cui gli utenti potranno interagire.
**Prerequisiti:**
* Un'app React (Vite, Create React App o simili)
* Node.js 18+
**Vuoi un setup automatico?** Esegui `npx gt@latest` per configurare tutto con il [Setup Wizard](/docs/cli/init). Questa guida illustra il setup manuale.
***
## Passaggio 1: Installa i pacchetti
`gt-react` è la libreria che gestisce le traduzioni nella tua app. `gt` è lo strumento da riga di comando che prepara le traduzioni per l'ambiente di produzione.
```bash
npm i gt-react
npm i -D gt
```
```bash
yarn add gt-react
yarn add --dev gt
```
```bash
bun add gt-react
bun add --dev gt
```
```bash
pnpm add gt-react
pnpm add --save-dev gt
```
***
## Passaggio 2: Crea un file di configurazione per la traduzione
Crea un file **`gt.config.json`** nella directory radice del progetto. In questo modo la libreria sa quali lingue supporti:
```json title="gt.config.json"
{
"defaultLocale": "en",
"locales": ["es", "fr", "ja"],
"files": {
"gt": {
"output": "public/_gt/[locale].json"
}
}
}
```
* **`defaultLocale`** — la lingua in cui è scritta la tua app (la lingua di partenza).
* **`locales`** — le lingue in cui vuoi tradurre. Scegline una dall'[elenco delle lingue supportate](/docs/platform/supported-locales).
* **`files`** — indica alla CLI dove salvare i file di traduzione. Il percorso `output` deve corrispondere al percorso di import nella funzione `loadTranslations` (passaggio 3).
**Usi Vite?** Imposta il percorso di output su `"src/_gt/[locale].json"` invece di `"public/_gt/[locale].json"`. Vite importa i file di traduzione come moduli, quindi devono trovarsi in `src/` anziché in `public/`.
***
## Passaggio 3: Crea un caricatore delle traduzioni
`gt-react` viene eseguito interamente sul client, quindi richiede una funzione per caricare i file di traduzione a runtime. Crea un file `loadTranslations`:
```ts title="src/loadTranslations.ts"
export default async function loadTranslations(locale: string) {
try {
const translations = await import(`../public/_gt/${locale}.json`);
return translations.default;
} catch (error) {
console.warn(`No translations found for ${locale}`);
return {};
}
}
```
Questa funzione carica i file di traduzione JSON dalla directory `public/_gt/`. La CLI genera questi file quando esegui `npx gt translate`.
Poiché i file di traduzione di Vite si trovano in `src/_gt/` (vedi Passaggio 2), aggiorna il percorso di importazione:
```ts title="src/loadTranslations.ts"
export default async function loadTranslations(locale: string) {
try {
const translations = await import(`./_gt/${locale}.json`);
return translations.default;
} catch (error) {
console.warn(`No translations found for ${locale}`);
return {};
}
}
```
La configurazione webpack di CRA blocca l'uso dinamico di `import()` al di fuori di `src/`. Usa invece `fetch()`:
```ts title="src/loadTranslations.ts"
export default async function loadTranslations(locale: string) {
try {
const response = await fetch(`${process.env.PUBLIC_URL}/_gt/${locale}.json`);
if (!response.ok) throw new Error('Not found');
return await response.json();
} catch (error) {
console.warn(`No translations found for ${locale}`);
return {};
}
}
```
***
## Passaggio 4: Aggiungi GTProvider alla tua app
Il componente **`GTProvider`** consente all'intera app di accedere alle traduzioni. Avvolgi la tua app nel componente radice:
```tsx title="src/App.tsx"
import { GTProvider } from 'gt-react';
import gtConfig from '../gt.config.json';
import loadTranslations from './loadTranslations';
export default function App() {
return (
{/* Il contenuto della tua app */}
);
}
```
`GTProvider` accetta la configurazione e il caricatore delle traduzioni come prop. Gestisce lo stato dell'impostazione regionale e rende le traduzioni disponibili a tutti i componenti figli.
CRA limita le importazioni ai file all'interno di `src/`, quindi `import gtConfig from '../gt.config.json'` non funzionerà. Puoi copiare `gt.config.json` in `src/`, oppure inserire direttamente la configurazione nel codice:
```tsx title="src/App.tsx"
import { GTProvider } from 'gt-react';
import loadTranslations from './loadTranslations';
export default function App() {
return (
{/* Il contenuto della tua app */}
);
}
```
***
## Passaggio 5: Contrassegna i contenuti per la traduzione
Ora, racchiudi nel componente **``** qualsiasi testo che vuoi tradurre. `` sta per "translate":
```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.
);
}
```
Puoi racchiudere all'interno di `` tanto o poco JSX quanto vuoi. Tutto ciò che è contenuto al suo interno — testo, elementi annidati, perfino la formattazione — viene tradotto come un'unica unità.
***
## Passaggio 6: Aggiungi un selettore della lingua
Inserisci un **``** per consentire agli utenti di cambiare lingua:
```tsx title="src/components/Welcome.tsx"
import { T, LocaleSelector } from 'gt-react';
export default function Welcome() {
return (