Skip to content
master
Switch branches/tags
Go to file
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
src
 
 
 
 
 
 
 
 
 
 
 
 

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

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

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

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.

Tekrar görüşmek dileğiyle.

About

React I18N Demo Project

Resources

Releases

No releases published

Packages

No packages published