# General Translation React SDKs (gt-react, gt-next, gt-react-native): Internazionalizzare una React SPA
URL: https://generaltranslation.com/it/docs/react/guides/spa/internationalizing-react-spa.mdx
Docs index: https://generaltranslation.com/llms.txt
Description: Come contrassegnare JSX e stringhe per la traduzione in una React SPA configurata.

Quando l'inizializzatore SPA viene eseguito prima del punto di ingresso dell'applicazione, i componenti e le
stringhe a livello di modulo possono usare immediatamente l'impostazione regionale attiva. Questa pagina raccoglie
le regole di implementazione specifiche di questo modello di avvio.

## Tradurre JSX [#jsx]

Racchiudi interi blocchi di JSX traducibile nel
[componente `<T>`](/docs/react/reference/components/t). Mantieni statica la struttura all&#39;interno di
ciascun blocco e non annidare mai un
[`<T>`](/docs/react/reference/components/t) dentro un altro:

```tsx title="src/components/Welcome.tsx"
import { T, Var } from 'gt-react';

type WelcomeProps = {
  name: string;
};

export default function Welcome({ name }: WelcomeProps) {
  return (
    <T>
      <h1>
        Welcome, <Var>{name}</Var>!
      </h1>
      <p>Your workspace is ready.</p>
    </T>
  );
}
```

Usa [`<Var>`](/docs/react/reference/components/var) per i valori dinamici non
formattati. Usa [`<Currency>`](/docs/react/reference/components/currency),
[`<DateTime>`](/docs/react/reference/components/datetime) e
[`<Num>`](/docs/react/reference/components/num) quando un valore richiede una
formattazione in base all&#39;impostazione regionale.

Anche i contenuti condizionali devono avere una struttura di traduzione stabile. Usa
[`<Branch>`](/docs/react/reference/components/branch) per le alternative denominate e
[`<Plural>`](/docs/react/reference/components/plural) per il testo dipendente dal conteggio.
Includi frasi complete in ogni ramo quando la condizione modifica la grammatica
al di là di una singola parola.

[Traduzione di JSX](/docs/react/guides/translating-jsx),
[Formattazione delle variabili](/docs/react/guides/formatting-variables) e
[Gestione di plurali e rami](/docs/react/guides/handling-plurals-and-branches)
forniscono i pattern completi.

## Tradurre le stringhe [#strings]

In una SPA inizializzata, usa preferibilmente [`t()`](/docs/react/reference/functions/t-function)
per le stringhe. Il bootstrap attende le traduzioni prima di importare
l&#39;applicazione, quindi [`t()`](/docs/react/reference/functions/t-function) funziona anche
a livello di modulo:

```ts title="src/navigation.ts"
import { t } from 'gt-react';

export const navigation = [
  { label: t('Home'), href: '/' },
  { label: t('About'), href: '/about' },
];
```

Il messaggio sorgente deve essere statico. Passa separatamente i valori dinamici con la sintassi
ICU:

```ts
import { t } from 'gt-react';

const greeting = t('Hello, {name}!', { name: 'Ada' });
const attendees = t(
  '{count, plural, one {One person is here} other {# people are here}}',
  { count: 3 }
);
```

Il selettore dell&#39;impostazione regionale nella SPA ricarica l&#39;applicazione dopo un cambio di impostazione regionale, quindi
le traduzioni a livello di modulo vengono rivalutate nella nuova impostazione regionale. Consulta
[Traduzione delle stringhe](/docs/react/guides/translating-strings) per il contesto e
i pattern dei messaggi condivisi.

## Aggiungi il selettore della lingua [#locale-selector]

Aggiungi il [componente `<LocaleSelector>`](/docs/react/reference/components/locale-selector),
in cui gli utenti possono scegliere una lingua:

```tsx title="src/components/LanguageMenu.tsx"
import { LocaleSelector } from 'gt-react';

export default function LanguageMenu() {
  return <LocaleSelector />;
}
```

Legge i locales configurati per l&#39;inizializzatore, salva la selezione e
ricarica la SPA affinché le traduzioni a livello di modulo utilizzino la nuova impostazione regionale.

## Valida l&#39;implementazione [#validate]

Verifica la sintassi della traduzione dopo aver contrassegnato il contenuto:

```bash
npx gt validate
```

Quindi esegui il controllo dei tipi e la build di produzione dell&#39;applicazione. Correggi eventuali
errori di sintassi nelle traduzioni, file dell&#39;impostazione regionale mancanti o errori di importazione del bundler prima di
generare le traduzioni.

## Next steps

- /docs/react/guides/translating-jsx
- /docs/react/guides/translating-strings
- /docs/react/guides/formatting-variables
- /docs/react/guides/handling-plurals-and-branches

## Sitemap

See the full [sitemap](https://generaltranslation.com/sitemap.md) for all pages.