ترجمه پروژه React خود با i18N هرگز آسان‌تر نبوده است

Summarize this content to 400 words in Persian Lang
زمانی که افراد شروع به برنامه نویسی می کنند، معمولا متن ها و پیام های کد به زبان پرتغالی (pt-BR) نوشته می شود. ترجمه یا تطبیق پروژه به زبان های دیگر معمولاً یکی از آخرین اولویت ها است و اغلب پیچیده یا غیر ضروری تلقی می شود.

اما چرا این موضوع مرتبط است؟

بستگی به واقعیت شما دارد. در اینجا دلایلی وجود دارد که چرا باید این فرآیند را در نظر بگیرید:

– نیاز شرکت به:ممکن است شرکتی که در آن کار می کنید یا برخی از SaaS هایی که دارید در کشور دیگری شروع به فعالیت کنند و این نیاز را داشته باشند. محصولی که به زبان محلی ارتباط برقرار می کند شانس موفقیت بیشتری دارد.

– درخواست برای یک شغل بین المللی:اگر برای مشاغل بین المللی درخواست می دهید، داشتن یک نمونه کار با پروژه های بین المللی می تواند به شما یک تمایز بدهد. این نشان می دهد که شما آماده کار در یک محیط جهانی هستید و اهمیت خدمات رسانی به کاربران از فرهنگ های مختلف را درک می کنید.

– یادگیری هرگز زیاد نیست:فرآیند بین المللی شدن نه تنها یک کار فنی، بلکه یک تجربه یادگیری مهم است. این سلاح دیگری است که در زرادخانه مهارت ها و ابزارهای خود قرار می دهید.

این کار در گذشته چگونه انجام می شد؟

در روزهای اولیه وب، بین المللی سازی مورد غفلت قرار گرفت. وب سایت ها به یک زبان ساخته شدند و ترجمه ها به صورت بداهه اضافه شدند. در باطن، ترجمه‌ها اغلب به صورت سخت‌کد بودند و تعمیر و نگهداری را دشوار می‌کرد.

با جهانی شدن اینترنت، تقاضا برای نرم افزارهای چندزبانه افزایش یافته است و ابزارهای خاصی را برای i18n به ارمغان آورده است. راه‌حل‌هایی مانند GNU Gettext در بک‌اند پدیدار شدند و پس از آن کتابخانه‌هایی مانند i18next و react-intl برای فرانت‌اند قرار گرفتند که این فرآیند را پویاتر و کارآمدتر کرد.

i18next در مقابل react-intl: Qual Escolher؟

i18 بعدی: انعطاف پذیر و پرکاربرد است، ترجمه متن، کثرت زبان و بازگشت به عقب را با یکپارچه سازی آسان باطن ارائه می دهد.

جوانب مثبت: انعطاف پذیری، اکوسیستم وسیع، بازگشت خودکار.

برعکس: منحنی یادگیری اولیه.

واکنش بین المللی: بخشی از پروژه FormatJS، از استانداردهای بین المللی JavaScript API پیروی می کند و از سازگاری با مرورگرهای مدرن اطمینان می دهد.

جوانب مثبت: همراستا با استانداردهای ECMAScript، سادگی در یکپارچگی.

برعکس: انعطاف کمتر و با پشتیبانی کمتر از افزونه.

راهنمای سریع: بین المللی کردن یک برنامه React با i18next

نصب و راه اندازی:

npm install i18next react-i18next i18next-http-backend i18next-browser-languagedetector

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

تنظیمات: ایجاد یک i18n.js برای پیکربندی i18next.

import i18n from ‘i18next’;
import { initReactI18next } from ‘react-i18next’;
import Backend from ‘i18next-http-backend’;
import LanguageDetector from ‘i18next-browser-languagedetector’;

i18n
.use(Backend)
.use(LanguageDetector)
.use(initReactI18next)
.init({ fallbackLng: ‘en’, interpolation: { escapeValue: false } });

export default i18n;

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

ترجمه ها: ایجاد فایل های ترجمه در locales/en/translation.json ه locales/pt/translation.json.

{
“welcome”: “Welcome to our application!”,
“login”: “Login”
}

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

استفاده از ترجمه ها: از o hook استفاده کنید useTranslation بدون واکنش

import React from ‘react’;
import { useTranslation } from ‘react-i18next’;

function App() {
const { t } = useTranslation();

return (
div>
h1>{t(‘welcome’)}/h1>
button>{t(‘login’)}/button>
/div>
);
}

export default App;

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

تغییر زبان: به کاربران اجازه می دهد زبان را تغییر دهند.

import React from ‘react’;
import { useTranslation } from ‘react-i18next’;

function LanguageSwitcher() {
const { i18n } = useTranslation();

const changeLanguage = (lng) => i18n.changeLanguage(lng);

return (
div>
button onClick={() => changeLanguage(‘en’)}>English/button>
button onClick={() => changeLanguage(‘pt’)}>Português/button>
/div>
);
}

export default LanguageSwitcher;

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

نتیجه گیری

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

   npm install i18next react-i18next i18next-http-backend i18next-browser-languagedetector

   import i18n from 'i18next';
   import { initReactI18next } from 'react-i18next';
   import Backend from 'i18next-http-backend';
   import LanguageDetector from 'i18next-browser-languagedetector';

   i18n
     .use(Backend)
     .use(LanguageDetector)
     .use(initReactI18next)
     .init({ fallbackLng: 'en', interpolation: { escapeValue: false } });

   export default i18n;

   {
     "welcome": "Welcome to our application!",
     "login": "Login"
   }

   import React from 'react';
   import { useTranslation } from 'react-i18next';

   function App() {
     const { t } = useTranslation();

     return (
       div>
         h1>{t('welcome')}/h1>
         button>{t('login')}/button>
       /div>
     );
   }

   export default App;

   import React from 'react';
   import { useTranslation } from 'react-i18next';

   function LanguageSwitcher() {
     const { i18n } = useTranslation();

     const changeLanguage = (lng) => i18n.changeLanguage(lng);

     return (
       div>
         button onClick={() => changeLanguage('en')}>English/button>
         button onClick={() => changeLanguage('pt')}>Português/button>
       /div>
     );
   }

   export default LanguageSwitcher;