Internationalisation avec React-Intl

Consultez un didacticiel simple sur l’ajout de l’internationalisation à une petite application React à l’aide de la bibliothèque React-intl pour une localisation facile dans différentes langues, régions et contextes culturels.

Internationalisation, souvent abrégée en i18n (où 18 représente le nombre de lettres omises entre « i » et « n »), est le processus de conception et de développement d’une application de manière à permettre une localisation facile dans différentes langues, régions et contextes culturels. Cela implique de séparer l’interface utilisateur et le contenu de la base de code de l’application pour faciliter la traduction et l’adaptation.

Dans un article précédentnous avons discuté de l’importance de l’internationalisation des applications Web et de certaines étapes importantes que l’on peut suivre pour y parvenir.

Dans l’article d’aujourd’hui, nous passerons en revue un didacticiel plus pratique sur l’ajout de l’internationalisation à une petite application React à l’aide du réagir-intl bibliothèque.

Réagir-Intl

Réagir-intlpartie de FormatJS, est une bibliothèque populaire utilisée pour internationaliser les applications React. Il fournit des composants React et une API pour formater les dates, les nombres et les chaînes, y compris la pluralisation et la gestion des traductions.

Il prend également en charge la traduction de messages au singulier et au pluriel, la substitution de chaînes et le formatage de texte enrichi, entre autres.

Dans une application React, nous pouvons commencer par installer d’abord le react-intl bibliothèque:

npm install react-intl

# or

yarn add react-intl

Définir les messages de langue

Pour commencer à introduire l’internationalisation dans notre application, nous devons d’abord définir nos messages linguistiques. Cela se fait généralement au format JSON et chaque langue est définie dans un fichier séparé.

Nous allons créer un locales/ dossier dans le src/ annuaire. À l’intérieur locales/nous allons créer trois fichiers : en.json, es.json et fr.json pour représenter les langues anglaise, espagnole et française.

src/locales/en.json

{
  "app.greeting": "Hello, User!",
  "app.description": "This is a simple react application"
}

src/locales/es.json

{
  "app.greeting": "¡Hola, Usuario!",
  "app.description": "Esta es una simple aplicación de react"
}

src/locales/fr.json

{
  "app.greeting": "Bonjour, Utilisateur !",
  "app.description": "C'est une simple application React"
}

Ces fichiers serviront de dictionnaires, mappant les identifiants de messages (comme app.greeting et app.description) au message dans la langue correspondante.

Configuration de React-Intl

Maintenant, nous pouvons configurer notre application pour qu’elle utilise react-intl. Dans notre fichier d’application principal (App.js), nous importerons les composants nécessaires depuis react-intl ainsi que les différents dictionnaires de messages linguistiques que nous venons de créer.

import { IntlProvider, FormattedMessage } from "react-intl";

import messages_en from "./locales/en.json";
import messages_es from "./locales/es.json";
import messages_fr from "./locales/fr.json";

Nous allons ensuite créer un objet pour stocker tous nos dictionnaires :

const messages = {
  en: messages_en,
  es: messages_es,
  fr: messages_fr,
};

Ensuite, nous envelopperons notre application dans le <IntlProvider /> composant, fourni par react-intl, qui fournira un contexte i18n à tous les composants de notre application. Le <IntlProvider /> Le composant nécessite deux accessoires : locale et messages.

• locale est une valeur de chaîne qui représente les paramètres régionaux de langue que nous souhaitons utiliser dans notre application.
• messages est un objet qui contient les messages texte (chaînes) que nous souhaitons afficher dans notre application.

Pour commencer, nous utiliserons par défaut l’anglais ('en') et référencez le dictionnaire de messages anglais que nous avons créé.

export default function App() {
  const locale = "en"; 

  return (
    <IntlProvider locale={locale} messages={messages[locale]}>
      {}
    </IntlProvider>
  );
}

Utiliser les messages

Avec react-intl maintenant configuré, nous pouvons l’utiliser dans notre application. Nous pouvons utiliser le Message formaté composant de react-intl pour afficher du texte.

export default function App() {
  const locale = "en";

  return (
    <IntlProvider locale={locale} messages={messages[locale]}>
      <FormattedMessage id="app.greeting" />
      <br />
      <br />
      <FormattedMessage id="app.description" />
    </IntlProvider>
  );
}

Lors de l’enregistrement de nos modifications, le message « Bonjour, utilisateur ! Il s’agit d’une simple application de réaction » dans le navigateur, car nous utilisons actuellement la langue anglaise.

Si nous devions changer la valeur de locale variable dans une langue différente comme French:

export default function App() {
  const locale = "fr";

  
}

On nous présenterait le même « Bonjour, utilisateur ! …” message mais en français.

Changer de langue

Nous souhaitons offrir à l’utilisateur final la possibilité de basculer entre différentes langues. Pour y parvenir, on peut envisager de stocker les locale dans notre <App /> l’état du composant.

import { useState } from "react";


export default function App() {
  const [locale, setLocale] = useState("en");

  
}

Nous pouvons ensuite ajouter des boutons à notre application qui permettent à l’utilisateur de basculer entre les langues anglaise, espagnole et française.

import { useState } from "react";


export default function App() {
  const [locale, setLocale] = useState("en");

  return (
    <IntlProvider locale={locale} messages={messages[locale]}>
      <FormattedMessage id="app.greeting" />
      <FormattedMessage id="app.description" />
      <div>
        <button onClick={() => setLocale("en")}>English</button>
        <button onClick={() => setLocale("es")}>Español</button>
        <button onClick={() => setLocale("fr")}>Français</button>
      </div>
    </IntlProvider>
  );
}

Lorsque nous cliquons sur un certain bouton, le locale l’état de notre application est mis à jour dans les paramètres régionaux sélectionnés, déclenchant un nouveau rendu du IntlProvider composant avec le nouveau locale valeur et données. Par conséquent, le texte de notre application géré par le react-intl mises à jour de la bibliothèque pour refléter la langue choisie.

Vous pouvez voir l’application en cours d’exécution dans ce qui suit Lien CodeSandbox.

L’utilisateur dispose désormais d’un moyen dynamique de basculer entre différentes langues sans avoir à actualiser la page entière !

Conclusion

Dans l’article d’aujourd’hui, nous avons montré un exemple simple d’introduction de l’internationalisation dans une application React. Il existe des fonctionnalités plus avancées à explorer dans réagir-intlnotamment la gestion des traductions de chaînes plus complexes, le formatage des nombres, le formatage de la date et de l’heure, ainsi que la gestion des pluriels et des genres, qui sont des aspects importants dans de nombreuses langues.

Créer une application en tenant compte dès le départ de l’internationalisation est généralement plus facile que d’essayer de la mettre à niveau ultérieurement. Ainsi, même si vous ne ciblez qu’une seule région linguistique au départ, cela vaut la peine d’y réfléchir dès le départ.

Vous cherchez à construire avec i18n intégré à vos composants ? Le Internationalisation paquet de Progress KendoRéagir applique les cultures souhaitées en fournissant des services et des tuyaux pour l’analyse et le formatage des dates et des nombres.