अपने रिएक्ट अनुप्रयोगों का अंतर्राष्ट्रीयकरण करने के लिए रिएक्ट इंटरनेशनल का उपयोग कैसे करें

React Intl एक लोकप्रिय लाइब्रेरी है जो React अनुप्रयोगों को अंतर्राष्ट्रीयकृत करने के लिए घटकों और उपयोगिताओं का एक सेट प्रदान करती है। अंतर्राष्ट्रीयकरण, जिसे i18n के रूप में भी जाना जाता है, एक एप्लिकेशन को विभिन्न भाषाओं और संस्कृतियों के अनुकूल बनाने की प्रक्रिया है।

आप ReactIntl ​​के साथ अपने रिएक्ट एप्लिकेशन में कई भाषाओं और स्थानों का आसानी से समर्थन कर सकते हैं।

रिएक्ट इंटरनेशनल स्थापित करना

React Intl लाइब्रेरी का उपयोग करने के लिए, आपको पहले इसे इंस्टॉल करना होगा। आप इसके साथ ऐसा कर सकते हैं एक से अधिक पैकेज प्रबंधक: एनपीएम, यार्न, या पीएनपीएम।

इसे npm के साथ स्थापित करने के लिए, इस कमांड को अपने टर्मिनल में चलाएँ:

एनपीएम इंस्टाल रिएक्ट-इंटल

यार्न का उपयोग करके इसे स्थापित करने के लिए, यह कमांड चलाएँ:

यार्न प्रतिक्रिया-इंटल जोड़ें

रिएक्ट इंटरनेशनल लाइब्रेरी का उपयोग कैसे करें

एक बार जब आप रिएक्ट इंटरनेशनल लाइब्रेरी स्थापित कर लेते हैं, तो आप अपने एप्लिकेशन में इसके घटकों और सुविधाओं का उपयोग कर सकते हैं। React Intl के समान कार्य हैं

जावास्क्रिप्ट अंतर्राष्ट्रीय एपीआई.

रिएक्ट इंटरनेशनल लाइब्रेरी द्वारा पेश किए गए कुछ मूल्यवान घटकों में शामिल हैं स्वरूपित संदेश और अंतर्राष्ट्रीय प्रदाता अवयव।

FormattedMessage घटक आपके एप्लिकेशन में अनुवादित स्ट्रिंग्स प्रदर्शित करता है, जबकि IntlProvider घटक आपके एप्लिकेशन को अनुवाद और स्वरूपण जानकारी प्रदान करता है।

अपने एप्लिकेशन का अनुवाद करने के लिए FormattedMessage और IntlProvider घटकों का उपयोग शुरू करने से पहले आपको एक अनुवाद फ़ाइल बनानी होगी। एक अनुवाद फ़ाइल में आपके एप्लिकेशन के सभी अनुवाद शामिल हैं। आप प्रत्येक भाषा और स्थान के लिए अलग-अलग फ़ाइलें बना सकते हैं या सभी अनुवादों को शामिल करने के लिए एक ही फ़ाइल का उपयोग कर सकते हैं।

उदाहरण के लिए:

निर्यातकॉन्स्ट messagesInFrench = {
 अभिवादन: "बोनजोर {नाम}"
}

निर्यातकॉन्स्ट messagesInItalian = {
 अभिवादन: "बुओंगियोर्नो {नाम}"
}

इस उदाहरण अनुवाद फ़ाइल में दो अनुवाद ऑब्जेक्ट हैं: messagesInफ़्रेंच और messagesInइतालवी. आप प्लेसहोल्डर को बदल सकते हैं {नाम} में अभिवादन गतिशील मान के साथ रनटाइम पर स्ट्रिंग।

अपने एप्लिकेशन में अनुवादों का उपयोग करने के लिए, आपको अपने एप्लिकेशन के रूट घटक को इसके साथ लपेटना होगा अंतर्राष्ट्रीय प्रदाता अवयव। IntlProvider घटक तीन लेता है प्रतिक्रिया सहारा: स्थान, defaultLocale, और संदेशों.

लोकेल प्रोप एक स्ट्रिंग को स्वीकार करता है जो उपयोगकर्ता के लोकेल को निर्दिष्ट करता है, जबकि डिफ़ॉल्टलोकेल एक फ़ॉलबैक निर्दिष्ट करता है यदि उपयोगकर्ता का पसंदीदा लोकेल अनुपलब्ध है। अंत में, messages प्रोप एक अनुवाद ऑब्जेक्ट को स्वीकार करता है।

यहां एक उदाहरण दिया गया है कि आप IntlProvider का उपयोग कैसे कर सकते हैं:

आयात प्रतिक्रिया से"प्रतिक्रिया";
आयात रिएक्टडोम से"प्रतिक्रिया-डोम/ग्राहक";
आयात अनुप्रयोग से"।/अनुप्रयोग";
आयात { अंतर्राष्ट्रीय प्रदाता } से"प्रतिक्रिया-अंतर्राष्ट्रीय";
आयात { messagesInFrench } से"./अनुवाद";
ReactDOM.createRoot(दस्तावेज़.getElementById("जड़"))।प्रदान करना(

"fr" संदेश={messagesInFrench} defaultLocale="एन">

 </IntlProvider>
 </React.StrictMode>
);

यह उदाहरण गुजरता है फादर स्थान, messagesInफ़्रेंच अनुवाद, और एक डिफ़ॉल्ट एन स्थान को अंतर्राष्ट्रीय प्रदाता अवयव।

आप एक से अधिक लोकेल या अनुवाद ऑब्जेक्ट पास कर सकते हैं, और अंतर्राष्ट्रीय प्रदाता स्वचालित रूप से उपयोगकर्ता की ब्राउज़र भाषा का पता लगाएगा और उचित अनुवाद का उपयोग करेगा।

अपने एप्लिकेशन में अनुवादित स्ट्रिंग प्रदर्शित करने के लिए, का उपयोग करें स्वरूपित संदेश अवयव। स्वरूपित संदेश घटक एक लेता है पहचान संदेश ऑब्जेक्ट में संदेश आईडी के अनुरूप प्रोप।

घटक भी एक लेता है defaultMessage और मान प्रोप. defaultMessage यदि वर्तमान लोकेल के लिए अनुवाद अनुपलब्ध है, तो प्रोप एक फ़ॉलबैक संदेश निर्दिष्ट करता है, जबकि मान प्रोप आपके अनुवादित संदेशों में प्लेसहोल्डर्स के लिए गतिशील मान प्रदान करता है।

उदाहरण के लिए:

आयात प्रतिक्रिया से"प्रतिक्रिया";
आयात { स्वरूपित संदेश } से"प्रतिक्रिया-अंतर्राष्ट्रीय";
समारोहअनुप्रयोग() {
वापस करना (




 आईडी="अभिवादन"
 डिफॉल्टमैसेज="सुप्रभात {नाम}"
 मान={{ नाम: 'जॉन'}}
 />
 </p>
 </div>
 );
}
निर्यातगलती करना अनुप्रयोग;

इस कोड ब्लॉक में, पहचान का सहारा स्वरूपित संदेश घटक का उपयोग करता है अभिवादन से कुंजी messagesInफ़्रेंच वस्तु, और मान प्रोप प्रतिस्थापित करता है {नाम} "जॉन" मान वाला प्लेसहोल्डर।

FormattedNumber घटक के साथ संख्याओं को फ़ॉर्मेट करना

React Intl भी प्रदान करता है स्वरूपित संख्या घटक जिसका उपयोग आप वर्तमान स्थान के आधार पर संख्याओं को प्रारूपित करने के लिए कर सकते हैं। घटक स्वरूपण को अनुकूलित करने के लिए विभिन्न प्रॉप्स को स्वीकार करता है, जैसे शैली, मुद्रा और न्यूनतम और अधिकतम अंश अंक।

यहां कुछ उदाहरण दिए गए हैं:

आयात प्रतिक्रिया से"प्रतिक्रिया";
आयात { स्वरूपित संख्या } से"प्रतिक्रिया-अंतर्राष्ट्रीय";
समारोहअनुप्रयोग() {
वापस करना (




 दशमलव: <स्वरूपित संख्याकीमत={123.456}शैली="दशमलव" />
 </p>


 प्रतिशत: <स्वरूपित संख्याकीमत={123.456}शैली="प्रतिशत" />
 </p>
 </div>
 );
}
निर्यातगलती करना अनुप्रयोग;

यह उदाहरण उपयोग करता है स्वरूपित संख्या वह घटक जो a स्वीकार करता है कीमत प्रोप उस नंबर को निर्दिष्ट करता है जिसे आप प्रारूपित करना चाहते हैं।

का उपयोग शैली प्रोप, आप स्वरूपित संख्या की उपस्थिति को अनुकूलित कर सकते हैं। आप सेट कर सकते हैं शैली के लिए सहारा दशमलव, प्रतिशत, या मुद्रा.

जब आप सेट करते हैं शैली मुद्रा का सहारा, द स्वरूपित संख्या घटक में निर्दिष्ट कोड का उपयोग करके संख्या को मुद्रा मूल्य के रूप में प्रारूपित करता है मुद्रा सहारा:

आयात प्रतिक्रिया से"प्रतिक्रिया";
आयात { स्वरूपित संख्या } से"प्रतिक्रिया-अंतर्राष्ट्रीय";
समारोहअनुप्रयोग() {
वापस करना (




 कीमत: <स्वरूपित संख्याकीमत={123.456}शैली="मुद्रा"मुद्रा="USD" />
 </p>
 </div>
 );
}
निर्यातगलती करना अनुप्रयोग;

स्वरूपित संख्या घटक उपरोक्त कोड ब्लॉक में संख्या का उपयोग करके प्रारूपित करता है मुद्रा शैली और USD मुद्रा कोड।

आप इसका उपयोग करके दशमलव स्थानों की विशिष्ट संख्या वाली संख्याओं को भी प्रारूपित कर सकते हैं न्यूनतम अंश अंक और अधिकतम अंश अंक सहारा.

न्यूनतम अंश अंक प्रोप प्रदर्शित करने के लिए भिन्न अंकों की न्यूनतम संख्या निर्दिष्ट करता है। इसके विपरीत, अधिकतम अंश अंक प्रोप भिन्न अंकों की अधिकतम संख्या निर्दिष्ट करता है।

यदि किसी संख्या में निर्दिष्ट से कम भिन्न अंक हैं न्यूनतम अंश अंक, React Intl इसे शून्य से पैड कर देगा। यदि संख्या में निर्दिष्ट से अधिक भिन्न अंक हैं अधिकतम अंश अंक, लाइब्रेरी संख्या को पूर्णांकित करेगी।

यहां एक उदाहरण दिया गया है कि आप इन प्रॉप्स का उपयोग कैसे कर सकते हैं:

आयात प्रतिक्रिया से"प्रतिक्रिया";
आयात { स्वरूपित संख्या } से"प्रतिक्रिया-अंतर्राष्ट्रीय";
समारोहअनुप्रयोग() {
वापस करना (




 मूल्य={123.4567}
 न्यूनतमफ्रैक्शनडिजिट={2}
 अधिकतमफ्रैक्शनडिजिट={3}
 />
 </p>
 </div>
 );
}
निर्यातगलती करना अनुप्रयोग;

FormattedDate घटक के साथ दिनांकों का स्वरूपण

आप React Intl का उपयोग करके दिनांकों को इस तरह से प्रारूपित कर सकते हैं जो सुसंगत और पढ़ने में आसान हो। स्वरूपित दिनांक घटक दिनांकों को प्रारूपित करने का एक सरल और प्रभावी तरीका प्रदान करता है। यह इसी तरह काम करता है दिनांक-समय लाइब्रेरीज़ जो दिनांकों को प्रारूपित करती हैं, जैसे Moment.js.

FormattedDate घटक कई प्रॉप्स लेता है, जैसे कीमत, दिन, महीना, और वर्ष. वैल्यू प्रॉप उस दिनांक को स्वीकार करता है जिसे आप फ़ॉर्मेट करना चाहते हैं, और अन्य प्रॉप्स इसके फ़ॉर्मेटिंग को कॉन्फ़िगर करते हैं।

उदाहरण के लिए:

आयात प्रतिक्रिया से"प्रतिक्रिया";
आयात { स्वरूपित दिनांक } से"प्रतिक्रिया-अंतर्राष्ट्रीय";
समारोहअनुप्रयोग() {
कॉन्स्ट आज= नयातारीख();
वापस करना (




 आजकी तारीख है
 मूल्य={आज}
 दिन="संख्यात्मक"
 महीना="लंबा"
 वर्ष="संख्यात्मक"
 />
 </p>
 </div>
 );
}
निर्यातगलती करना अनुप्रयोग;

इस उदाहरण में, कीमत प्रोप वर्तमान दिनांक का उपयोग करता है। इसके अलावा, का उपयोग कर दिन, महीना, और वर्ष प्रॉप्स, आप निर्दिष्ट करते हैं कि आप वर्ष, माह और दिन को एक लंबे प्रारूप में प्रदर्शित करना चाहते हैं।

दिन, महीने और वर्ष के साथ-साथ, अन्य प्रॉप्स भी तारीख के स्वरूप को प्रारूपित करते हैं। यहां वे प्रॉप्स और वे मूल्य दिए गए हैं जिन्हें वे स्वीकार करते हैं:

• वर्ष: "संख्यात्मक", "2-अंकीय"
• महीना: "संख्यात्मक", "2-अंकीय", "संकीर्ण", "छोटा", "लंबा"
• दिन: "संख्यात्मक", "2-अंकीय"
• घंटा: "संख्यात्मक", "2-अंकीय"
• मिनट: "संख्यात्मक", "2-अंकीय"
• दूसरा: "संख्यात्मक", "2-अंकीय"
• समयक्षेत्रनाम: "छोटा लंबा"

आप भी उपयोग कर सकते हैं स्वरूपित दिनांक स्वरूपण और प्रदर्शन समय के लिए घटक:

आयात प्रतिक्रिया से"प्रतिक्रिया";
आयात { स्वरूपित दिनांक } से"प्रतिक्रिया-अंतर्राष्ट्रीय";
समारोहअनुप्रयोग() {
कॉन्स्ट आज= नयातारीख();
वापस करना (




 समय है
 मूल्य={आज}
 घंटा="संख्यात्मक"
 मिनट="संख्यात्मक"
 दूसरा="संख्यात्मक"
 />
 </p>
 </div>
 );
}
निर्यातगलती करना अनुप्रयोग;

व्यापक दर्शकों के लिए अपने प्रतिक्रिया अनुप्रयोगों का अंतर्राष्ट्रीयकरण करें

आपने सीखा कि अपने रिएक्ट एप्लिकेशन में रिएक्ट-इंटल लाइब्रेरी को कैसे इंस्टॉल और सेटअप करें। React-intl आपके रिएक्ट एप्लिकेशन के नंबरों, तिथियों और मुद्राओं को प्रारूपित करना आसान बनाता है। आप FormattedMessage, FormattedNumber, और FormattedDate घटकों का उपयोग करके उपयोगकर्ता के स्थान के आधार पर डेटा को प्रारूपित कर सकते हैं।

रिएक्ट डेवलपर्स अक्सर गलतियाँ करते हैं जिसके गंभीर परिणाम हो सकते हैं। उदाहरण के लिए, राज्य को ठीक से अद्यतन करने में विफल होना। महंगी समस्याओं से बचने के लिए इन सामान्य गलतियों से अवगत होना और उन्हें जल्दी ठीक करना महत्वपूर्ण है।