Traduisez les applications React avec l’IA de qualité humaine

Configurer l’internationalisation React (avec des exemples de commit)

Si vous avez déjà une application React, passez à l’étape 2.

Pour créer une nouvelle application React + TypeScript, ouvrez votre terminal, naviguez vers le dossier où vous gardez vos projets, et exécutez :

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

Cela démarre un serveur de développement et ouvre la page Vite + React par défaut dans votre navigateur.

Avant d’ajouter react-i18next, vous devez préparer le texte en langue source que vous souhaitez traduire. Ouvrez src/App.tsx et ajoutez vos chaînes destinées à l’utilisateur :

function App() {
  return (
    <div>
      <h1>Bienvenue</h1>
      <p>Ceci est une démonstration de localisation.</p>
      <button onClick={() => alert('Cliquez-moi')}>Cliquez-moi</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>
  );
}

Pour les besoins de notre démonstration, nous avons gardé notre interface utilisateur simple avec un titre, une description et un bouton.

Maintenant que votre application React affiche du texte anglais de base, il est temps de connecter react-i18next pour que ces chaînes puissent provenir d’un fichier de traduction au lieu d’être codées en dur.

Cette étape comporte trois parties :

1. Installez i18next et react-i18next
2. Créez votre fichier de traduction anglaise (en.json)
3. Mettez à jour votre composant pour utiliser le hook useTranslation

3.1 installer les bibliothèques i18n

Depuis le dossier de votre projet, installez les bibliothèques :

npm install i18next react-i18next

npm install i18next react-i18next

Dans cet exemple :

• i18next est la bibliothèque d’internationalisation principale
• react-i18next ajoute des liaisons React comme le hook useTranslation

3.2 créer le fichier source anglais pour la traduction (en.json)

Créez la structure de dossiers suivante :

src/
 i18n/
 locales/
 en.json

src/
  i18n/
    locales/
      en.json

Ensuite, ajoutez vos chaînes en anglais à 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"
}

Chaque clé (welcome, description, clickMe) correspond au texte que vous souhaitez afficher dans l’interface utilisateur.

3.3 mettre à jour app.tsx pour utiliser useTranslation

Remplacez votre texte anglais codé en dur par des appels à la fonction de traduction t().

Le hook useTranslation() donne à votre composant accès à :

• t() – recherche une chaîne par clé
• i18n – vous permet de changer de langue par programmation

Mettez à jour 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;

Pour l’instant, votre composant appelle t('welcome'), mais i18next ne sait pas encore :

• Où se trouve en.json
• Quelles langues existent
• Quelle devrait être la langue par défaut

Dans cette étape, vous allez initialiser i18next et lui dire de charger automatiquement tous les fichiers JSON de votre dossier locales en utilisant import.meta.glob de Vite.

4.1 créer le fichier de configuration i18n

Créez un nouveau fichier à :

src/i18n/index.ts

src/i18n/index.ts

Ajoutez la configuration suivante :

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;

Cette configuration est utile car :

• Chaque fichier *.json que vous ajoutez à src/i18n/locales/ devient automatiquement disponible.
• Lorsque PTC crée de nouveaux fichiers de langue (par exemple ar.json), ils seront automatiquement chargés par cette configuration — aucun import ou changement de code n’est nécessaire.

4.2 importer i18n dans le point d’entrée de votre application

Avant que React ne rende votre application, i18next a besoin d’une chance de s’initialiser. Pour que cela se produise, vous devez importer votre configuration i18n dans le fichier d’entrée.
Si vous sautez cette étape, t() retournera simplement les clés de traduction au lieu du texte traduit.

Ouvrez src/main.tsx et ajoutez l’import mis en évidence :

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.tsx'
import './index.css'
import './i18n' // ← Ajoutez cet 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>,
)

Jusqu’à présent, vous n’avez utilisé que des chaînes statiques comme “Bienvenue” et “Cliquez-moi”. Mais les vraies applications ont besoin de contenu dynamique :

• Inclure des liens ou du formatage dans le texte traduit
• Saluer les utilisateurs par leur nom
• Afficher des décomptes (“1 message” vs “3 messages”)

5.1 interpolation : ajouter des variables aux traductions

Au lieu de coder en dur des valeurs qui changent à l’exécution, vous pouvez les interpoler dans vos traductions.

Pour ce faire, incluez une variable à l’intérieur de {{ }} dans votre JSON, puis passez la valeur réelle lors de l’appel à t().

Mettez à jour src/i18n/locales/en.json :

{
 "welcome": "Bienvenue",
 "userGreeting": "Bon retour, {{firstName}} !",
 "description": "Ceci est une démonstration de localisation.",
 "clickMe": "Cliquez-moi"
}

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

Maintenant, mettez à jour votre composant pour utiliser le message de bienvenue interpolé :

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;

Le deuxième argument de t() est un objet avec les valeurs que vous voulez substituer. Vous pouvez avoir autant de variables que nécessaire — assurez-vous simplement que chacune apparaît dans vos traductions.

5.2 Ajouter des formes plurielles

Certains textes changent en fonction d’un nombre. Par exemple, “1 nouveau message” vs “3 nouveaux messages”. i18next gère cela automatiquement lorsque vous fournissez des formes plurielles.

Mettez à jour src/i18n/locales/en.json :

{
 "welcome": "Bienvenue",
 "userGreeting": "Bon retour, {{firstName}} !",
 "description": "Ceci est une démonstration de localisation.",
 "clickMe": "Cliquez-moi",
 "newMessages_one": "Vous avez {{count}} nouveau message.",
 "newMessages_other": "Vous avez {{count}} nouveaux messages."
}

{
  "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."
}

Pour que la pluralisation fonctionne, la variable interpolée doit être nommée count. i18next utilise cette valeur pour choisir la forme plurielle correcte pour chaque langue.

Maintenant, utilisez-la dans votre composant :

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 choisira automatiquement newMessages (singulier) lorsque le compte est 1, et newMessages_other (pluriel) pour tout autre nombre.

5.3 Composant trans : ajout de mise en forme et de liens

Parfois, vous avez besoin de mise en forme (comme du texte en gras) ou d’éléments interactifs (comme des liens) à l’intérieur d’une chaîne traduite. Le composant Trans vous permet d’inclure des éléments JSX (JavaScript XML) dans vos traductions.

Tout d’abord, importez le composant Trans :

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

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

Ajoutez une nouvelle clé à src/i18n/locales/en.json :

{
 "welcome": "Bienvenue",
 "userGreeting": "Bon retour, {{firstName}} !",
 "newMessages_one": "Vous avez {{count}} nouveau message.",
 "newMessages_other": "Vous avez {{count}} nouveaux messages.",
 "description": "Ceci est une démonstration de localisation.",
 "termsText": "J'accepte les <1>Conditions d'utilisation1> et la <3>Politique de confidentialité3>.",
 "clickMe": "Cliquez-moi"
}

{
  "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"
}

Remarquez les balises <1> et <3>. Ce sont des espaces réservés qui correspondent aux composants enfants par index (en commençant par 0).

Maintenant, utilisez le composant Trans dans votre 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">
  J'accepte les  <a href="/terms">Conditions d'utilisation</a> et la  
          <a href="/privacy">Politique de confidentialité</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;