Kako koristiti React Intl za internacionalizaciju vaših React aplikacija

React Intl je popularna biblioteka koja pruža skup komponenti i uslužnih programa za internacionalizaciju React aplikacija. Internacionalizacija, također poznata kao i18n, proces je prilagodbe aplikacije različitim jezicima i kulturama.

S ReactIntl-om možete jednostavno podržati više jezika i lokaliteta u svojoj React aplikaciji.

Instalacija React Intl

Da biste koristili biblioteku React Intl, prvo je morate instalirati. To možete učiniti s više od jednog upravitelja paketa: npm, pređa ili pnpm.

Da biste ga instalirali pomoću npm-a, pokrenite ovu naredbu na svom terminalu:

npm instaliraj react-intl

Da biste ga instalirali pomoću pređe, pokrenite ovu naredbu:

pređa dodati react-intl

Kako koristiti biblioteku React Intl

Nakon što instalirate biblioteku React Intl, možete koristiti njene komponente i značajke u svojoj aplikaciji. React Intl ima slične funkcije kao i JavaScript Intl API.

Neke vrijedne komponente koje nudi React Intl biblioteka uključuju FormattedMessage i IntlProvider komponente.

Komponenta FormattedMessage prikazuje prevedene nizove u vašoj aplikaciji, dok komponenta IntlProvider vašoj aplikaciji daje informacije o prijevodima i formatiranju.

Morate izraditi datoteku za prijevod prije nego što počnete koristiti komponente FormattedMessage i IntlProvider za prijevod vaše aplikacije. Prijevodna datoteka sadrži sve prijevode za vašu aplikaciju. Možete stvoriti zasebne datoteke za svaki jezik i lokalizaciju ili koristiti jednu datoteku koja sadrži sve prijevode.

Na primjer:

izvozkonst poruke na francuskom = {
 pozdrav: "Bonjour {name}"
}

izvozkonst poruke na talijanskom = {
 pozdrav: "Buongiorno {name}"
}

Ovaj primjer datoteke prijevoda sadrži dva objekta prijevoda: poruke na francuskom i poruke na talijanskom. Možete zamijeniti rezervirano mjesto {Ime} u pozdrav niz u vremenu izvođenja s dinamičkom vrijednošću.

Da biste koristili prijevode u svojoj aplikaciji, morate omotati korijensku komponentu svoje aplikacije s IntlProvider komponenta. Komponenta IntlProvider traje tri React rekviziti: lokalitet, defaultLocale, i poruke.

Podrška lokalizacije prihvaća niz koji navodi korisničku lokalizaciju, dok defaultLocale navodi zamjenu ako korisnikova željena lokalizacija nije dostupna. Na kraju, messages prop prihvaća objekt prijevoda.

Evo primjera koji pokazuje kako možete koristiti IntlProvider:

uvoz Reagirati iz"reagirati";
uvoz ReactDOM iz"react-dom/klijent";
uvoz aplikacija iz"./Aplikacija";
uvoz {IntlProvider} iz"reagiraj-intl";
uvoz { messagesInFrench } iz"./prijevod";
ReactDOM.createRoot(dokument.getElementById("korijen")).render(

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

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

Ovaj primjer prolazi fr mjesto, the poruke na francuskom prijevod i zadani hr mjesto prema IntlProvider komponenta.

Možete proslijediti više od jednog lokaliteta ili objekta prijevoda, i IntlProvider automatski će otkriti jezik preglednika korisnika i koristiti odgovarajuće prijevode.

Za prikaz prevedenih nizova u vašoj aplikaciji upotrijebite FormattedMessage komponenta. The FormattedMessage komponenta uzima an iskaznica prop koji odgovara ID-u poruke u objektu messages.

Komponenta također uzima a defaultMessage i vrijednosti oslonac The defaultMessage prop specificira zamjensku poruku ako je prijevod nedostupan za trenutnu lokalizaciju, dok je vrijednosti prop pruža dinamičke vrijednosti za rezervirana mjesta u vašim prevedenim porukama.

Na primjer:

uvoz Reagirati iz"reagirati";
uvoz {FormattedMessage} iz"reagiraj-intl";
funkcijaaplikacija() {
povratak (




 id="pozdrav"
 zadana poruka="Dobro jutro {name}"
 vrijednosti={{ Ime: 'Ivan'}}
 />
 </p>
 </div>
 );
}
izvozzadano aplikacija;

U ovom bloku koda, iskaznica oslonac od FormattedMessage komponenta koristi pozdrav ključ od poruke na francuskom objekt, i vrijednosti oslonac zamjenjuje {Ime} rezervirano mjesto s vrijednošću "Ivan".

Formatiranje brojeva pomoću komponente FormattedNumber

React Intl također pruža Formatirani broj komponenta koju možete koristiti za formatiranje brojeva na temelju trenutne lokalne postavke. Komponenta prihvaća različite rekvizite za prilagodbu oblikovanja, kao što su stil, valuta te minimalne i maksimalne razlomke.

Evo nekoliko primjera:

uvoz Reagirati iz"reagirati";
uvoz { Formatirani broj } iz"reagiraj-intl";
funkcijaaplikacija() {
povratak (




 Decimal: <Formatirani brojvrijednost={123.456}stil="decimal" />
 </p>


 postotak: <Formatirani brojvrijednost={123.456}stil="postotak" />
 </p>
 </div>
 );
}
izvozzadano aplikacija;

Ovaj primjer koristi Formatirani broj komponenta koja prihvaća a vrijednost prop koji navodi broj koji želite oblikovati.

Koristiti stil prop, možete prilagoditi izgled formatiranog broja. Možete postaviti stil podupirati decimal, postotak, ili valuta.

Kada postavite stil potpora valuti, Formatirani broj komponenta formatira broj kao vrijednost valute koristeći kod naveden u valuta oslonac:

uvoz Reagirati iz"reagirati";
uvoz { Formatirani broj } iz"reagiraj-intl";
funkcijaaplikacija() {
povratak (




 Cijena: <Formatirani brojvrijednost={123.456}stil="valuta"valuta="USD" />
 </p>
 </div>
 );
}
izvozzadano aplikacija;

The Formatirani broj komponenta formatira broj u gornjem bloku koda pomoću valuta stil i USD Šifra valute.

Također možete formatirati brojeve s određenim brojem decimalnih mjesta pomoću minimumFractionDigits i maksimumFractionDigits rekviziti.

The minimumFractionDigits prop specificira minimalni broj razlomaka za prikaz. Nasuprot tome, maksimumFractionDigits prop specificira maksimalan broj razlomaka.

Ako broj ima manje razlomaka od navedenog minimumFractionDigits, React Intl će ga napuniti nulama. Ako broj ima više razlomaka od navedenog maksimumFractionDigits, knjižnica će zaokružiti broj.

Evo primjera koji pokazuje kako možete koristiti ove rekvizite:

uvoz Reagirati iz"reagirati";
uvoz { Formatirani broj } iz"reagiraj-intl";
funkcijaaplikacija() {
povratak (




 vrijednost={123.4567}
 minimumFractionDigits={2}
 maximumFractionDigits={3}
 />
 </p>
 </div>
 );
}
izvozzadano aplikacija;

Oblikovanje datuma pomoću komponente FormattedDate

Možete oblikovati datume na način koji je dosljedan i lak za čitanje koristeći React Intl. The Formatirani datum pruža jednostavan i učinkovit način oblikovanja datuma. Djeluje slično kao biblioteke datuma i vremena koje formatiraju datume, kao što je Moment.js.

Komponenta FormattedDate ima mnogo rekvizita, kao što je vrijednost, dan, mjesec, i godina. Prop vrijednosti prihvaća datum koji želite oblikovati, a ostali props konfiguriraju njegovo oblikovanje.

Na primjer:

uvoz Reagirati iz"reagirati";
uvoz {FormattedDate} iz"reagiraj-intl";
funkcijaaplikacija() {
konst danas = noviDatum();
povratak (




 Danasdatum je
 vrijednost={danas}
 dan="numerički"
 mjesec="dugo"
 godina="numerički"
 />
 </p>
 </div>
 );
}
izvozzadano aplikacija;

U ovom primjeru, vrijednost prop koristi trenutni datum. Također, korištenjem dan, mjesec, i godina props, odredite da želite da se godina, mjesec i dan prikazuju u dugom formatu.

Osim dana, mjeseca i godine, drugi rekviziti također oblikuju izgled datuma. Evo rekvizita i vrijednosti koje prihvaćaju:

• godina: "numerički", "dvoznamenkasti"
• mjesec: "numerički", "dvoznamenkasti", "uski", "kratki", "dugi"
• dan: "numerički", "dvoznamenkasti"
• sat: "numerički", "dvoznamenkasti"
• minuta: "numerički", "dvoznamenkasti"
• drugi: "numerički", "dvoznamenkasti"
• naziv vremenske zone: "kratko dugo"

Također možete koristiti Formatirani datum komponenta za formatiranje i vrijeme prikaza:

uvoz Reagirati iz"reagirati";
uvoz {FormattedDate} iz"reagiraj-intl";
funkcijaaplikacija() {
konst danas = noviDatum();
povratak (




 Vrijeme je
 vrijednost={danas}
 sat="numerički"
 minuta="numerički"
 drugi="numerički"
 />
 </p>
 </div>
 );
}
izvozzadano aplikacija;

Internacionalizirajte svoje React aplikacije za širu publiku

Naučili ste kako instalirati i postaviti React-Intl biblioteku u svojoj React aplikaciji. React-intl olakšava formatiranje brojeva, datuma i valuta vaše React aplikacije. Podatke možete formatirati na temelju korisnikove lokalne postavke pomoću komponenti FormattedMessage, FormattedNumber i FormattedDate.

Programeri Reacta često čine pogreške koje mogu dovesti do ozbiljnih posljedica. Na primjer, neispravno ažuriranje stanja. Važno je biti svjestan ovih uobičajenih pogrešaka i rano ih ispraviti kako biste izbjegli skupe probleme.