Traduci le app React con l’IA di qualità umana

Configura l’internazionalizzazione di React (con esempi di commit)

Se hai già un’applicazione React, passa al Passaggio 2.

Per creare una nuova app React + TypeScript, apri il terminale, naviga nella cartella dove tieni i tuoi progetti e esegui:

npm create vite@latest react-localization-demo -- --template react-ts
cd react-localization-demo
npm install
npm run dev

npm create vite@latest react-localization-demo -- --template react-ts
cd react-localization-demo
npm install
npm run dev

Questo avvia un server di sviluppo e apre la pagina predefinita di Vite + React nel tuo browser.

Prima di aggiungere react-i18next, devi preparare il testo nella lingua sorgente che vuoi tradurre. Apri src/App.tsx e aggiungi le tue stringhe visibili all’utente:

function App() {
  return (
    <div>
      <h1>Benvenuto</h1>
      <p>Questa è una demo di localizzazione.</p>
      <button onClick={() => alert('Cliccami')}>Cliccami</button>
    </div>
  );
}

function App() {
  return (
    <div>
      <h1>Welcome</h1>
      <p>This is a localization demo.</p>
      <button onClick={() => alert('Click me')}>Click me</button>
    </div>
  );
}

Ai fini della nostra demo, abbiamo mantenuto la nostra interfaccia utente semplice con un titolo, una descrizione e un pulsante.

Ora che la tua app React mostra del testo di base in inglese, è il momento di connettere react-i18next in modo che quelle stringhe possano provenire da un file di traduzione anziché essere codificate direttamente.

Questo passaggio ha tre parti:

1. Installa i18next e react-i18next
2. Crea il tuo file di traduzione inglese (en.json)
3. Aggiorna il tuo componente per utilizzare l’hook useTranslation

3.1 installa le librerie i18n

Dalla cartella del tuo progetto, installa le librerie:

npm install i18next react-i18next

npm install i18next react-i18next

In questo esempio:

• i18next è la libreria di internazionalizzazione principale
• react-i18next aggiunge binding React come l’hook useTranslation

3.2 crea il file sorgente inglese per la traduzione (en.json)

Crea la seguente struttura di cartelle:

src/
 i18n/
 locales/
 en.json

src/
  i18n/
    locales/
      en.json

Quindi aggiungi le tue stringhe inglesi a src/i18n/locales/en.json:

{
 "welcome": "Welcome",
 "description": "This is a localization demo.",
 "clickMe": "Click me"
}

{
  "welcome": "Welcome",
  "description": "This is a localization demo.",
  "clickMe": "Click me"
}

Ogni chiave (welcome, description, clickMe) mappa al testo che vuoi visualizzare nell’interfaccia utente.

3.3 aggiorna app.tsx per usare useTranslation

Sostituisci il tuo testo inglese codificato direttamente con chiamate alla funzione di traduzione t().

L’hook useTranslation() dà al tuo componente accesso a:

• t() – cerca una stringa per chiave
• i18n – ti permette di cambiare lingua programmaticamente

Aggiorna src/App.tsx:

import { useTranslation } from 'react-i18next';

function App() {
 const { t } = useTranslation();

  return (
    <div>
      <h1>{t('welcome')}</h1>
      <p>{t('description')}</p>
      <button onClick={() => alert(t('clickMe'))}>{t('clickMe')}</button>
    </div>
  );
}

export default App;

import { useTranslation } from 'react-i18next';

function App() {
  const { t } = useTranslation();

  return (
    <div>
      <h1>{t('welcome')}</h1>
      <p>{t('description')}</p>
      <button onClick={() => alert(t('clickMe'))}>{t('clickMe')}</button>
    </div>
  );
}

export default App;

Al momento il tuo componente chiama t('welcome'), ma i18next non sa ancora:

• Dove si trova en.json
• Quali lingue esistono
• Quale dovrebbe essere la lingua predefinita

In questo passaggio, inizializzerai i18next e gli dirai di caricare automaticamente tutti i file JSON dalla tua cartella `locales` usando import.meta.glob di Vite.

4.1 crea il file di configurazione i18n

Crea un nuovo file in:

src/i18n/index.ts

src/i18n/index.ts

Aggiungi la seguente configurazione:

import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';

type TranslationResources = string | { [k: string]: TranslationResources } | TranslationResources[];

const modules = import.meta.glob<{default: Record<string, TranslationResources>}>('./locales/*.json', { eager: true })

const resources: Record<string, { translation: Record<string, TranslationResources> }> = {};

for (const path in modules) {
 const lang = path.match(/\.\/locales\/(.*)\.json$/)?.[1];
 if (lang) {
 resources[lang] = { translation: modules[path].default };
 }
}

i18n
 .use(initReactI18next)
 .init({
 resources,
 fallbackLng: 'en',
 interpolation: { escapeValue: false },
 });

export default i18n;

import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';

type TranslationResources = string | { [k: string]: TranslationResources } | TranslationResources[];

const modules = import.meta.glob<{default: Record<string, TranslationResources>}>('./locales/*.json', { eager: true })

const resources: Record<string, { translation: Record<string, TranslationResources> }> = {};

for (const path in modules) {
  const lang = path.match(/\.\/locales\/(.*)\.json$/)?.[1];
  if (lang) {
    resources[lang] = { translation: modules[path].default };
  }
}

i18n
  .use(initReactI18next)
  .init({
    resources,
    fallbackLng: 'en',
    interpolation: { escapeValue: false },
  });

export default i18n;

Questa configurazione è utile perché:

• Ogni file *.json che aggiungi a src/i18n/locales/ diventa disponibile automaticamente.
• Quando PTC crea nuovi file di lingua (ad esempio ar.json), verranno caricati automaticamente da questa configurazione — senza bisogno di importazioni o modifiche al codice.

4.2 importa i18n nel punto di ingresso della tua app

Prima che React renderizzi la tua app, i18next ha bisogno di essere inizializzato. Per fare ciò, devi importare la tua configurazione i18n nel file di ingresso.
Se salti questo passaggio, t() restituirà solo le chiavi di traduzione invece del testo tradotto.

Apri src/main.tsx e aggiungi l’import evidenziato:

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.tsx'
import './index.css'
import './i18n' // ← Aggiungi questo import!

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
)

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.tsx'
import './index.css'
import './i18n'  // ← Add this import!

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
)

Finora, hai usato solo stringhe statiche come “Benvenuto” e “Cliccami”. Ma le app reali hanno bisogno di contenuti dinamici:

• Includere link o formattazione all’interno del testo tradotto
• Salutare gli utenti per nome
• Mostrare conteggi (“1 messaggio” vs “3 messaggi”)

5.1 interpolazione: aggiungere variabili alle traduzioni

Invece di codificare direttamente valori che cambiano a runtime, puoi interpolarli nelle tue traduzioni.

Per fare ciò, includi una variabile all’interno di {{ }} nel tuo JSON, quindi passa il valore effettivo quando chiami t().

Aggiorna src/i18n/locales/en.json:

{
 "welcome": "Benvenuto",
 "userGreeting": "Bentornato, {{firstName}}!",
 "description": "Questa è una demo di localizzazione.",
 "clickMe": "Cliccami"
}

{
  "welcome": "Welcome",
  "userGreeting": "Welcome back, {{firstName}}!",
  "description": "This is a localization demo.",
  "clickMe": "Click me"
}

Ora aggiorna il tuo componente per usare il saluto interpolato:

import { useTranslation } from 'react-i18next';

function App() {
 const { t } = useTranslation();
 const user = { firstName: 'Sarah' };

  return (
    <div>
      <h1>{t('welcome')}</h1>
      <p>{t('userGreeting', { firstName: user.firstName })}</p>
      <p>{t('description')}</p>
      <button onClick={() => alert(t('clickMe'))}>{t('clickMe')}</button>
    </div>
  );
}

export default App;

import { useTranslation } from 'react-i18next';

function App() {
  const { t } = useTranslation();
  const user = { firstName: 'Sarah' };

  return (
    <div>
      <h1>{t('welcome')}</h1>
      <p>{t('userGreeting', { firstName: user.firstName })}</p>
      <p>{t('description')}</p>
      <button onClick={() => alert(t('clickMe'))}>{t('clickMe')}</button>
    </div>
  );
}

export default App;

Il secondo argomento di t() è un oggetto con i valori che vuoi sostituire. Puoi avere tutte le variabili di cui hai bisogno — assicurati solo che ognuna appaia nelle tue traduzioni.

5.2 Aggiungi forme plurali

Alcuni testi cambiano in base a un numero. Ad esempio, “1 nuovo messaggio” vs “3 nuovi messaggi”. i18next gestisce questo automaticamente quando fornisci le forme plurali.

Aggiorna src/i18n/locales/en.json:

{
 "welcome": "Benvenuto",
 "userGreeting": "Bentornato, {{firstName}}!",
 "description": "Questa è una demo di localizzazione.",
 "clickMe": "Cliccami",
 "newMessages_one": "Hai {{count}} nuovo messaggio.",
 "newMessages_other": "Hai {{count}} nuovi messaggi."
}

{
  "welcome": "Welcome",
  "userGreeting": "Welcome back, {{firstName}}!",
  "description": "This is a localization demo.",
  "clickMe": "Click me",
  "newMessages_one": "You have {{count}} new message.",
  "newMessages_other": "You have {{count}} new messages."
}

Affinché la pluralizzazione funzioni, la variabile interpolata deve essere chiamata count. i18next utilizza questo valore per scegliere la forma plurale corretta per ogni lingua.

Ora usalo nel tuo componente:

import { useTranslation } from 'react-i18next';

function App() {
 const { t } = useTranslation();
 const user = { firstName: 'Sarah' };
 const [messageCount, setMessageCount] = useState<number>(1);

  const handleIncrement = () => {
 setMessageCount(messageCount + 1);
 };

  return (
    <div>
      <h1>{t('welcome')}</h1>
      <p>{t('userGreeting', { firstName: user.firstName })}</p>
      <p>{t('newMessages', { count: messageCount })}</p>
      <p>{t('description')}</p>
      <button onClick={handleIncrement}>{t('clickMe')}</button>
    </div>
  );
}

export default App;

import { useTranslation } from 'react-i18next';

function App() {
  const { t } = useTranslation();
  const user = { firstName: 'Sarah' };
  const [messageCount, setMessageCount] = useState<number>(1);

  const handleIncrement = () => {
    setMessageCount(messageCount + 1);
  };

  return (
    <div>
      <h1>{t('welcome')}</h1>
      <p>{t('userGreeting', { firstName: user.firstName })}</p>
      <p>{t('newMessages', { count: messageCount })}</p>
      <p>{t('description')}</p>
      <button onClick={handleIncrement}>{t('clickMe')}</button>
    </div>
  );
}

export default App;

i18next sceglierà automaticamente newMessages (singolare) quando count è 1, e newMessages_other (plurale) per qualsiasi altro numero.

5.3 componente trans: aggiungere formattazione e link

A volte hai bisogno di formattazione (come testo in grassetto) o elementi interattivi (come link) all’interno di una stringa tradotta. Il componente Trans ti permette di includere elementi JSX (JavaScript XML) all’interno delle tue traduzioni.

Per prima cosa, importa il componente Trans:

import { useTranslation, Trans } from 'react-i18next';

import { useTranslation, Trans } from 'react-i18next';

Aggiungi una nuova chiave a src/i18n/locales/en.json:

{
 "welcome": "Benvenuto",
 "userGreeting": "Bentornato, {{firstName}}!",
 "newMessages_one": "Hai {{count}} nuovo messaggio.",
 "newMessages_other": "Hai {{count}} nuovi messaggi.",
 "description": "Questa è una demo di localizzazione.",
 "termsText": "Accetto i <1>Termini di servizio1> e l'<3>Informativa sulla privacy3>.",
 "clickMe": "Cliccami"
}

{
  "welcome": "Welcome",
  "userGreeting": "Welcome back, {{firstName}}!",
  "newMessages_one": "You have {{count}} new message.",
  "newMessages_other": "You have {{count}} new messages.",
  "description": "This is a localization demo.",
  "termsText": "I agree to the <1>Terms of Service</1> and <3>Privacy Policy</3>.",
  "clickMe": "Click me"
}

Nota i tag <1> e <3>. Questi sono segnaposto che mappano a componenti figli per indice (a partire da 0).

Ora usa il componente Trans nel tuo JSX:

import { useTranslation, Trans } from 'react-i18next';

function App() {
 const { t } = useTranslation();
 const user = { firstName: "Sarah" };
 const [messageCount, setMessageCount] = useState<number>(1);

  const handleIncrement = () => {
 setMessageCount(messageCount + 1);
 };

  return (
    <div>
      <h1>{t("welcome")}</h1>
      <p>{t("userGreeting", { firstName: user.firstName })}</p>
      <p>{t("newMessages", { count: messageCount })}</p>
      <p>{t("description")}</p>

      <p>
        <Trans i18nKey="termsText">
  Accetto i  <a href="/terms">Termini di servizio</a> e  
          <a href="/privacy">Informativa sulla privacy</a>.
        </Trans>
      </p>

      <button onClick={handleIncrement}>{t("clickMe")}</button>
    </div>
 );
}

export default App;

import { useTranslation, Trans } from 'react-i18next';

function App() {
  const { t } = useTranslation();
  const user = { firstName: "Sarah" };
  const [messageCount, setMessageCount] = useState<number>(1);

  const handleIncrement = () => {
    setMessageCount(messageCount + 1);
  };

  return (
    <div>
      <h1>{t("welcome")}</h1>
      <p>{t("userGreeting", { firstName: user.firstName })}</p>
      <p>{t("newMessages", { count: messageCount })}</p>
      <p>{t("description")}</p>

      <p>
        <Trans i18nKey="termsText">
          I agree to the <a href="/terms">Terms of Service</a> and 
          <a href="/privacy">Privacy Policy</a>.
        </Trans>
      </p>

      <button onClick={handleIncrement}>{t("clickMe")}</button>
    </div>
  );
}

export default App;