React:internationalization
Exemple: FR
Exemple: English
il existe plusieurs outils dans React qui permet de faire l'internationalization comme: React-intl , React-intl-universal ,React-i18next ,LinguiJS ...
Dans ce cours nous allons utiliser React-intl
1.Installer React-intl
2.Créer le fichier lang/langues.js : Contenant la liste des langues à gérer
export const LANGUES = {
ENGLISH: "en-US",
FRENCH: "fr-FR",
};
3.Créer le fichier lang/messages.js : Contenant les messages avec les deux langure fr et en
import { LANGUES } from "./langues";
export const messages = {
[LANGUES.ENGLISH]: {
/*welcome :c'est un id qui sera utilisé pour récuper la valeur hello ...*/
welcome: "Hello everyone welcome to React FixWins.com",
/*{n, number, ::currency/USD}
n:sera remplacé par la valeur du nombre données exemple 452
number :le type de n
::currency/USD :second type de n
*/
prix:"Currency example: {n, number, ::currency/USD}",
nombre:"Number Example : {n, number}",
date: "date example : {d, date}",
about: "About us",
contact: "Contact us",
G_produit: "Stock management",
G_Client: "Costumers",
G_Product: "Products",
U_Register: "Create account",
U_Connect: "Sign in",
U_Search: "Search",
U_Search_ok: "Go",
languages: "Languages",
},
[LANGUES.FRENCH]: {
welcome: "Bonjour tout le monde bienvenue à React FixWins.com",
prix:
"Exemple pour les prix : {n, number, ::currency/USD}",
nombre:
"Exemple pour les nombres : {n, number}",
date: "Exemples pour les dates : {d, date}",
about: "Qui nous sommes",
contact: "contactez nous",
G_produit: "Gestion des Ventes",
G_Client: "Les Clients",
G_Product: "Les Produits",
U_Register: "Créer un compte",
U_Connect: "Connexion",
U_Search: "Chercher",
U_Search_ok: "Valider",
languages: "Languages",
}
};
4.Créer la component nav.js contenant un menu de navigation
import React, { Component } from "react";
import { FormattedMessage } from "react-intl";
/*Importer la liste des languages */
import { LANGUES } from "../../lang/langues";
function Nav(props) {
// Languages
const languages = [
{ name: "English", code: LANGUES.ENGLISH },
{ name: "Français", code: LANGUES.FRENCH },
];
return(
<nav className="navbar navbar-expand-lg navbar-light bg-light">
<div className="container-fluid">
<div className="collapse navbar-collapse" id="tar">
<ul className="navbar-nav me-auto mb-2 mb-lg-0">
<li className="nav-item">
<a className="nav-link active" aria-current="page" href="#">
<FormattedMessage id="G_produit" />
</a>
</li>
<li className="nav-item">
<a className="nav-link" href="#">
{/*Récuperla valeur du id selon la langue choisie*/}
<FormattedMessage id="G_Client" />
</a>
</li>
<li className="nav-item">
<a className="nav-link " href="#">
<FormattedMessage id="G_Product" />
</a>
</li>
<li className="nav-item">
<a className="nav-link " href="#">
<FormattedMessage id="about" />
</a>
</li>
<li className="nav-item">
<a className="nav-link " href="#">
<FormattedMessage id="contact" />
</a>
</li>
</ul>
<form className="d-flex">
{/*On peut pas appler directement <FormattedMessage id="U_Search" />
dans placeholder donc on doit faire :
*/}
<FormattedMessage id="U_Search" defaultMessage="search">
{
v=>
<input className="form-control me-2" type="search" placeholder={v} />
}
</FormattedMessage>
<button className="btn btn-outline-success" type="submit"><FormattedMessage id="U_Search_ok" /></button>
</form>
<ul className="navbar-nav">
<li className="nav-item">
<a className="nav-link" href="#">
<FormattedMessage id="U_Register" />
</a>
</li>
<li className="nav-item">
<a className="nav-link" href="#">
<FormattedMessage id="U_Connect" />
</a>
</li>
<li className="nav-item">
{/*Afficher la liste des langues pour modifier la langue*/}
<select className="nav-link" onChange={props.ChangerMaLangue} value={props.maLangue}>
{languages.map(({ name, code }) => (
<option key={code} value={code}>
{name}
</option>
))}
</select>
</li>
</ul>
</div>
</div>
</nav>
);
}
export default Nav;
4.Modifier le fichier App.js
import React,{useState} from "react";
/*importer les styles boostrap*/
import 'bootstrap/dist/css/bootstrap.min.css';
import Nav from './components/nav/nav.js';
import { IntlProvider,FormattedMessage } from "react-intl";
import { LANGUES } from "./lang/langues";
import { messages } from "./lang/messages";
function App() {
/*sauvegarder la langue locale de l'utilisateur dans une variable de state : curr*/
const [maLangue, setMaLangue] = useState(getMaLangue());
/*si l'utilisateur veut changer sa langue */
const ChangerMaLangue = (e) => {
setMaLangue(e.target.value);
/*Sauvegarder la langueChoisi dans le localStorage*/
localStorage.setItem("langueChoisi", e.target.value);
};
/*Extraire ma langue from localStorage s'elle existe
Sinon retouner ENGLISH*/
function getMaLangue() {
const saved = localStorage.getItem("langueChoisi");
return saved || LANGUES.ENGLISH;
}
return (
<IntlProvider
messages={messages[maLangue]}
locale={maLangue}
defaultLocale={LANGUES.ENGLISH}
>
<div>
{/*IntlProvider :est le gestionnaire de l'internationalization du module react-intl
messages[maLangue]:envoyer les messages du fichier lang/messsage.json selon la langue choisie
locale={maLangue}:la langue choisie
defaultLocale:si l'utilisateur n'a pas choisi une langue so English c'est par défaut
on peut la changer vers n'importe quelle langue qui se trouve dans local
*/}
{/*maLangue={maLangue} :envoyer à la components Nav la langue choisi via le props
ChangerMaLangue={ChangerMaLangue} :envoyer à la components Nav la fonction ChangerMaLangue via le props
*/}
<Nav maLangue={maLangue} ChangerMaLangue={ChangerMaLangue} />
{/*Exemples des données formatted ,date,nombre,prix*/}
<div className="card text-center">
<div className="card-header">
<FormattedMessage id="welcome" />
</div>
<div className="card-body">
<div className="card-text">
<p>
<FormattedMessage id="prix" values={{ n: 7874.464 }} />
</p>
<p>
<FormattedMessage id="nombre" values={{ n: 4754.12 }} />
</p>
<p>
<FormattedMessage id="date" values={{ d: new Date() }} />
</p>
</div>
</div>
<div className="card-footer text-muted">
<FormattedMessage id="G_produit" />
</div>
</div>
</div>
</IntlProvider>
);
}
export default App;
