Implémentation de l’internationalisation (I18n) dans React / Blogs / Perficient

L’internationalisation (I18n) est un aspect crucial de la création d’applications Web destinées à un public mondial. Cela implique d’adapter votre application aux différentes langues et régions de manière transparente. Dans ce blog, nous explorerons l’implémentation d’I18n dans une application React, garantissant une expérience utilisateur fluide pour divers publics.

Pourquoi l’internationalisation ?

Avant d’entrer dans les détails de l’implémentation, comprenons pourquoi I18n est essentiel. Votre application a le potentiel d’atteindre des utilisateurs de différentes régions du monde. I18n vous aide à briser les barrières linguistiques, rendant votre application React plus inclusive et attrayante pour un public diversifié.

Configuration de votre projet React

Tout d’abord, assurez-vous qu’une application React est opérationnelle. Sinon, vous pouvez en créer un à l’aide de l’application Create React ou de toute autre méthode préférée.

npx créer-react-app i18n-react-app

cd i18n-react-app

Choisir une bibliothèque I18n

Plusieurs bibliothèques peuvent vous aider avec I18n dans React. Un choix populaire est ‘réagir-i18next’.

Installez-le en utilisant :

npm installer i18next réagir-i18next

Configuration du I18n

Créez un fichier nommé i18n.js pour configurer I18n :

import i18n from "i18next";
import { initReactI18next } from "react-i18next";
import translationEN from "./translations/en.json"; // Import JSON file for English Language
import translationES from "./translations/es.json"; // Import JSON file for Spanish Language
const resources = {
  en: {
    translation: translationEN,
  },
  es: {
    translation: translationES,
  },
  // Add translations for other languages here
};

i18n.use(initReactI18next).init({
  resources,
  lng: "en", // Default language
  interpolation: {
    escapeValue: false,
  },
});
export default i18n;

Gérer les traductions avec un fichier JSON

Créez un dossier nommé ‘traductions’ à la racine de votre projet et ajoutez un fichier nommé ‘en.json’ (pour l’anglais) et ‘es.json’ (pour l’espagnol) avec vos traductions :

en.json

{
  "welcome": "Bienvenido a nuestra aplicación React!"
  // Add more key-value pairs as needed
}

es.json

{
  "welcome": "Welcome to our React App!",
  // Add more key-value pairs as needed
}

Utilisation de I18n dans les composants

Maintenant, mettons ces traductions en œuvre dans un composant React. Considérez un ‘Message de bienvenue’ composant:

import React from "react";
import { useTranslation } from "react-i18next";
const WelcomeMessage = () => {
  const { t } = useTranslation();
  return (
    <div>
      <h1>{t("welcome")}</h1>
    </div>
  );
};
export default WelcomeMessage;

Composant de changement de langue

Modifier le ‘Changeur de langue’ composant pour inclure des boutons pour basculer entre l’anglais et l’espagnol.

import React from "react";
import i18n from "./i18n";
const LanguageSwitcher = () => {
  const handleChangeLanguage = (lng) => {
    i18n.changeLanguage(lng);
  };
  return (
    <div>
      <button onClick={() => handleChangeLanguage("en")}>English</button>
      <button onClick={() => handleChangeLanguage("es")}>Español</button>
      {/* Add buttons for other languages as needed */}
    </div>
  );
};
export default LanguageSwitcher;

Rassembler tout cela

Enfin, intégrez ces composants dans votre application principale :

App.js

import React from "react";
import WelcomeMessage from "./WelcomeMessage";
import LanguageSwitcher from "./LanguageSwitcher";
const App = () => {
  return (
    <div>
      <LanguageSwitcher />
      <WelcomeMessage />
      {/* Add more components as needed */}
    </div>
  );
};
export default App;

Sortir:

Conclusion

Dans ce blog, nous avons abordé l’importance de l’internationalisation dans une application React et démontré comment la mettre en œuvre à l’aide de la bibliothèque « react-i18next ». Avec des traductions appropriées et des capacités de changement de langue, votre application React est désormais équipée pour atteindre un public plus large et plus diversifié.

En suivant ces étapes, vous pouvez créer une application React conviviale et accessible au niveau international qui trouve un écho auprès des utilisateurs du monde entier. Bon codage !