Cum să utilizați React Intl pentru a vă internaționaliza aplicațiile React

React Intl este o bibliotecă populară care oferă un set de componente și utilități pentru internaționalizarea aplicațiilor React. Internaționalizarea, cunoscută și sub numele de i18n, este procesul de adaptare a unei aplicații la diferite limbi și culturi.

Puteți accepta cu ușurință mai multe limbi și localități în aplicația dvs. React cu ReactIntl.

Instalarea React Intl

Pentru a utiliza biblioteca React Intl, trebuie mai întâi să o instalați. Puteți face asta cu mai mult de un manager de pachete: npm, fire sau pnpm.

Pentru a-l instala cu npm, rulați această comandă în terminalul dvs.:

npm install react-intl

Pentru a-l instala folosind yarn, rulați această comandă:

yarn add react-intl

Cum să utilizați biblioteca React Intl

După ce ați instalat biblioteca React Intl, puteți utiliza componentele și caracteristicile acesteia în aplicația dvs. React Intl are funcții similare cu JavaScript Intl API.

Unele componente valoroase oferite de biblioteca React Intl includ FormattedMessage și IntlProvider componente.

Componenta FormattedMessage afișează șiruri traduse în aplicația dvs., în timp ce componenta IntlProvider oferă informații despre traduceri și formatare aplicației dvs.

Trebuie să creați un fișier de traducere înainte de a putea începe să utilizați componentele FormattedMessage și IntlProvider pentru a traduce aplicația dvs. Un fișier de traducere conține toate traducerile pentru aplicația dvs. Puteți crea fișiere separate pentru fiecare limbă și localitate sau puteți utiliza un singur fișier pentru a conține toate traducerile.

De exemplu:

exportconst mesaje în franceză = {
 Salut: „Bonjour {nume}”
}

exportconst mesaje în italiană = {
 Salut: „Buongiorno {nume}”
}

Acest exemplu de fișier de traducere conține două obiecte de traducere: mesaje în franceză și mesaje în italiană. Puteți înlocui substituentul {Nume} în Salut șir în timpul execuției cu o valoare dinamică.

Pentru a utiliza traducerile în aplicația dvs., trebuie să includeți componenta rădăcină a aplicației dvs. cu IntlProvider componentă. Componenta IntlProvider durează trei Reacții de recuzită: local, defaultLocale, și mesaje.

Localizarea acceptă un șir care specifică localitatea utilizatorului, în timp ce defaultLocale specifică o rezervă dacă localitatea preferată a utilizatorului nu este disponibilă. În cele din urmă, mesajele prop acceptă un obiect de traducere.

Iată un exemplu care arată cum puteți utiliza IntlProvider:

import Reacţiona din"reacţiona";
import ReactDOM din"react-dom/client";
import App din„./Aplicație”;
import { IntlProvider } din"react-intl";
import { mesaje în franceză } din"./traducere";
ReactDOM.createRoot(document.getElementById("rădăcină")).face(

"fr" messages={messagesInFrench} defaultLocale="ro">

 </IntlProvider>
 </React.StrictMode>
);

Acest exemplu trece de fr local, the mesaje în franceză traducere și implicit ro local la IntlProvider componentă.

Puteți trece mai mult de un obiect local sau de traducere și IntlProvider va detecta automat limba browserului utilizatorului și va folosi traducerile corespunzătoare.

Pentru a afișa șiruri traduse în aplicația dvs., utilizați FormattedMessage componentă. The FormattedMessage componenta ia o id prop corespunzătoare unui ID de mesaj din obiectul mesaje.

Componenta ia si a defaultMessage și valorile recuzită. The defaultMessage prop specifică un mesaj de rezervă dacă o traducere nu este disponibilă pentru localitatea curentă, în timp ce valorile prop furnizează valori dinamice pentru substituenții din mesajele dvs. traduse.

De exemplu:

import Reacţiona din"reacţiona";
import { FormattedMessage } din"react-intl";
funcţieApp() {
întoarcere (




 id="Salut"
 defaultMessage=„Bună dimineața {name}”
 valori={{ Nume: 'Ioan'}}
 />
 </p>
 </div>
 );
}
exportMod implicit Aplicație;

În acest bloc de cod, id prop de la FormattedMessage componenta foloseste Salut cheie de la mesaje în franceză obiect, iar valorile recuzita înlocuiește {Nume} substituent cu valoarea „Ioan”.

Formatarea numerelor cu componenta FormattedNumber

React Intl oferă, de asemenea, Număr formatat componentă pe care o puteți utiliza pentru a formata numere în funcție de localitatea curentă. Componenta acceptă diverse elemente de recuzită pentru a personaliza formatarea, cum ar fi stilul, moneda și cifrele minime și maxime ale fracțiunilor.

Aici sunt cateva exemple:

import Reacţiona din"reacţiona";
import { FormattedNumber } din"react-intl";
funcţieApp() {
întoarcere (




 Zecimal: <Număr formatatvaloare={123.456}stil="zecimal" />
 </p>


 La sută: <Număr formatatvaloare={123.456}stil="la sută" />
 </p>
 </div>
 );
}
exportMod implicit Aplicație;

Acest exemplu folosește Număr formatat componentă care acceptă a valoare prop specificând numărul pe care doriți să îl formatați.

Folosind stil prop, puteți personaliza aspectul numărului formatat. Puteți seta stil prop la zecimal, la sută, sau valută.

Când setați stil prop la valută, the Număr formatat componenta formatează numărul ca valoare monetară folosind codul specificat în valută recuzită:

import Reacţiona din"reacţiona";
import { FormattedNumber } din"react-intl";
funcţieApp() {
întoarcere (




 Preț: <Număr formatatvaloare={123.456}stil="valută"valută="USD" />
 </p>
 </div>
 );
}
exportMod implicit Aplicație;

The Număr formatat componenta formatează numărul din blocul de cod de mai sus utilizând valută stilul și USD codul valutar.

De asemenea, puteți formata numerele cu un anumit număr de zecimale folosind minimumFractionDigits și maximumFractionDigits recuzită.

The minimumFractionDigits prop specifică numărul minim de cifre ale fracțiunilor de afișat. În contrast, cel maximumFractionDigits prop specifică numărul maxim de cifre ale fracțiunilor.

Dacă un număr are mai puține cifre ale fracțiunii decât cele specificate minimumFractionDigits, React Intl îl va completa cu zerouri. Dacă numărul are mai multe cifre ale fracțiunii decât cele specificate maximumFractionDigits, biblioteca va rotunji numărul în sus.

Iată un exemplu care arată cum puteți folosi aceste elemente de recuzită:

import Reacţiona din"reacţiona";
import { FormattedNumber } din"react-intl";
funcţieApp() {
întoarcere (




 valoare={123.4567}
 minimumFractionDigits={2}
 maximumFractionDigits={3}
 />
 </p>
 </div>
 );
}
exportMod implicit Aplicație;

Formatarea datelor cu componenta FormattedDate

Puteți formata datele într-un mod consistent și ușor de citit folosind React Intl. The FormattedDate componenta oferă o modalitate simplă și eficientă de a formata datele. Funcționează similar cu biblioteci date-ora care formatează datele, cum ar fi Moment.js.

Componenta FormattedDate are multe elemente de recuzită, cum ar fi valoare, zi, lună, și an. Valoarea prop acceptă data pe care doriți să o formatați, iar celelalte elemente de recuzită configurează formatarea acesteia.

De exemplu:

import Reacţiona din"reacţiona";
import { FormattedDate } din"react-intl";
funcţieApp() {
const azi = nouData();
întoarcere (




 Astăzidata lui este
 valoare={azi}
 zi="numeric"
 luna="lung"
 an="numeric"
 />
 </p>
 </div>
 );
}
exportMod implicit Aplicație;

În acest exemplu, valoare prop folosește data curentă. De asemenea, folosind zi, lună, și an recuzită, specificați că doriți ca anul, luna și ziua să fie afișate într-un format lung.

Pe lângă zi, lună și an, alte elemente de recuzită formatează și aspectul datei. Iată recuzita și valorile pe care le acceptă:

• an: „numeric”, „2 cifre”
• lună: „numeric”, „2 cifre”, „îngust”, „scurt”, „lung”
• zi: „numeric”, „2 cifre”
• ora: „numeric”, „2 cifre”
• minut: „numeric”, „2 cifre”
• al doilea: „numeric”, „2 cifre”
• timeZoneName: "scurt lung"

De asemenea, puteți utiliza FormattedDate componentă pentru a formata și a afișa ora:

import Reacţiona din"reacţiona";
import { FormattedDate } din"react-intl";
funcţieApp() {
const azi = nouData();
întoarcere (




 Este ora
 valoare={azi}
 ora="numeric"
 minut="numeric"
 secunda="numeric"
 />
 </p>
 </div>
 );
}
exportMod implicit Aplicație;

Internaționalizați-vă aplicațiile React pentru un public mai larg

Ați învățat cum să instalați și să configurați biblioteca React-Intl în aplicația dvs. React. React-intl facilitează formatarea numerelor, datelor și valutelor aplicației dvs. React. Puteți formata datele în funcție de localitatea utilizatorului folosind componentele FormattedMessage, FormattedNumber și FormattedDate.

Dezvoltatorii React fac adesea greșeli care pot duce la consecințe grave. De exemplu, eșecul actualizării corecte a stării. Este important să fii conștient de aceste greșeli comune și să le corectezi din timp pentru a evita probleme costisitoare.