Cara Menggunakan React Intl untuk Menginternasionalkan Aplikasi React Anda

React Intl adalah library populer yang menyediakan sekumpulan komponen dan utilitas untuk menginternasionalkan aplikasi React. Internasionalisasi, juga dikenal sebagai i18n, adalah proses mengadaptasi aplikasi ke berbagai bahasa dan budaya.

Anda dapat dengan mudah mendukung banyak bahasa dan lokal dalam aplikasi React Anda dengan ReactIntl.

Menginstal React Intl

Untuk menggunakan pustaka React Intl, Anda harus menginstalnya terlebih dahulu. Anda dapat melakukan ini dengan lebih dari satu manajer paket: npm, benang, atau pnpm.

Untuk menginstalnya dengan npm, jalankan perintah ini di terminal Anda:

npm instal reaksi-intl

Untuk menginstalnya menggunakan benang, jalankan perintah ini:

benang tambahkan react-intl

Cara Menggunakan React Intl Library

Setelah Anda menginstal pustaka React Intl, Anda dapat menggunakan komponen dan fiturnya di aplikasi Anda. React Intl memiliki fungsi yang mirip dengan JavaScript Intl API.

Beberapa komponen berharga yang ditawarkan oleh perpustakaan React Intl termasuk Pesan Terformat Dan IntlProvider komponen.

Komponen FormattedMessage menampilkan string yang diterjemahkan dalam aplikasi Anda, sedangkan komponen IntlProvider menyediakan terjemahan dan informasi pemformatan ke aplikasi Anda.

Anda harus membuat file terjemahan sebelum dapat mulai menggunakan komponen FormattedMessage dan IntlProvider untuk menerjemahkan aplikasi Anda. File terjemahan berisi semua terjemahan untuk aplikasi Anda. Anda dapat membuat file terpisah untuk setiap bahasa dan lokal atau menggunakan satu file untuk memuat semua terjemahan.

Misalnya:

eksporconst pesanDalam bahasa Prancis = {
 salam: "Bonjour {nama}"
}

eksporconst pesanDalamItalia = {
 salam: "Buongiorno {nama}"
}

File terjemahan contoh ini berisi dua objek terjemahan: pesanDalam bahasa Prancis Dan pesanDalam bahasa Italia. Anda dapat mengganti placeholder {nama} dalam salam string saat runtime dengan nilai dinamis.

Untuk menggunakan terjemahan dalam aplikasi Anda, Anda harus membungkus komponen root aplikasi Anda dengan IntlProvider komponen. Komponen IntlProvider membutuhkan tiga Bereaksi alat peraga: lokal, defaultLokal, Dan pesan.

Prop locale menerima string yang menentukan lokal pengguna, sedangkan defaultLocale menentukan fallback jika lokal pilihan pengguna tidak tersedia. Terakhir, penyangga pesan menerima objek terjemahan.

Berikut adalah contoh yang menunjukkan bagaimana Anda dapat menggunakan IntlProvider:

impor Reaksi dari"reaksi";
impor ReactDOM dari"reaksi-dom/klien";
impor Aplikasi dari"./Aplikasi";
impor { IntlProvider } dari"bereaksi-intl";
impor { pesanDalam Bahasa Prancis } dari"./terjemahan";
ReactDOM.createRoot(dokumen.getElementById("akar")).memberikan(

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

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

Contoh ini melewati fr lokal, yang pesanDalam bahasa Prancis terjemahan, dan default en lokal ke IntlProvider komponen.

Anda dapat melewati lebih dari satu lokal atau objek terjemahan, dan IntlProvider akan secara otomatis mendeteksi bahasa browser pengguna dan menggunakan terjemahan yang sesuai.

Untuk menampilkan string yang diterjemahkan dalam aplikasi Anda, gunakan Pesan Terformat komponen. Itu Pesan Terformat komponen mengambil an pengenal prop yang sesuai dengan ID pesan di objek pesan.

Komponen juga mengambil a Pesan default Dan nilai-nilai menopang. Itu Pesan default prop menentukan pesan fallback jika terjemahan tidak tersedia untuk lokal saat ini, sedangkan nilai-nilai prop memberikan nilai dinamis untuk placeholder dalam pesan yang diterjemahkan.

Misalnya:

impor Reaksi dari"reaksi";
impor {Pesan Terformat} dari"bereaksi-intl";
fungsiAplikasi() {
kembali (




 id="salam"
 Pesan default="Selamat pagi {nama}"
 nilai={{ nama: 'Yohanes'}}
 />
 </p>
 </div>
 );
}
eksporbawaan Aplikasi;

Dalam blok kode ini, file pengenal penyangga dari Pesan Terformat komponen menggunakan salam kunci dari pesanDalam bahasa Prancis objek, dan nilai-nilai penyangga menggantikan {nama} placeholder dengan nilai "John".

Memformat Bilangan Dengan Komponen FormattedNumber

React Intl juga menyediakan Nomor Terformat komponen yang dapat Anda gunakan untuk memformat angka berdasarkan lokal saat ini. Komponen menerima berbagai alat peraga untuk menyesuaikan pemformatan, seperti gaya, mata uang, dan digit pecahan minimum dan maksimum.

Berikut beberapa contohnya:

impor Reaksi dari"reaksi";
impor {FormattedNumber} dari"bereaksi-intl";
fungsiAplikasi() {
kembali (




 Desimal: <Nomor Terformatnilai={123.456}gaya="desimal" />
 </p>


 Persen: <Nomor Terformatnilai={123.456}gaya="persen" />
 </p>
 </div>
 );
}
eksporbawaan Aplikasi;

Contoh ini menggunakan Nomor Terformat komponen yang menerima a nilai prop menentukan nomor yang ingin Anda format.

Menggunakan gaya prop, Anda dapat menyesuaikan tampilan nomor yang diformat. Anda dapat mengatur gaya penyangga untuk desimal, persen, atau mata uang.

Ketika Anda mengatur gaya prop untuk mata uang, the Nomor Terformat komponen memformat angka sebagai nilai mata uang menggunakan kode yang ditentukan dalam mata uang menopang:

impor Reaksi dari"reaksi";
impor {FormattedNumber} dari"bereaksi-intl";
fungsiAplikasi() {
kembali (




 Harga: <Nomor Terformatnilai={123.456}gaya="mata uang"mata uang="USD" />
 </p>
 </div>
 );
}
eksporbawaan Aplikasi;

Itu Nomor Terformat komponen memformat nomor dalam blok kode di atas menggunakan mata uang gaya dan USD Kode mata uang.

Anda juga dapat memformat angka dengan angka desimal tertentu menggunakan minimumFractionDigits Dan maximumFractionDigits Atribut.

Itu minimumFractionDigits prop menentukan jumlah minimum digit pecahan untuk ditampilkan. Sebaliknya, maximumFractionDigits prop menentukan jumlah maksimum digit pecahan.

Jika angka memiliki digit pecahan lebih sedikit dari yang ditentukan minimumFractionDigits, React Intl akan mengisinya dengan nol. Jika nomor tersebut memiliki digit pecahan lebih dari yang ditentukan maximumFractionDigits, perpustakaan akan membulatkan angka ke atas.

Berikut adalah contoh yang menunjukkan bagaimana Anda dapat menggunakan alat peraga ini:

impor Reaksi dari"reaksi";
impor {FormattedNumber} dari"bereaksi-intl";
fungsiAplikasi() {
kembali (




 nilai={123.4567}
 minimumFractionDigits={2}
 maximumFractionDigits={3}
 />
 </p>
 </div>
 );
}
eksporbawaan Aplikasi;

Memformat Tanggal Dengan Komponen FormattedDate

Anda dapat memformat tanggal dengan cara yang konsisten dan mudah dibaca menggunakan React Intl. Itu Tanggal Terformat komponen menyediakan cara sederhana dan efektif untuk memformat tanggal. Cara kerjanya mirip dengan perpustakaan tanggal-waktu yang memformat tanggal, seperti Moment.js.

Komponen FormattedDate mengambil banyak alat peraga, seperti nilai, hari, bulan, Dan tahun. Prop nilai menerima tanggal yang ingin Anda format, dan prop lainnya mengonfigurasi pemformatannya.

Misalnya:

impor Reaksi dari"reaksi";
impor { Tanggal Terformat } dari"bereaksi-intl";
fungsiAplikasi() {
const hari ini = baruTanggal();
kembali (




 Hari initanggalnya adalah
 nilai={hari ini}
 hari="numerik"
 bulan="panjang"
 tahun="numerik"
 />
 </p>
 </div>
 );
}
eksporbawaan Aplikasi;

Dalam contoh ini, nilai prop menggunakan tanggal saat ini. Juga, menggunakan hari, bulan, Dan tahun alat peraga, Anda menentukan bahwa Anda ingin tahun, bulan, dan hari ditampilkan dalam format panjang.

Selain hari, bulan, dan tahun, alat peraga lain juga memformat tampilan tanggal. Berikut adalah alat peraga dan nilai yang mereka terima:

• tahun: "numerik", "2 digit"
• bulan: "numerik", "2 digit", "sempit", "pendek", "panjang"
• hari: "numerik", "2 digit"
• jam: "numerik", "2 digit"
• menit: "numerik", "2 digit"
• Kedua: "numerik", "2 digit"
• timeZoneName: "pendek panjang"

Anda juga dapat menggunakan Tanggal Terformat komponen untuk memformat dan menampilkan waktu:

impor Reaksi dari"reaksi";
impor { Tanggal Terformat } dari"bereaksi-intl";
fungsiAplikasi() {
const hari ini = baruTanggal();
kembali (




 Waktunya
 nilai={hari ini}
 jam="numerik"
 menit="numerik"
 detik="numerik"
 />
 </p>
 </div>
 );
}
eksporbawaan Aplikasi;

Internasionalkan Aplikasi React Anda untuk Pemirsa yang Lebih Luas

Anda telah mempelajari cara menginstal dan menyiapkan pustaka React-Intl di aplikasi React Anda. React-intl mempermudah pemformatan angka, tanggal, dan mata uang aplikasi React Anda. Anda dapat memformat data berdasarkan lokal pengguna menggunakan komponen FormattedMessage, FormattedNumber, dan FormattedDate.

Pengembang reaksi sering membuat kesalahan yang dapat menyebabkan konsekuensi serius. Misalnya, gagal memperbarui status dengan benar. Penting untuk menyadari kesalahan umum ini dan memperbaikinya lebih awal untuk menghindari masalah yang merugikan.