React.js ve Çok dillilik

React.js ile çoklu dil desteği (internalization, i18n) olan uygulamalar geliştirmek için React Intl projesini kullanabiliriz. Yahoo tarafından geliştirilen React Intl projesini 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.