Bilinmesi Gereken React Kütüphaneleri - React-intl

react-intl Nedir?

react-intl, React uygulamalarına kolayca uluslararasılaştırma ve yerelleştirme (l10n) eklemenizi sağlayan popüler bir kütüphanedir. Farklı dillerdeki metinleri, tarihler, sayılar ve para birimlerini formatlayarak kullanıcının seçtiği dilde sunmanıza olanak tanır.

FormattedMessage Nedir?

FormattedMessage, react-intl'in bir parçasıdır ve kullanıcının diline uygun metinleri göstermek için kullanılır. Bu bileşen, mesajları ID'ler ile tanımlayarak belirli bir çeviri dosyasındaki metni alır ve gösterir.

Kısa Kullanım Örneği:

• App.js içinde IntlProvider kullanarak uygulamanın dilini belirleyeceğiz.
• Dil dosyalarını en.json ve tr.json gibi ayrı dosyalara koyacağız.
• Bir child component'te (Greeting.js) FormattedMessage kullanarak çevirilerimizi uygulayacağız.

1. Çeviri Dosyalarının Oluşturulması

Öncelikle, farklı diller için çeviri dosyaları oluşturacağız. Bu dosyaları src/locales klasörüne koyabilirsiniz.

src/locales/en.json (İngilizce Çeviriler):

{
  "greeting": "Hello, {name}!",
  "welcome": "Welcome to our application!"
}

src/locales/tr.json (Türkçe Çeviriler):

{
  "greeting": "Merhaba, {name}!",
  "welcome": "Uygulamamıza hoş geldiniz!"
}

2. App.js İçinde IntlProvider Kullanımı

App.js dosyasında IntlProvider ile uygulamanın dilini ve çevirilerini sağlayacağız. Dil dosyalarını buraya import edeceğiz.

src/App.js:

import React, { useState } from "react";
import { IntlProvider } from "react-intl";
import Greeting from "./Greeting";

// Çeviri mesajları
import enMessages from "./locales/en.json";
import trMessages from "./locales/tr.json";

// Mesajlar sözlüğü
const messages = {
  en: enMessages,
  tr: trMessages,
};

function App() {
  const [locale, setLocale] = useState('en'); // Varsayılan dil: İngilizce

  return (
    <IntlProvider locale={locale} messages={messages[locale]}>
      <div className="App">
        {/* Dil değiştirme butonları */}
        <button onClick={() => setLocale('en')}>English</button>
        <button onClick={() => setLocale('tr')}>Türkçe</button>

        {/* Greeting bileşeni */}
        <Greeting name="Ali" />
      </div>
    </IntlProvider>
  );
}

export default App;

3. Child Component: Greeting.js

Greeting.js adında bir child component oluşturuyoruz ve bu component içinde FormattedMessage kullanarak mesajları dinamik olarak alacağız.

src/Greeting.js:

import React from "react";
import { FormattedMessage } from "react-intl";

function Greeting({ name }) {
  return (
    <div>
      {/* Formatlı mesaj: greeting */}
      <h1>
        <FormattedMessage id="greeting" values={{ name }} />
      </h1>
      {/* Formatlı mesaj: welcome */}
      <p>
        <FormattedMessage id="welcome" />
      </p>
    </div>
  );
}

export default Greeting;

4. Sonuç

• Uygulama başlangıçta İngilizce olarak açılacak.
• Kullanıcı, butonlara tıklayarak dili İngilizce (en) ve Türkçe (tr) olarak değiştirebilecek.
• FormattedMessage bileşeni kullanılarak, Greeting bileşeni içerisindeki metinler çeviri dosyalarından çekilecek.

Uygulama Çalıştırıldığında:

• Eğer dil İngilizce seçiliyse:

  Hello, Ali!
  Welcome to our application!
  

• Eğer dil Türkçe seçiliyse:

  Merhaba, Ali!
  Uygulamamıza hoş geldiniz!