Il existe plusieurs bibliothèques qui peuvent être utilisées pour créer une application multi-langues dans Reactjs. Voici comment vous pouvez le faire en utilisant `react-intl`.
1. Installez react-intl
Vous pouvez installer `react-intl` en utilisant npm ou yarn.
Avec npm :
```
npm install react-intl
```
Avec yarn :
```
yarn add react-intl
```
1. Importez les composants nécessaires dans votre application
Dans votre composant principal, importez les composants `IntlProvider` et `FormattedMessage` de ‘react-intl’.
```
import {IntlProvider, FormattedMessage} from ‘react-intl’;
```
1. Créez votre traduction
Créez un fichier pour chaque langue que vous voulez soutenir dans votre application. Chaque fichier contiendra un objet avec la traduction de chaque message que vous voulez traduire.
Par exemple, pour l’anglais et le français, vous pouvez avoir ces fichiers:
`fr.js`
```
export const messages = {
hello: ‘Bonjour‘
//…
}
```
`en.js`
```
export const messages = {
hello: ‘Hello‘
//…
}
```
1. Utilisez IntlProvider pour envoyer les messages à votre application
IntlProvider est un composant react-intl qui fournit des messages de traduction à votre application. Vous devez l’entourer autour de votre application et lui passer les messages appropriés.
```
import {messages as englishMessages} from ‘./en’;
import {messages as frenchMessages} from ‘./fr’;
const messages = {
en: englishMessages,
fr: frenchMessages
};
// Ensuite, utilisez-le dans votre application
```
1. Utilisez FormattedMessage pour traduire le texte
Vous pouvez maintenant utiliser le composant FormattedMessage pour traduire les textes de votre application. Par exemple :
```
```
Ce composant recherchera la clé “hello” dans les messages que vous avez fournis à IntlProvider et affichera la traduction appropriée.
1. Changer de langue
Pour changer de langue, vous devez simplement changer la valeur de la `locale` et des `messages` que vous passez à `IntlProvider`.
Ceci est un exemple simple de la façon de créer une application multi-langues dans React. Pour des applications plus complexes, vous pouvez également vouloir regarder dans l’utilisation de bibliothèques comme `redux` ou `mobx` pour gérer le changement de langue.
