• Anasayfa
  • Eğitimler
    • JavaScript Eğitimi
    • Angular 2 Eğitimi
    • React.js Eğitimi
    • Java 8 Eğitimi
    • Java EE 7 Eğitimi
    • Spring Framework Eğitimi
    • Git Eğitimi
  • Online Eğitimler
    • Online React.js Eğitimi
    • Online Angular 2 Eğitimi
    • Online Spring Boot Eğitimi
  • Referanslar
  • Hakkında
  • İletişim
KodEduKodEdu
  • Anasayfa
  • Eğitimler
    • JavaScript Eğitimi
    • Angular 2 Eğitimi
    • React.js Eğitimi
    • Java 8 Eğitimi
    • Java EE 7 Eğitimi
    • Spring Framework Eğitimi
    • Git Eğitimi
  • Online Eğitimler
    • Online React.js Eğitimi
    • Online Angular 2 Eğitimi
    • Online Spring Boot Eğitimi
  • Referanslar
  • Hakkında
  • İletişim

React.js ile Çok dilli uygulamalar geliştirmek

  • Posted by Rahman Usta
  • Categories Genel
  • Date 27 Mayıs 2017

React.js ile çoklu dil desteği (internationalization , i18n) olan uygulamalar geliştirmek için React Intl projesini kullanabiliriz. Yahoo tarafından geliştirilen React Intl‘i hem React.js web hem de React Native uygulamalarında kullanabililiriz.

React Intl kurulumu

React Intl kullanmaya başlamak için react-intl paketini yarn veya npm paket yöneticilerinden biriyle React.js projemize kurmalıyız.

yarn add react-intl
// veya
npm install react-intl --save

React Intl kullanımı

React Intl’i hem deklaratif yolla React.js bileşenleriyle veya imperatif olarak JS API ile uygulamalarımızda kullanabiliriz. Bu yazıda deklaratif yolla ilerleyeceğiz.

Mevcut uygulamanıza çoklu dil desteği getirmek için react-intl içindeki IntlProvider bileşenini kullanmalıyız. Örneğin React.js projemizin kök eleman yapısı React Intl öncesi gibi olsun diyelim. Kök elemanı </IntlProvider> ile sararak i18n için ilk adımı atmış oluruz. Bkz. React Intl sonrası

React Intl öncesi
(<div>
    <App/>
</div>)
React Intl sonrası
import {IntlProvider} from "react-intl";

(<IntlProvider locale={"tr"}>
    <div>
        <App/>
    </div>
</IntlProvider>)

IntlProvider locale adında bir props alanına sahiptir. String türünde dil kodunu atadığımızda, tüm alt elemanlarda ilgili dil erişilebilir olur.

React Intl ile tarih, saat, para birimi, tekillik/çoğulluk, sayılar vb. dil bazında biçimlendirebileceğimiz gibi, dillere göre çıktılanacak metinleri yönetebiliriz. Bu tür işler için React Intl paketi içinde FormattedDate, FormattedTime, FormattedNumber ve FormattedMessage gibi bileşenler kullanılmaktadır.

FormattedDate
Bir Date nesnesinden ilgili dile göre biçimlendirilmiş tarih çıktısı üretir.
Table 1. FormattedDate örneği
Kullanım Dil Çıktı

<FormattedDate value={new Date()}/>

tr

27.05.2017

en

5/27/2017

ja

2017/5/27

https://github.com/yahoo/react-intl/wiki/Components#formatteddate

FormattedTime
Bir Date nesnesinden ilgili dile göre biçimlendirilmiş saat çıktısı üretir.
Table 2. FormattedTime örneği
Kullanım Dil Çıktı

<FormattedTime value={new Date()}/>

tr

15:34

en

3:34 PM

ja

15:34

https://github.com/yahoo/react-intl/wiki/Components#formattedtime

FormattedNumber
Bir sayısal veriden para birimi, kayan noktalı sayıları ve sayısal oran biçimlendirmeleri yapabiliriz.
Table 3. FormattedNumber örneği
Kullanım Dil Çıktı
<FormattedNumber value={1000}
                   style="currency"
                     currency="TRY"/>

tr

₺1.000,00

en

TRY1,000.00

ja

TRY1,000.00

https://github.com/yahoo/react-intl/wiki/Components#formattednumber

FormattedMessage
Dillere göre ayrılmış mesaj tanımlamalarını yönetir.

Örneğin elimizde 3 farklı dil için oluşturulan bir mesaj nesnesi bulunsun.

let langConfig = {
    tr: {
        "app.hello": "Merhaba {name}"
    },
    en: {
        "app.hello": "Hello {name}"
    },
    ja: {
        "app.hello": "こんにちは {name}"
    }
};

Uygulamanızın dil desteğine göre benzer şekilde metinlerinizi hazırlayabilirsiniz. Metinler eşsiz idler ile temsil edilmelidir. Örneğin yukarıdaki app.hello dil bazında tanımlanmış bir id‘dir. id herhangi bir metin olabilir fakat sonrasında uygulama içinde referans vereceğimizi unutmayalım. O yüzden anlamlı bir ismi olması tavsiye edilir.

<IntlProvider
    locale={currentLocale} (1)
    messages={currentMessages}> (2)
        <div>
          ...

            <FormattedMessage
                id="app.hello" (3)
                values={{name: "Rahman"}}/> (4)
          ...
        </div>
</IntlProvider>
1 Aktif dil. Örn: tr
2 Aktif mesaj nesnesi. Örn: { "app.hello" : "こんにちは {name}" }
3 app.hello isimli mesaj yüklenir
4 {name} yer tutucu doldurulur.
Table 4. FormattedMessage çıktısı
Kullanım Dil Çıktı
<FormattedMessage
        id="app.hello"
        values={{name: "Rahman"}}/>

tr

Merhaba Rahman

en

Hello Rahman

ja

こんにちは Rahman

Buraya kadar anlatılanları bir React.js projesi olarak hazırladım ve sizlerle paylaşmak istiyorum.

Demo: https://react-i18n.firebaseapp.com/
Github: https://github.com/rahmanusta/react-i18n-demo

Tekrar görüşmek dileğiyle.

Tag:i18n, react-intl, react.js

  • Share:
author avatar
Rahman Usta
Kodedu.com bünyesinde eğitim ve danışmanlık faaliyetleri sürdüren Rahman Usta, 2012 yılında yayına çıkan popülerJava Mimarisiyle Kurumsal Çözümler ve 2014 yılında yayınlanan Java 8 Ebook kitaplarının yazarıdır. Açık kaynak dünyasına katkı veren yazar, geliştirdiği AsciidocFX projesiyle Duke's Choice Award 2015 ödülünü kazanmıştır. Rahman ayrıca, Istanbul JUG'un ve Java standartlarını geliştiren JCP (Java Community Process)'in bir üyesidir.

Previous post

Rapid Dashboard üzerinde Docker Remote API kullanımı
27 Mayıs 2017

Next post

Online React.js Eğitimi ardından (15-25 Mayıs 2017)
31 Mayıs 2017

You may also like

api-logo
Swagger Nedir? Neden kullanılır?
10 Ekim, 2018
spring-cli-logo
Spring CLI ile Spring Boot Projeleri Hazırlamak
21 Ağustos, 2017
eureka_architecture
Spring Cloud Netflix ve Eureka Service Discovery
3 Temmuz, 2017

Leave A Reply Cevabı iptal et

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Gözde yazılar

Knockout.js – Hesap Makinesi Örneği
02Şub2013
Handlebars Template Çözümü
06Şub2014
PlusClouds ile Röportaj
13Tem2012
Kritik Dosyalarınızı Git Reponuzdan Temizleyin
10Tem2014

Son Yazılar

  • Swagger Nedir? Neden kullanılır? 10 Ekim 2018
  • Spring CLI ile Spring Boot Projeleri Hazırlamak 21 Ağustos 2017
  • Spring Cloud Netflix ve Eureka Service Discovery 3 Temmuz 2017
  • Online React.js Eğitimi ardından (15-25 Mayıs 2017) 31 Mayıs 2017
  • React.js ile Çok dilli uygulamalar geliştirmek 27 Mayıs 2017

Son Yorumlar

  • Java 8 – Stream API için Muhammed
  • Java 8 – Stream API için Rahman Usta
  • YARN Paket Yöneticisi Nedir? Neden Kullanılır? için cengiz
  • Java 8 – Stream API için Ömer Faruk Genç
  • Java 8 – Stream API için Halil ibrahim küley

Get Java Software

Arşivler

Bizi takip edin

React.js Eğitimi Başlıyor
11-22 Eylül, 2017
Eğitmen
Rahman Usta
İletişim

merhaba@kodedu.com

  • Hakkında
  • Gizlilik Politikası
  • İletişim
  • Referanslar
Kodedu Bilişim Danışmanlık
Cemil Meriç mah. Çelebi sok.
No:16/3 Ümraniye/İSTANBUL
Tel: 0850 885 38 65
Alemdağ V.D.: 8960484815

KODEDU © Tüm hakları saklıdır.