React Intl reprezintă o resursă esențială, o bibliotecă extinsă, ce pune la dispoziție o gamă largă de elemente și mecanisme utile pentru a facilita adaptarea aplicațiilor React la contexte lingvistice și culturale variate. Acest proces, cunoscut și sub denumirea de i18n, permite ca o aplicație să fie accesibilă și relevantă pentru utilizatori din diverse colțuri ale lumii.
Cu ReactIntl, integrarea suportului pentru multiple limbi și regiuni în aplicația ta React devine un demers simplu și eficient.
Instalarea React Intl
Pentru a putea utiliza funcționalitățile bibliotecii React Intl, primul pas este instalarea acesteia. Acest lucru se poate realiza cu ajutorul diferitelor instrumente de gestionare a pachetelor, cum ar fi npm, yarn sau pnpm.
Pentru instalarea folosind npm, execută următoarea comandă în terminalul tău:
npm install react-intl
Pentru a instala folosind yarn, execută această comandă:
yarn add react-intl
Utilizarea Bibliotecii React Intl
Odată ce biblioteca React Intl este instalată, poți începe să integrezi componentele și caracteristicile sale în aplicația ta. React Intl oferă funcționalități similare cu cele ale API-ului JavaScript Intl.
Printre componentele valoroase oferite de React Intl se numără `FormattedMessage` și `IntlProvider`.
Componenta `FormattedMessage` este folosită pentru a afișa șiruri de text traduse în cadrul aplicației, în timp ce `IntlProvider` asigură informații legate de traduceri și formatări.
Înainte de a începe să utilizezi componentele `FormattedMessage` și `IntlProvider`, este necesar să creezi un fișier cu traduceri. Acest fișier va conține toate traducerile pentru aplicația ta. Poți opta pentru crearea unui fișier separat pentru fiecare limbă și regiune sau poți centraliza toate traducerile într-un singur fișier.
De exemplu:
export const messagesInFrench = {
greeting: "Bonjour {name}"
}
export const messagesInItalian = {
greeting: "Buongiorno {name}"
}
Acest exemplu ilustrează un fișier de traduceri cu două obiecte: `messagesInFrench` și `messagesInItalian`. Substituentul `{name}` din șirul de salut poate fi înlocuit în timpul execuției cu o valoare dinamică.
Pentru a activa utilizarea traducerilor în aplicație, este necesar să înconjoară componenta rădăcină a aplicației cu componenta `IntlProvider`. Componenta `IntlProvider` primește trei atribute principale: `locale`, `defaultLocale` și `messages`.
Atributul `locale` acceptă un șir care indică limba și regiunea utilizatorului, în timp ce `defaultLocale` specifică o limbă și regiune de rezervă în cazul în care limba preferată a utilizatorului nu este disponibilă. În final, atributul `messages` acceptă un obiect cu traduceri.
Un exemplu de utilizare a componentei `IntlProvider`:
import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import { IntlProvider } from "react-intl";
import { messagesInFrench } from "./translation";
ReactDOM.createRoot(document.getElementById("root")).render(
<React.StrictMode>
<IntlProvider locale="fr" messages={messagesInFrench} defaultLocale="en">
<App />
</IntlProvider>
</React.StrictMode>
);
În acest exemplu, componenta `IntlProvider` primește atributele `locale=”fr”`, `messages={messagesInFrench}` și `defaultLocale=”en”`.
Se pot transmite mai multe obiecte de limbă și traduceri, iar `IntlProvider` va detecta automat limba browserului utilizatorului, folosind traducerile corespunzătoare.
Pentru a afișa șiruri traduse în aplicație, se utilizează componenta `FormattedMessage`. Aceasta primește un atribut `id` care corespunde unui identificator de mesaj din obiectul `messages`.
Componenta `FormattedMessage` acceptă și atributele `defaultMessage` și `values`. `defaultMessage` definește un mesaj alternativ în cazul în care o traducere nu este disponibilă pentru limba curentă, iar `values` oferă valori dinamice pentru înlocuitorii din mesajele traduse.
Exemplu de utilizare a `FormattedMessage`:
import React from "react";
import { FormattedMessage } from "react-intl";
function App() {
return (
<div>
<p>
<FormattedMessage
id="greeting"
defaultMessage="Good morning {name}"
values={{ name: 'John'}}
/>
</p>
</div>
);
}
export default App;
În acest exemplu, atributul `id` al componentei `FormattedMessage` folosește cheia `greeting` din obiectul `messagesInFrench`, iar atributul `values` înlocuiește înlocuitorul `{name}` cu valoarea „John”.
Formatarea numerelor cu Componenta FormattedNumber
React Intl oferă și componenta `FormattedNumber`, utilă pentru formatarea numerelor în conformitate cu limba și regiunea curentă. Componenta permite personalizarea formatării prin diverse atribute, cum ar fi `style`, `currency`, `minimumFractionDigits` și `maximumFractionDigits`.
Iată câteva exemple:
import React from "react";
import { FormattedNumber } from "react-intl";
function App() {
return (
<div>
<p>
Decimal: <FormattedNumber value={123.456} style="decimal" />
</p>
<p>
Percent: <FormattedNumber value={123.456} style="percent" />
</p>
</div>
);
}
export default App;
Acest exemplu utilizează componenta `FormattedNumber` cu un atribut `value` ce specifică numărul de formatat.
Prin intermediul atributului `style`, se poate personaliza aspectul numărului formatat. Valorile acceptate sunt `decimal`, `percent` sau `currency`.
Când `style` este setat la `currency`, componenta FormattedNumber va formata numărul ca o valoare monetară folosind codul valutei specificat în atributul `currency`:
import React from "react";
import { FormattedNumber } from "react-intl";
function App() {
return (
<div>
<p>
Price: <FormattedNumber value={123.456} style="currency" currency="USD" />
</p>
</div>
);
}
export default App;
În exemplul de mai sus, numărul este formatat folosind stilul monedei și codul valutar USD.
De asemenea, se pot formata numere cu un număr specific de zecimale folosind atributele `minimumFractionDigits` și `maximumFractionDigits`.
Atributul `minimumFractionDigits` indică numărul minim de zecimale care trebuie afișate, în timp ce atributul `maximumFractionDigits` specifică numărul maxim de zecimale. Dacă numărul are mai puține zecimale decât `minimumFractionDigits`, React Intl le va completa cu zerouri. Dacă numărul are mai multe zecimale decât `maximumFractionDigits`, biblioteca va rotunji numărul.
Exemplu de utilizare a atributelor `minimumFractionDigits` și `maximumFractionDigits`:
import React from "react";
import { FormattedNumber } from "react-intl";
function App() {
return (
<div>
<p>
<FormattedNumber
value={123.4567}
minimumFractionDigits={2}
maximumFractionDigits={3}
/>
</p>
</div>
);
}
export default App;
Formatarea Datelor cu Componenta FormattedDate
React Intl permite formatarea datelor într-un mod consistent și ușor de interpretat prin intermediul componentei `FormattedDate`. Aceasta oferă o metodă simplă și eficientă de formatare a datelor, fiind similară cu biblioteci de formatare a datelor și timpului, ca Moment.js.
Componenta `FormattedDate` are numeroase atribute, precum `value`, `day`, `month` și `year`. Atributul `value` primește data care trebuie formatată, iar celelalte atribute configurează formatarea acesteia.
Exemplu de utilizare:
import React from "react";
import { FormattedDate } from "react-intl";
function App() {
const today = new Date();
return (
<div>
<p>
Today's date is
<FormattedDate
value={today}
day="numeric"
month="long"
year="numeric"
/>
</p>
</div>
);
}
export default App;
În acest exemplu, atributul `value` folosește data curentă. Folosind atributele `day`, `month` și `year`, se specifică formatul lung pentru afișarea zilei, lunii și anului.
Pe lângă atributele `day`, `month` și `year`, alte atribute formatează aspectul datei. Acestea sunt:
- `year`: „numeric”, „2-digit”
- `month`: „numeric”, „2-digit”, „narrow”, „short”, „long”
- `day`: „numeric”, „2-digit”
- `hour`: „numeric”, „2-digit”
- `minute`: „numeric”, „2-digit”
- `second`: „numeric”, „2-digit”
- `timeZoneName`: „short”, „long”
Componenta `FormattedDate` poate fi utilizată și pentru formatarea și afișarea orei:
import React from "react";
import { FormattedDate } from "react-intl";
function App() {
const today = new Date();
return (
<div>
<p>
The time is
<FormattedDate
value={today}
hour="numeric"
minute="numeric"
second="numeric"
/>
</p>
</div>
);
}
export default App;
Internaționalizarea Aplicațiilor React pentru un Public Extins
Ai învățat cum să instalezi și să configurezi biblioteca React-Intl în aplicația ta React. React-intl facilitează formatarea numerelor, datelor și valutelor în aplicația ta React. Utilizând componentele `FormattedMessage`, `FormattedNumber` și `FormattedDate`, poți formata datele în funcție de limba și regiunea utilizatorului.
Dezvoltatorii React pot face greșeli care pot genera consecințe negative. De exemplu, actualizarea incorectă a stării. Este esențial să fii conștient de aceste erori și să le corectezi din timp pentru a evita potențiale probleme costisitoare.