چگونه از React Intl برای بین المللی کردن برنامه های React خود استفاده کنید

برای گسترده‌ترین مخاطب ممکن، برنامه شما باید به زبان‌های مختلفی ارتباط برقرار کند. دریابید که چگونه این کار را کمتر دلهره آور کنید.

React Intl یک کتابخانه محبوب است که مجموعه ای از مؤلفه ها و ابزارهای کمکی را برای بین المللی کردن برنامه های React ارائه می دهد. بین‌المللی‌سازی که با نام i18n نیز شناخته می‌شود، فرآیند انطباق یک برنامه کاربردی با زبان‌ها و فرهنگ‌های مختلف است.

با React Intl می توانید به راحتی از چندین زبان و زبان در برنامه React خود پشتیبانی کنید.

در حال نصب React Intl

برای استفاده از کتابخانه React Intl ابتدا باید آن را نصب کنید. می توانید این کار را با بیش از یک مدیر بسته انجام دهید: npm، yarn یا pnpm.

برای نصب آن با npm، این دستور را در ترمینال خود اجرا کنید:

npm install react-intl

برای نصب آن با استفاده از yarn، این دستور را اجرا کنید:

yarn add react-intl

نحوه استفاده از کتابخانه React Intl

هنگامی که کتابخانه React Intl را نصب کردید، می توانید از اجزا و ویژگی های آن در برنامه خود استفاده کنید. React Intl عملکردهای مشابه JavaScript Intl API دارد.

برخی از مؤلفه های ارزشمند ارائه شده توسط کتابخانه React Intl شامل مؤلفه های FormattedMessage و IntlProvider است.

مؤلفه FormattedMessage رشته های ترجمه شده را در برنامه شما نمایش می دهد، در حالی که مؤلفه IntlProvider اطلاعات ترجمه و قالب بندی را برای برنامه شما ارائه می دهد.

قبل از اینکه بتوانید از اجزای FormattedMessage و IntlProvider برای ترجمه برنامه خود استفاده کنید، باید یک فایل ترجمه ایجاد کنید. یک فایل ترجمه شامل تمام ترجمه های درخواست شما است. شما می توانید فایل های جداگانه ای برای هر زبان و منطقه ایجاد کنید یا از یک فایل واحد برای حاوی تمام ترجمه ها استفاده کنید.

مثلا:

export const messagesInFrench = {
    greeting: "Bonjour {name}"
}
  
export const messagesInItalian = {
    greeting: "Buongiorno {name}"
}

این فایل ترجمه نمونه شامل دو شیء ترجمه است: messagesInFrench و messagesInItalian. شما می توانید مکان نگهدار {name} را در رشته تبریک در زمان اجرا با یک مقدار پویا جایگزین کنید.

برای استفاده از ترجمه ها در برنامه خود، باید مولفه ریشه برنامه خود را با مولفه IntlProvider بپیچید. مؤلفه IntlProvider سه ویژگی React را می گیرد: locale، defaultLocale، و پیام ها.

پایه محلی رشته‌ای را می‌پذیرد که محلی کاربر را مشخص می‌کند، در حالی که Locale پیش‌فرض یک بازگشت را در صورتی که منطقه ترجیحی کاربر در دسترس نباشد، مشخص می‌کند. در نهایت، props messages یک شی ترجمه را می پذیرد.

در اینجا یک مثال نشان می دهد که چگونه می توانید از IntlProvider استفاده کنید:

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import { IntlProvider } from "react-intl";
import { messagesInFrench } from "./translation";

ReactDOM.createRoot(document.getElementById("root")).render(
  <React.StrictMode>
    <IntlProvider locale="fr" messages={messagesInFrench} defaultLocale="en">
      <App />
    </IntlProvider>
  </React.StrictMode>
);

این مثال، محلی fr، ترجمه messagesInFrench، و یک محلی پیش فرض en را به مؤلفه IntlProvider منتقل می کند.

شما می توانید بیش از یک محل یا شی ترجمه را ارسال کنید، و IntlProvider به طور خودکار زبان مرورگر کاربر را شناسایی کرده و از ترجمه های مناسب استفاده می کند.

برای نمایش رشته های ترجمه شده در برنامه خود، از مؤلفه FormattedMessage استفاده کنید. مؤلفه FormattedMessage یک شناسه مربوط به شناسه پیام در شیء پیام ها را می گیرد.

این کامپوننت همچنین یک پیام پیش‌فرض می‌گیرد و پایه‌های ارزش‌گذاری می‌کند. پیش‌فرض defaultMessage یک پیام بازگشتی را مشخص می‌کند در صورتی که ترجمه برای منطقه فعلی در دسترس نباشد، در حالی که prop values ​​مقادیر پویا را برای متغیرهایی در پیام‌های ترجمه شده شما ارائه می‌کند.

مثلا:

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

function App() {
  return (
    <div>
      <p>
        <FormattedMessage
          id="greeting"
          defaultMessage="Good morning {name}"
          values={{ name: 'John'}}
        />
      </p>
    </div>
  );
}

export default App;

در این بلوک کد، id prop مولفه FormattedMessage از کلید خوشامدگویی از شی messagesInFrench استفاده می‌کند، و props values ​​جای جای {name} را با مقدار “John” جایگزین می‌کند.

قالب بندی اعداد با مؤلفه FormattedNumber

React Intl همچنین مؤلفه FormattedNumber را ارائه می دهد که می توانید از آن برای قالب بندی اعداد بر اساس محلی فعلی استفاده کنید. این مؤلفه برای سفارشی‌سازی قالب‌بندی، ابزارهای مختلفی را می‌پذیرد، مانند سبک، واحد پول و ارقام کسری حداقل و حداکثر.

در اینجا چند نمونه آورده شده است:

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

function App() {
  return (
    <div>
      <p>
        Decimal: <FormattedNumber value={123.456} style="decimal" />
      </p>
      <p>
        Percent: <FormattedNumber value={123.456} style="percent" />
      </p>
    </div>
  );
}

export default App;

این مثال از مؤلفه FormattedNumber استفاده می‌کند که یک مقدار prop را می‌پذیرد که عددی را که می‌خواهید قالب‌بندی کنید را مشخص می‌کند.

با استفاده از استایل، می توانید ظاهر شماره فرمت شده را سفارشی کنید. می‌توانید پایه استایل را روی اعشار، درصد یا واحد پول تنظیم کنید.

وقتی سبک prop را روی ارز تنظیم می‌کنید، مؤلفه FormattedNumber با استفاده از کد مشخص‌شده در پایه ارز، عدد را به‌عنوان مقدار ارز قالب‌بندی می‌کند:

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

function App() {
  return (
    <div>
      <p>
        Price: <FormattedNumber value={123.456} style="currency" currency="USD" />
      </p>
    </div>
  );
}

export default App;

مؤلفه FormattedNumber شماره موجود در بلوک کد بالا را با استفاده از سبک ارز و کد ارز USD قالب‌بندی می‌کند.

همچنین می‌توانید اعداد را با تعداد مشخصی از رقم اعشار با استفاده از حداقل‌های FractionDigits و MaximumFractionDigits قالب‌بندی کنید.

پروپ minimalFractionDigits حداقل تعداد ارقام کسری را برای نمایش مشخص می کند. در مقابل، سرپ MaxFractionDigits حداکثر تعداد ارقام کسری را مشخص می کند.

اگر عددی دارای ارقام کسری کمتر از حداقل FractionDigits مشخص شده باشد، React Intl آن را با صفر پر می کند. اگر تعداد ارقام کسری بیشتر از حداکثرFractionDigits مشخص شده باشد، کتابخانه عدد را به سمت بالا گرد می کند.

در اینجا مثالی وجود دارد که نشان می دهد چگونه می توانید از این وسایل استفاده کنید:

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

function App() {
  return (
    <div>
      <p>
        <FormattedNumber
          value={123.4567}
          minimumFractionDigits={2}
          maximumFractionDigits={3}
        />
      </p>
    </div>
  );
}

export default App;

قالب بندی تاریخ ها با مؤلفه FormattedDate

با استفاده از React Intl می‌توانید تاریخ‌ها را به‌گونه‌ای قالب‌بندی کنید که سازگار و قابل خواندن باشد. مؤلفه FormattedDate یک راه ساده و مؤثر برای قالب بندی تاریخ ها ارائه می دهد. به طور مشابه با کتابخانه های تاریخ-زمان که تاریخ ها را قالب بندی می کنند، مانند Moment.js کار می کند.

کامپوننت FormattedDate موارد زیادی مانند مقدار، روز، ماه و سال را می گیرد. Value prop تاریخی را می‌پذیرد که می‌خواهید قالب‌بندی کنید، و سایر props قالب‌بندی آن را پیکربندی می‌کنند.

مثلا:

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

function App() {
  const today = new Date();

  return (
    <div>
      <p>
        Today's date is
        <FormattedDate
          value={today}
          day="numeric"
          month="long"
          year="numeric"
        />
      </p>
    </div>
  );
}

export default App;

در این مثال، ارزش prop از تاریخ جاری استفاده می کند. همچنین با استفاده از لوازم روز، ماه و سال، مشخص می‌کنید که می‌خواهید سال، ماه و روز با فرمت طولانی نمایش داده شود.

در کنار روز، ماه و سال، سایر وسایل نیز ظاهر تاریخ را شکل می دهند. در اینجا موارد و ارزش هایی که آنها می پذیرند آمده است:

• سال: “عددی”، “2 رقمی”
• ماه: “عددی”، “دو رقمی”، “باریک”، “کوتاه”، “طولانی”
• روز: “عددی”، “2 رقمی”
• ساعت: “عددی”، “2 رقمی”
• دقیقه: “عددی”، “2 رقمی”
• دوم: “عددی”، “2 رقمی”
• timeZoneName: “کوتاه”، “طولانی”

همچنین می توانید از مؤلفه FormattedDate برای قالب بندی و نمایش زمان استفاده کنید:

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

function App() {
  const today = new Date();

  return (
    <div>
      <p>
        The time is
        <FormattedDate
          value={today}
          hour="numeric"
          minute="numeric"
          second="numeric"
        />
      </p>
    </div>
  );
}

export default App;

برنامه های React خود را برای مخاطبان گسترده تر بین المللی کنید

شما یاد گرفتید که چگونه کتابخانه React-Intl را در برنامه React خود نصب و راه اندازی کنید. React-intl فرمت اعداد، تاریخ ها و ارزهای برنامه React را آسان می کند. با استفاده از مؤلفه های FormattedMessage، FormattedNumber و FormattedDate می توانید داده ها را بر اساس منطقه کاربر قالب بندی کنید.

توسعه دهندگان React اغلب اشتباهاتی مرتکب می شوند که می تواند منجر به عواقب جدی شود. به عنوان مثال، عدم به روز رسانی وضعیت به درستی. مهم است که از این اشتباهات رایج آگاه باشید و آنها را زودتر اصلاح کنید تا از مشکلات پرهزینه جلوگیری کنید.

منبع مقاله