i18n ve react-i18next
- React kursu
- İleri seviye
- Ders 43/56
- 4 dk
useTranslation ile çok dilli arayüz yazmayı öğrenirsin.
i18n ve react-i18next
Uluslararasılaştırma (i18n), uygulamayı birden çok dile hazırlamaktır. React'te en yaygın kütüphane react-i18next'tir. useTranslation hook'u bir t fonksiyonu döndürür; t('merhaba') ile o anki dilde metni alırsın.
Dil dosyaları JSON biçiminde tutulur. i18n.changeLanguage('en') ile dil değiştirilir; bileşenler otomatik yeniden çizilir.
Tarih, sayı ve para için Intl API'sini kullanırsın; kendin biçim yazmazsın.
Çoğullar ve değişkenler
i18next çoğul biçimleri otomatik çözer: t('elma', { count: 3 }) çağrısı çoğul anahtarı döndürür. Değişken yerleştirme {{ name }} sözdizimiyle yapılır.
Bir anahtar eksikse geri dönüş dili kullanılır. Böylece yeni dil eklerken uygulama kırılmaz.
Tarihleri Intl.DateTimeFormat ile, para birimini Intl.NumberFormat ile yerelleştirirsin.
Uygulama Greeting bileşenini yaz
Greeting bileşeni yaz. useTranslation ile t al, <h1>{t('merhaba', { name: 'Ayşe' })}</h1> döndür. Dışa aktar.
Başlangıç kodu
import { useTranslation } from 'react-i18next';
// Greeting bileşenini buraya yazÖrnek çözüm
import { useTranslation } from 'react-i18next';
function Greeting() {
const { t } = useTranslation();
return <h1>{t('merhaba', { name: 'Ayşe' })}</h1>;
}
export default Greeting;Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 i18n kavramlarını eşleştir
| Kavram | Anlamı |
|---|---|
useTranslation |
t fonksiyonu verir |
changeLanguage |
Dili değiştirir |
Intl |
Tarih ve sayı biçimler |
fallback |
Eksik anahtarı karşılar |
2 i18next'te eksik bir anahtar ne yapar?
- Uygulama çöker
- Boş dize döndürür ve uyarı vermez
- Geri dönüş dilindeki karşılığını döndürür Doğru cevap
- Anahtarı dosyaya otomatik ekler
Açıklama: Geri dönüş dili kullanılır.
3 Boşluğu doldur: sayıyı para olarak biçimle
const fiyat = new Intl.NumberFormat('tr', { style: '____', currency: 'TRY' }).format(120);
const fiyat = new Intl.NumberFormat('tr', { style: 'currency', currency: 'TRY' }).format(120);
Açıklama: style: 'currency' para birimi için.