آموزش چند زبانه کردن اپلیکیشن در ری اکت [React.js]

با سلام خدمت کاربران گرامی آکادمی راهکاری نو. در این مقاله می خواهیم نحوه دو زبانه کردن اپلیکیشن های ری اکتی را به شما عزیزان آموزش دهیم.

انتخاب بهترین پکیج برای دو زبانه کردن:

دو کتابخانه معروف و پرطرفدار برای انجام اینکار در ری اکت وجود دارد:

• React-intl با بیش از 13 هزار ستاره در گیتهاب
• React-i18next با بیش از 7 هزار ستاره در گیتهاب

اگر معیار انتخاب را بر اساس آمار و تعداد دانلود و ستاره های دریافتی در گیتهاب در نظر بگیریم، پکیج react-intl برگزیده می شود اما در عمل، اغلب توسعه دهندگان فرانت اند، ترجیح می دهند از i18next استفاده کنند و محبوبیت بیشتری دارد.

می توان 3 مزیت i18next را در برابر intl به شرح زیر بیان کرد:

• سرعت انطباق پذیری بالاتر در برابر بروز رسانی نسخه ریکت (مانند هوک ها)
• API کارآمدتر و موثرتر
• امکان استفاده از i18next در اغلب فریم ورک ها و کتابخانه های جاوا اسکریپتی و غیر جاوا اسکریپتی

همانطور که در سایت مرجع i18next اعلام شده است، با یادگیری i18next می توان اپلیکیشن های تولید شده توسط angular یا vuejs را نیز چند زبانه کرد و محدود به ریکت نمی باشد. در تصویر زیر مشاهده می کنید که از i18next می توان در تکنولوژی های بسیاری استفاده کرد:

بنابراین به دلایلی که در بالا گفتیم قصد داریم نحوه دو زبانه کردن اپلیکیشن Reactjs را توسط کتابخانه React-i18next آموزش دهیم. پس همراه ما باشید…

نصب React-i18next و i18n:

قبل از اینکه بتوانیم یک اپلیکیشن ری اکتی را ترجمه کنیم و در واقع چند زبانه کنیم نیاز است پکیج های لازم را برای اینکار نصب کنیم. به این منظور دستور زیر را در ترمینال اجرا کنید:

npm install i18next react-i18next i18next-xhr-backend
#or
yarn add i18next react-i18next i18next-xhr-backend

از کتابخانه i18next بعنوان هسته اصلی ترجمه و چند زبانه کردن اپلیکیشن و از کتابخانه react-i18next برای پیاده سازی قابلیت چند زبانه کردن در اپلیکیشن Reactjs استفاده می کنیم.

آماده سازی پروژه برای پیاده سازی اپلیکیشن چند زبانه:

ایجاد فایل i18n.js

اکنون برای ادامه کار یک فایل بنام i18n.js در فولدر src پروژه خود تعریف کنید و کد زیر را در آن درج کنید:

import i18n from "i18next";
import { initReactI18next } from "react-i18next";


// Importing translation files

import translationEN from "./locales/en/translation.json";
import translationFA from "./locales/fa/translation.json";


//Creating object with the variables of imported translation files
const resources = {
  en: {
    translation: translationEN,
  },
  fa: {
    translation: translationFA,
  },
};

//i18N Initialization

i18n
  .use(initReactI18next)
  .init({
    resources,
    lng:"en", //default language
    keySeparator: false,
    interpolation: {
      escapeValue: false,
    },
  });

export default i18n;

در این مثال قصد داریم دو زبان فارسی و انگلیسی را برای اپلیکیشن خود تعریف کنیم.

تعریف فولدر locales:

حالا نوبت ایجاد فولدر locales می باشد. این فولدر را در پوشه src تعریف کنید. در این فولدر می خواهیم فایل های json مربوط به ترجمه ها را نگهداری کنیم. سپس دو فولدر بنام های en و fa در پوشه locales ایجاد کنید و درون هر کدام از این دو فولدر یک فایل بنام translation.json تعریف کنید.

حالا بعنوان مثال می خواهیم دو کلید-مقدار (key-value) را در این فایل های ترجمه تعریف کنیم. برای فایل مربوط به فارسی کد زیر را تعریف کنید:

{
  "name": "نام اپلیکیشن",
  "welcome": "خوش آمدید"
}

و برای فایل انگلیسی (یعنی مسیر src/locales/en/translation.json) مقدار زیر را درج کنید:

{
  "name": "Application Name",
  "welcome": "Welcome"
}

دقت کنید که فایل های translation.json در فایل i18n.js ایمپورت شده باشند. به همین ترتیب می توانید چندین فایل ترجمه را در اپلیکیشن خود تعریف کنید تا اپلیکیشن ریکتی شما از چند زبان پشتیبانی کند. مثلا آلمانی-فارسی-عربی-فرانسوی-انگلیسی و…

حالا نوبت آنست که فایل i18n را به پروژه ری اکت خود متصل کنیم. فقط کافیست در فایل index.js اصلی پروژه، فایل i18n.js را به شکل زیر ایمپورت کنیم:

استفاده از ترجمه ها در کامپوننت:

در مرحله بعدی باید از ترجمه ها در کامپوننت خود استفاده کنیم. راه های مختلفی برای انجام اینکار وجود دارد. Hook و HOC و render props

ما در این مقاله از روش هوک در ریکت استفاده می کنیم. زیرا کد ساده تری دارد.

بنابراین فایل app.js را باز کرده و هوک useTranslation را مطابق کد زیر در آن ایمپورت کنید:

import { useTranslation } from "react-i18next";

و کد زیر را در کامپوننت App تعریف کنید:

import './App.css';
import { useTranslation } from "react-i18next";
function App() {
  const { t, i18n } = useTranslation();
  return (
    <div className="App">
      {/* call name of the variable from the translation.json file to t() method */}
      <p>{t('name')}</p> 
    </div>
  );
}

export default App;

حال اگر پروژه را اجرا کنیم مشاهده می کنیم که معادل انگلیسی name در مرورگر نمایش پیدا می کند. یعنی Application Name

دلیل اینکه معادل انگلیسی name نمایش پیدا می کند اینست که زبان پیش فرض را در فایل i18n برابر en تعریف کرده بودیم. برای تغییر زبان پیش فرض اپلیکیشن فقط کافیست مقدار lng را به fa تغییر دهید. مانند کد زیر:

i18n
  .use(initReactI18next)
  .init({
    resources,
    lng:"fa", //default language
    keySeparator: false,
    interpolation: {
      escapeValue: false,
    },
  });

انتخاب زبان اپلیکیشن بصورت داینامیک:

در این مرحله می خواهیم یک لیست بازشو یا dropdown-list ایجاد کنیم که کاربر بتواند ار طریق آن زبان مورد نظر خود را در اپلیکیشن انتخاب کند. کد زیر را برای فایل app.js در نظر بگیرید:

import './App.css';
import { useTranslation } from "react-i18next";
function App() {
  //Calling t and i18n method from useTranslation hook 
  const { t, i18n } = useTranslation();

  //Creating a method to change the language onChnage from select box
  const changeLanguageHandler = (e) => {
    const languageValue = e.target.value
    i18n.changeLanguage(languageValue);
  }
  return (
    <div className="App">
      {/* Select box to change language */}
      <select className="custom-select" style={{width: 200}} onChange={changeLanguageHandler}>
        <option value="en" >English</option>
        <option value="fa" >فارسی</option>
      </select>
      {/* call name of the variable from  the translation.json file to t() method */}
      <h1>{t('name')}</h1> 
    </div>
  );
}

export default App;

به همین راحتی توانستیم یک اپلیکیشن React را دو زبانه کنیم. امیدوارم از این آموزش استفاده لازم را برده باشید و در صورتی که سوال یا پیشنهادی دارید از طریق فرم ارسال دیدگاه با ما در میان بگذارید.