React I18N Demo Project
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
public
src
.firebaserc
.gitignore
README.adoc
firebase.json
package.json
yarn.lock

README.adoc

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.