React Uygulamalarınızı Uluslararası Hale Getirmek İçin React Intl Nasıl Kullanılır?

React Intl, React uygulamalarını uluslararası hale getirmek için bir dizi bileşen ve yardımcı program sağlayan popüler bir kitaplıktır. i18n olarak da bilinen uluslararasılaştırma, bir uygulamayı farklı dillere ve kültürlere uyarlama sürecidir.

ReactIntl ​​ile React uygulamanızda birden çok dili ve yerel ayarı kolayca destekleyebilirsiniz.

React Intl'i Kurmak

React Intl kütüphanesini kullanmak için öncelikle kurmanız gerekmektedir. şununla yapabilirsin birden fazla paket yöneticisi: npm, yarn veya npm.

npm ile kurmak için terminalinizde şu komutu çalıştırın:

npm tepki-intl yükleyin

İplik kullanarak kurmak için şu komutu çalıştırın:

yarn add tepki-inl

React Uluslararası Kitaplığı Nasıl Kullanılır?

React Intl kitaplığını kurduktan sonra, bileşenlerini ve özelliklerini uygulamanızda kullanabilirsiniz. React Intl, şuna benzer işlevlere sahiptir: JavaScript Uluslararası API'sı.

React Intl kitaplığı tarafından sunulan bazı değerli bileşenler şunları içerir: BiçimlendirilmişMesaj Ve Uluslararası Sağlayıcı bileşenler.

FormattedMessage bileşeni, uygulamanızda çevrilmiş dizeleri görüntülerken IntlProvider bileşeni, uygulamanıza çeviriler ve biçimlendirme bilgileri sağlar.

Uygulamanızı çevirmek için FormattedMessage ve IntlProvider bileşenlerini kullanmaya başlamadan önce bir çeviri dosyası oluşturmalısınız. Bir çeviri dosyası, uygulamanız için tüm çevirileri içerir. Her dil ve yerel ayar için ayrı dosyalar oluşturabilir veya tüm çevirileri içeren tek bir dosya kullanabilirsiniz.

Örneğin:

ihracatsabit mesajlarFransızca = {
 selamlama: "Bonjour {isim}"
}

ihracatsabit mesajlarİtalyanca = {
 selamlama: "Buongiorno {isim}"
}

Bu örnek çeviri dosyası iki çeviri nesnesi içerir: mesajlarFransızca Ve mesajlarİtalyanca. Yer tutucuyu değiştirebilirsiniz {isim} içinde selamlama dinamik bir değere sahip çalışma zamanında dize.

Çevirileri uygulamanızda kullanmak için uygulamanızın kök bileşenini Uluslararası Sağlayıcı bileşen. IntlProvider bileşeni üç tane alır Tepki sahne: yerel ayar, defaultLocale, Ve mesajlar.

locale prop, kullanıcının yerel ayarını belirten bir dizeyi kabul ederken, defaultLocale, kullanıcının tercih ettiği yerel ayar kullanılamıyorsa bir geri dönüş belirtir. Son olarak, message prop bir çeviri nesnesini kabul eder.

İşte IntlProvider'ı nasıl kullanabileceğinizi gösteren bir örnek:

içe aktarmak Tepki itibaren"tepki";
içe aktarmak ReactDOM itibaren"react-dom/client";
içe aktarmak Uygulama itibaren"./Uygulama";
içe aktarmak { Uluslararası Sağlayıcı } itibaren"tepki-intl";
içe aktarmak { mesajlarFransızca } itibaren"./tercüme";
ReactDOM.createRoot(belge.getElementById("kök")).render(

"Fr" mesajlar={messagesInFrench} defaultLocale="tr">

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

Bu örnek geçer Fr yerel ayar, mesajlarFransızca çeviri ve varsayılan tr yerel ayar Uluslararası Sağlayıcı bileşen.

Birden fazla yerel ayar veya çeviri nesnesi iletebilirsiniz ve Uluslararası Sağlayıcı kullanıcının tarayıcı dilini otomatik olarak algılar ve uygun çevirileri kullanır.

Çevrilmiş dizeleri uygulamanızda görüntülemek için şunu kullanın: BiçimlendirilmişMesaj bileşen. bu BiçimlendirilmişMesaj bileşen alır İD mesajlar nesnesindeki bir mesaj kimliğine karşılık gelen prop.

Bileşen ayrıca bir varsayılanMesaj Ve değerler pervane bu varsayılanMesaj prop, geçerli yerel ayar için bir çeviri yoksa bir geri dönüş mesajı belirtir. değerler prop, çevrilmiş mesajlarınızdaki yer tutucular için dinamik değerler sağlar.

Örneğin:

içe aktarmak Tepki itibaren"tepki";
içe aktarmak { BiçimlendirilmişMesaj } itibaren"tepki-intl";
işlevUygulama() {
geri dönmek (




 kimlik="selamlama"
 varsayılanMesaj="Günaydın {isim}"
 değerler={{ isim: 'John'}}
 />
 </p>
 </div>
 );
}
ihracatvarsayılan Uygulama;

Bu kod bloğunda, İD pervane BiçimlendirilmişMesaj bileşeni kullanır selamlama gelen anahtar mesajlarFransızca nesne ve değerler pervane yerini alır {isim} "John" değerine sahip yer tutucu.

FormattedNumber Bileşeniyle Sayıları Biçimlendirme

React Intl ayrıca biçimlendirilmiş sayı Geçerli yerel ayara göre sayıları biçimlendirmek için kullanabileceğiniz bileşen. Bileşen, biçimlendirmeyi özelleştirmek için stil, para birimi ve minimum ve maksimum kesir basamakları gibi çeşitli donanımları kabul eder.

İşte bazı örnekler:

içe aktarmak Tepki itibaren"tepki";
içe aktarmak { BiçimlendirilmişNumara } itibaren"tepki-intl";
işlevUygulama() {
geri dönmek (




 Ondalık: <biçimlendirilmiş sayıdeğer={123.456}stil="ondalık" />
 </p>


 Yüzde: <biçimlendirilmiş sayıdeğer={123.456}stil="yüzde" />
 </p>
 </div>
 );
}
ihracatvarsayılan Uygulama;

Bu örnek, biçimlendirilmiş sayı kabul eden bileşen değer biçimlendirmek istediğiniz sayıyı belirten prop.

Kullanmak stil prop, biçimlendirilmiş sayının görünümünü özelleştirebilirsiniz. ayarlayabilirsiniz stil desteklemek ondalık, yüzde, veya para birimi.

ayarladığınızda stil para birimine uygun, biçimlendirilmiş sayı bileşeninde belirtilen kodu kullanarak sayıyı bir para birimi değeri olarak biçimlendirir. para birimi destek:

içe aktarmak Tepki itibaren"tepki";
içe aktarmak { BiçimlendirilmişNumara } itibaren"tepki-intl";
işlevUygulama() {
geri dönmek (




 Fiyat: <biçimlendirilmiş sayıdeğer={123.456}stil="para birimi"para birimi="AMERİKAN DOLARI" />
 </p>
 </div>
 );
}
ihracatvarsayılan Uygulama;

bu biçimlendirilmiş sayı bileşenini kullanarak yukarıdaki kod bloğundaki sayıyı biçimlendirir. para birimi stil ve Amerikan Doları para birimi kodu.

Ayrıca, sayıları belirli sayıda ondalık basamakla biçimlendirebilirsiniz. minimumKesirSayıları Ve maksimumKesirSayıları sahne.

bu minimumKesirSayıları prop, görüntülenecek minimum kesir basamağı sayısını belirtir. Buna karşılık, maksimumKesirSayıları prop maksimum kesir basamağı sayısını belirtir.

Bir sayının belirtilenden daha az kesir basamağı varsa minimumKesirSayıları, React Intl onu sıfırlarla doldurur. Sayının belirtilenden daha fazla kesir basamağı varsa maksimumKesirSayıları, kitaplık sayıyı yukarı yuvarlar.

İşte bu donanımları nasıl kullanabileceğinizi gösteren bir örnek:

içe aktarmak Tepki itibaren"tepki";
içe aktarmak { BiçimlendirilmişNumara } itibaren"tepki-intl";
işlevUygulama() {
geri dönmek (




 değer={123.4567}
 minimumFractionDigits={2}
 maximumFractionDigits={3}
 />
 </p>
 </div>
 );
}
ihracatvarsayılan Uygulama;

FormattedDate Bileşeniyle Tarihleri ​​Biçimlendirme

React Intl kullanarak tarihleri ​​tutarlı ve okunması kolay bir şekilde biçimlendirebilirsiniz. bu BiçimlendirilmişTarih bileşeni, tarihleri ​​biçimlendirmek için basit ve etkili bir yol sağlar. Benzer şekilde çalışır Moment.js gibi tarihleri ​​biçimlendiren tarih-saat kitaplıkları.

FormattedDate bileşeni, aşağıdakiler gibi birçok özellik alır: değer, gün, ay, Ve yıl. Value prop, biçimlendirmek istediğiniz tarihi kabul eder ve diğer prop'lar biçimlendirmesini yapılandırır.

Örneğin:

içe aktarmak Tepki itibaren"tepki";
içe aktarmak { BiçimlendirilmişTarih } itibaren"tepki-intl";
işlevUygulama() {
sabit bugün = yeniTarih();
geri dönmek (




 Bugüntarihi
 değer={bugün}
 gün="sayısal"
 ay="uzun"
 yıl="sayısal"
 />
 </p>
 </div>
 );
}
ihracatvarsayılan Uygulama;

Bu örnekte, değer prop geçerli tarihi kullanır. Ayrıca, kullanarak gün, ay, Ve yıl props, yıl, ay ve günün uzun bir biçimde görüntülenmesini istediğinizi belirtirsiniz.

Gün, ay ve yılın yanı sıra diğer aksesuarlar da tarihin görünümünü biçimlendirir. İşte donanımlar ve kabul ettikleri değerler:

• yıl: "sayısal", "2 haneli"
• ay: "sayısal", "2 basamaklı", "dar", "kısa", "uzun"
• gün: "sayısal", "2 haneli"
• saat: "sayısal", "2 haneli"
• dakika: "sayısal", "2 haneli"
• ikinci: "sayısal", "2 haneli"
• saat DilimiAdı: "uzun kısa"

Şunu da kullanabilirsiniz: BiçimlendirilmişTarih biçimlendirmek ve zamanı görüntülemek için bileşen:

içe aktarmak Tepki itibaren"tepki";
içe aktarmak { BiçimlendirilmişTarih } itibaren"tepki-intl";
işlevUygulama() {
sabit bugün = yeniTarih();
geri dönmek (




 Saat
 değer={bugün}
 saat="sayısal"
 dakika="sayısal"
 ikinci="sayısal"
 />
 </p>
 </div>
 );
}
ihracatvarsayılan Uygulama;

React Uygulamalarınızı Daha Geniş Bir Kitle İçin Uluslararası Hale Getirin

React uygulamanızda React-Intl kütüphanesini nasıl kuracağınızı ve ayarlayacağınızı öğrendiniz. React-intl, React uygulamanızın sayılarını, tarihlerini ve para birimlerini biçimlendirmeyi kolaylaştırır. FormattedMessage, FormattedNumber ve FormattedDate bileşenlerini kullanarak verileri kullanıcının yerel ayarına göre biçimlendirebilirsiniz.

React geliştiricileri genellikle ciddi sonuçlara yol açabilecek hatalar yaparlar. Örneğin, durumu düzgün bir şekilde güncelleyememek. Bu yaygın hataların farkında olmak ve maliyetli sorunlardan kaçınmak için bunları erken düzeltmek önemlidir.