React + react-intl : Le Guide Complet de Localisation [2026]

Réponse Rapide

Pour implémenter la localisation dans React avec react-intl, vous devez installer le paquet, envelopper votre application avec IntlProvider, et utiliser les composants comme <FormattedMessage />. react-intl fait partie de la suite FormatJS et est excellent pour le formatage standardisé des nombres, dates et chaînes.

---

Introduction

Construire une application globale avec React nécessite une stratégie solide pour la Localisation. Dans ce guide, nous verrons comment configurer react-intl depuis zéro.

Pourquoi react-intl ?

• Standards : Construit sur l'API native Intl du navigateur.
• Formatage : Excellent support pour les dates, devises et nombres.
• Histoire : Une des bibliothèques les plus anciennes et testées.

---

Étape 1 : Installation

TerminalCopy
npm install react-intl

Étape 2 : Configuration

Enveloppez votre application à la racine.

JavaScriptCopy
1import { IntlProvider } from 'react-intl';
2import messages_fr from "./locales/fr.json";
3import messages_en from "./locales/en.json";
4
5const messages = {
6  'fr': messages_fr,
7  'en': messages_en
8};
9
10const language = navigator.language.split(/[-_]/)[0];  // language without region code
11
12ReactDOM.render(
13  <IntlProvider locale={language} messages={messages[language]}>
14    <App />
15  </IntlProvider>,
16  document.getElementById('root')
17);

Étape 3 : Utilisation

JavaScriptCopy
1import { FormattedMessage } from 'react-intl';
2
3export default function HelloWorld() {
4  return (
5    <FormattedMessage
6      id="app.greeting"
7      defaultMessage="Hello, World!"
8      description="Welcome greeting on home page"
9    />
10  );
11}

---

Gestion des Traductions avec IntlPull

FormatJS (react-intl) encourage l'extraction des messages depuis le code. IntlPull s'intègre parfaitement à ce flux :

1. Extraire : Utilisez le CLI formatjs pour extraire les messages dans un JSON.
2. Traduire : Envoyez le JSON à IntlPull.
3. Synchroniser : Récupérez les traductions pour toutes vos langues.

TerminalCopy
npx @intlpullhq/cli push

---

Conclusion

react-intl est la norme pour les applications qui nécessitent une localisation précise des nombres et dates en plus du texte. Sa syntaxe déclarative s'intègre bien dans l'écosystème React.