Ant Design ile React Uygulamalarında Localization Yapmak

Adı : Ant Design ile React Uygulamalarında Localization Yapmak

React ile geliştirilecek uygulamaların kullanıcı deneyimini artırmak ve dünya genelindeki kullanıcıları hedef almak için, uygulamanın çok dilli desteği olan bir yerelleştirme sistemine sahip olması gerekmektedir. Bu noktada, Ant Design birçok yerelleştirme konusunda destek sağlamaktadır. Bu yazıda, Ant Design ile React uygulamalarında nasıl çoklu dil desteği sağlanacağı ve hangi yerelleştirme prensiplerinin uygulanacağı açıklanacak.

Localizasyon için ön hazırlıklar
Ant Design, çoklu dil desteği sağlamak için iki önemli bileşen sağlar:
1.\tConfigProvider
2.\tdraft-react-intl

Uygulama çoklu dil desteğine sahip hale getirilmeden önce, Ant Design özelliklerinde yer alan and es6 dil destekleyici paketlerinin yüklü olduğundan emin olunmalıdır.

npm i antd es6-promise


1.\tConfigProvider
Localizasyon desteklenen bir uygulama için bileşenlerin yerelleştirilmesi gerekmektedir. Ant Design'in sağladığı ve yerelleştirilmiş bileşenler için en uygun yerelleştirme bileşeni ConfigProviderdır. ConfigProvider, yerel dil dosyalarına bağlanmasına ve diğer önemli ayarlarını kullanıcılara sunmasına olanak tanır.

ConfigProvider'u projemize dahil ederek, uygulama için varsayılan bir yerel bileşen ayarlama dosyası sağlayabiliriz. Çoğu durumda, bu dosya App.js veya index.js dosyası ile bağlantılıdır. Aşağıdaki örnek ConfigProvider bileşeni kullanımını göstermektedir;

```jsx
import { ConfigProvider } from 'antd';
import lokali18n from 'antd/lib/locale/xx_XX';
import HomeComponent from './HomeComponent';

ReactDOM.render(


,
document.getElementById('root'),
);
```

Yukarıdaki kodda ConfigProvider kullanarak HomeComponent bileşenine yerelleştirilmiş bileşen ayarı sağlanır. Bu örnekte bileşenler çoğunlukla İngilizce (en-US) olarak ayarlanmıştır. Ancak, ConfigProvider'un en önemli özelliklerinden biri, yerelleştirilmiş bir bileşen ayarı (dil) sağlamaktır. Yukarıdaki örnekte bileşenin ayarlaması 'xx_XX' olarak belirtilmiştir.

Ayrıca, lütfen hatırlayın, 'antd/lib' dosya yolunun, doğru urlyi sağlamaktan emin olmak için, tarayıcınıza göre diğer dosya yollarına ek olarak yüklenmesi gerekir.

Yukarıdaki kod ayrıca bir App bileşeni kullanmaz, ancak ConfigProvider API ise kaynaklarda bu bileşenin özellikleri hakkında daha fazla bilgi bulabilirsiniz.

2.\tdraft-react-intl
Ant Design, uygulamalar için yerelleştirilmiş mesajların stratejik kullanımını önermektedir. draft-react-intl, uygulama mesajlarının yerelleştirilmesi ve yönetimi için yaygın olarak kullanılan bir pakettir. Bu paket birçok farklı özellik sağlamaktadır. Aşağıdaki gibi;

•\tEkran çıktılarındaki mesajların yönetilmesi
•\tMesaj çevirme işlemleri için istatistik toplama ve raporlama
•\tDil seçimleri için panel oluşturma yapılandırma

Yukarıdaki özelliklere ilaveten, yaygın olarak kullanılan cümle ve kelimeleri yönetme hizmetleri de sağlar.

draft-react-intl paketini kullanarak uygulamanın mesajlarının bir dizine yerleştirilmesi gerekmektedir. Bu dizin bizim dil kodlarımızın olduğu bir dosya olacaktır.

/src

/locales
/en.json
/es.json


Yukarıdaki dizinde, mesajların dil olarak kaydedildiği 'locales' adında bir klasör oluşturulmuştur. Klasör içinde İngilizce ve İspanyolca için iki JSON dosyası yer alır. JSON dosyalarının içerisine yerelleştirilmiş mesajları sağlamalısınız. Bu json dosyaları uygulamanızın gereksinimlerine göre daha fazla dil dosyasını barındırmak için arttırılabilir.



Ant Design ve draft-react-intl paketleri ile aşağıdaki şekilde mesajları yerelleştirebilirsiniz.

```jsx
import { FormattedMessage, injectIntl } from 'react-intl';

class Input extends React.Component {
render() {
const { formatMessage } = this.props.intl;
return (
type={this.props.type}
placeholder={formatMessage({
id: 'app.components.Input.placeholder',
defaultMessage: 'Please input content',
})}
/>
);
}
}

export default injectIntl(Input);
```

İlk önce, react-intl paketindeki iki temel metod olan FormattedMessage ve injectIntl paketleri üzerinde çalışacağız. Bu paket, bileşenlerimize yerelleştirilmiş özel mesajlar sağlamak için kullanılır. Bunun ilk yapılması gereken yerelleştirilmiş mesajların bir JSON dosyasına yerleştirilmesidir. Bu dosyayı uygulamanın src klasörüne yerleştirmelisiniz.

Yukarıdaki örnekte bileşene bir ID değeri ve defaultmessage değişkeni gönderilir. Bu iki değişken, gerekli mesajı ve hatta alınırsa varsayılan fiyatlandırmayı sağlar.

Draft-react-intl, uygulama içinde çok yönlü dil seçimini sağlamak için bir çok seçenek sunar. Örneğin, uygulamada dil seçimindeki bir değişiklik, tüm açık uygulama çıktılarını otomatik olarak daha iyi bir kullanıcı dostu hale getirebilir. Bu nedenle, uygulamalarda dil tercihleri kullanıcıların kolayca değiştirebilmesi gerektiğinden, Ant Design'da bu özellik var.

Örneğin, aşağıdaki gibi bir Dil Seçici bileşeni yaygın kullanılan bir yöntemdir.

```jsx
import React, { Component } from 'react';
import { ConfigProvider, Select } from 'antd';
import enLocale from 'antd/lib/locale/en_US';
import viLocale from 'antd/lib/locale/vi_VN';

const { Option } = Select;

const locales = [
{
key: 'en_US',
label: 'English',
value: enLocale,