एमयूआई क्या है और आप इसे अपने रिएक्टजेएस प्रोजेक्ट्स में कैसे इस्तेमाल कर सकते हैं?

सितंबर 2021 में, पहले मटेरियल-यूआई के नाम से जानी जाने वाली कंपनी ने अपना नाम बदलकर एमयूआई कर दिया। यह परिवर्तन मुख्य रूप से इसलिए हुआ क्योंकि बहुत से लोग मटेरियल-यूआई को मटेरियल डिज़ाइन (एक डिज़ाइन सिस्टम) से अलग नहीं कर सके।

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

संक्षिप्त रूप में एमयूआई का अर्थ है यूआई बनाने के लिए सामग्री, और इस लेख में, आप सीखेंगे कि रिएक्ट यूआई बनाने के लिए एमयूआई का उपयोग कैसे करें।

प्रतिक्रिया में एमयूआई कैसे एक्सेस करें?

एमयूआई एनपीएम पैकेज के रूप में उपलब्ध है। इसलिए, इसे एक्सेस करने के लिए आपको केवल अपने रिएक्ट प्रोजेक्ट के भीतर कोड की निम्नलिखित पंक्ति को निष्पादित करना होगा:

npm @ mui/सामग्री @ भावना/प्रतिक्रिया @ भावना/शैली स्थापित करें

यह मानते हुए कि आप पहले से ही हैं अपने डिवाइस पर रिएक्ट स्थापित करें, आपके पास एमयूआई पुस्तकालय और उसके सभी घटकों तक पूर्ण पहुंच है। एमयूआई में सौ से अधिक विभिन्न घटक हैं जो निम्नलिखित श्रेणियों में से एक में आते हैं:

• इनपुट
• डेटा प्रदर्शन
• प्रतिपुष्टि
• सतह
• मार्गदर्शन
• ख़ाका
• Utils
• डेटा ग्रिड
• दिनांक समय

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

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

प्रतिक्रिया साइन-इन घटक बनाना

रिएक्ट में एक नया कंपोनेंट बनाने के लिए, बस रिएक्ट के src फोल्डर में नेविगेट करें और एक नया कंपोनेंट फोल्डर बनाएं। साइन-इन घटक से शुरू होकर, घटक फ़ोल्डर आपके सभी घटकों का घर हो सकता है।

सम्बंधित: ReactJS क्या है, और इसका उपयोग किस लिए किया जा सकता है?

साइनइन.जेएस फ़ाइल

'प्रतिक्रिया' से आयात प्रतिक्रिया;
फ़ंक्शन साइनिन () {
वापसी (

);
}
डिफ़ॉल्ट साइन इन निर्यात करें;

अपना साइन-इन घटक बनाने के बाद, इसे अपने ऐप घटक (src फ़ोल्डर के भीतर स्थित) में आयात करके इसे अपने रिएक्ट एप्लिकेशन से जोड़ने का समय आ गया है।

अपडेट किया गया ऐप.जेएस फ़ाइल

'प्रतिक्रिया' से आयात प्रतिक्रिया;
'./components/Signin' से साइनइन आयात करें;
फ़ंक्शन ऐप () {
वापसी (






);
}
निर्यात डिफ़ॉल्ट ऐप;

अब आप उन एमयूआई घटकों की खोज शुरू कर सकते हैं जिनका आप अपने साइन-इन पृष्ठ पर उपयोग करना चाहते हैं।

टाइपोग्राफी घटक क्या है?

टाइपोग्राफी घटक एमयूआई की डेटा प्रदर्शन श्रेणी से संबंधित है और इसमें तेरह डिफ़ॉल्ट रूप हैं। इसमे शामिल है:

• एच 1
• एच 2
• h3
• एच 4
• एच5
• एच6
• उपशीर्षक1
• उपशीर्षक2
• शरीर1
• बॉडी 2
• बटन
• शीर्षक
• ओवरलाइन

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

टाइपोग्राफी घटक उदाहरण का उपयोग करना

'प्रतिक्रिया' से आयात प्रतिक्रिया;
'@ मुई/सामग्री/टाइपोग्राफी' से टाइपोग्राफी आयात करें;
फ़ंक्शन साइनिन () {
वापसी (


 साइन इन करें 



);
}
डिफ़ॉल्ट साइन इन निर्यात करें;

उपरोक्त कोड से एक महत्वपूर्ण बात यह है कि हर बार जब आप अपने UI में एक नया घटक सम्मिलित करते हैं, तो आपको इसे अपनी प्रतिक्रिया घटक फ़ाइल के शीर्ष पर भी आयात करना होगा। टाइपोग्राफी घटक के साथ अपना साइन-इन घटक अपडेट करना (जैसा कि ऊपर कोड में देखा गया है) आपके ब्राउज़र में निम्न आउटपुट देगा:

टेक्स्ट फ़ील्ड घटक क्या है?

टेक्स्ट फ़ील्ड घटक इनपुट श्रेणी के अंतर्गत आता है। इस घटक के दो सरल कार्य हैं; यह उपयोगकर्ताओं को UI में टेक्स्ट दर्ज करने या संपादित करने की अनुमति देता है। टेक्स्ट फ़ील्ड घटक तीन प्रकारों का उपयोग करता है, अर्थात् उल्लिखित, भरा हुआ और मानक, जिसमें उल्लिखित संस्करण डिफ़ॉल्ट रूप से होता है। इसलिए, यदि आप डिफ़ॉल्ट टेक्स्ट फ़ील्ड घटक का उपयोग करना चाहते हैं, तो आपको वैरिएंट प्रोप को शामिल करने की आवश्यकता नहीं है। Thetext फ़ील्ड घटक कई अन्य प्रॉप्स का भी उपयोग करता है, जिसमें लेबल, आवश्यक, प्रकार, आईडी, अक्षम, आदि शामिल हैं।

टेक्स्ट फ़ील्ड घटक उदाहरण का उपयोग करना

'प्रतिक्रिया' से आयात प्रतिक्रिया;
'@ मुई/सामग्री/टेक्स्टफिल्ड' से टेक्स्टफिल्ड आयात करें;
'@ मुई/सामग्री/टाइपोग्राफी' से टाइपोग्राफी आयात करें;
फ़ंक्शन साइनिन () {
वापसी (


 साइन इन करें 
लेबल = "ईमेल पता"
आवश्यक
आईडी = "ईमेल"
नाम = "ईमेल"
/>
लेबल = "पासवर्ड"
आवश्यक
आईडी = "पासवर्ड"
नाम = "पासवर्ड"
टाइप = "पासवर्ड"
/>



);
}
डिफ़ॉल्ट साइन इन निर्यात करें;

उपरोक्त कोड आपके ब्राउज़र में निम्न आउटपुट उत्पन्न करेगा:

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

सम्बंधित: ReactJS में प्रॉप्स का उपयोग कैसे करें

हालाँकि, जब तक आप अपने लिंक को अद्वितीय नहीं दिखाना चाहते, तब तक किसी अतिरिक्त प्रॉप्स का उपयोग करने की आवश्यकता नहीं है। उदाहरण के लिए, अंडरलाइन प्रोप का डिफ़ॉल्ट मान "हमेशा" होता है और अन्य दो मान जिन्हें आप प्रोप को असाइन कर सकते हैं "कोई नहीं" और "होवर" हैं।

इसलिए, आपको अपने घटक में केवल अंडरलाइन प्रोप को शामिल करने की आवश्यकता है जब आप कोई रेखांकन नहीं चाहते हैं या जब आप चाहते हैं कि यह एक होवर स्थिति हो।

पासवर्ड भूल गया?

उपरोक्त कोड को अपने मौजूदा साइन-इन घटक में डालने से आपके ब्राउज़र में निम्न आउटपुट उत्पन्न होगा:

बटन घटक क्या है?

बटन घटक भी इनपुट श्रेणी से संबंधित है और सामान्य बटन कार्यक्षमता का पालन करता हैयह आपके आवेदन के लिए उपयोगकर्ता के कार्यों को संप्रेषित करता है। यह घटक तीन प्रकारों में से एक का उपयोग करता है (पाठ, निहित, और रूपरेखा), और प्रत्येक संस्करण तीन राज्यों में से एक में प्रकट हो सकता है—प्राथमिक, अक्षम और लिंक्ड।

एक बटन घटक डिफ़ॉल्ट प्रकार टेक्स्ट है। इसलिए, यदि आप एक निहित या रेखांकित बटन चाहते हैं, तो आपको इसे इंगित करने के लिए वैरिएंट प्रोप का उपयोग करने की आवश्यकता होगी। वैरिएंट प्रोप के अलावा, बटन कंपोनेंट में एक ऑनक्लिक हैंडलर और एक कलर प्रोप-दूसरों के बीच होता है।

बटन घटक उदाहरण का उपयोग करना

 साइन इन करें

उपरोक्त कोड को अपने साइन-इन घटक में डालने से आपका UI निम्न जैसा दिखने के लिए अपडेट हो जाएगा:

अब आपके पास एक इंटरेक्टिव बटन है जो माउस के उस पर चलने पर होवर करता है। लेकिन सभी घटक क्षैतिज हैं, और यह बहुत अच्छा नहीं लगता है।

बॉक्स घटक क्या है?

Theboxcomponent ठीक वही है जो आपको अपने रिएक्ट ऐप में उपयोगिता घटकों (जैसे बटन घटक) को व्यवस्थित करने की आवश्यकता है। बॉक्स घटक ansx प्रोप का उपयोग करता है, जिसमें सभी सिस्टम गुणों (जैसे ऊंचाई और चौड़ाई) तक पहुंच होती है, जिसे आपको अपने UI में घटकों को व्यवस्थित करने की आवश्यकता होती है।

बॉक्स घटक उदाहरण का उपयोग करना

'प्रतिक्रिया' से आयात प्रतिक्रिया;
'@ मुई/सामग्री/लिंक' से आयात लिंक;
'@ मुई/सामग्री/टेक्स्टफिल्ड' से टेक्स्टफिल्ड आयात करें;
'@ मुई/सामग्री/टाइपोग्राफी' से टाइपोग्राफी आयात करें;
'@mui/material' से {बटन, बॉक्स} आयात करें;
फ़ंक्शन साइनिन () {
वापसी (


एसएक्स = {{
मेरा: 8,
प्रदर्शन: 'फ्लेक्स',
फ्लेक्सडायरेक्शन: 'कॉलम',
संरेखित करें: 'केंद्र',
}}>
 साइन इन करें 
लेबल = "ईमेल पता"
आवश्यक
आईडी = "ईमेल"
नाम = "ईमेल"
मार्जिन = "सामान्य"
/>
लेबल = "पासवर्ड"
आवश्यक
आईडी = "पासवर्ड"
नाम = "पासवर्ड"
टाइप = "पासवर्ड"
मार्जिन = "सामान्य"
/>
href="#"
एसएक्स = {{श्री: 12, एमबी: 2}}
>
पासवर्ड भूल गया?

संस्करण = "निहित"
एसएक्स = {{एमटी: 2}}
>
साइन इन करें





);
}
डिफ़ॉल्ट साइन इन निर्यात करें;

उपरोक्त कोड में उपयोगिता घटकों (और एसएक्स प्रोप का उपयोग करके) के आसपास बॉक्सकंपोनेंट लपेटकर, आप प्रभावी रूप से एक फ्लेक्स कॉलम संरचना तैयार करेंगे। उपरोक्त कोड आपके ब्राउज़र में निम्नलिखित रिएक्ट साइन-इन पेज तैयार करेगा:

एमयूआई ग्रिड घटक क्या है?

ग्रिड घटक सीखने के लिए एक और उपयोगी एमयूआई घटक है। यह एमयूआई की लेआउट श्रेणी में आता है और जवाबदेही की सुविधा देता है। यह एक डेवलपर को अपने 12-कॉलम लेआउट सिस्टम के कारण उत्तरदायी डिज़ाइन प्राप्त करने की अनुमति देता है। यह लेआउट सिस्टम किसी भी स्क्रीन आकार के अनुकूल एप्लिकेशन बनाने के लिए MUI के पांच डिफ़ॉल्ट ब्रेकप्वाइंट का उपयोग करता है। इन विराम बिंदुओं में शामिल हैं:

• एक्सएस (अतिरिक्त-छोटा और 0px से प्रारंभ होता है)
• एसएम (छोटा और 600px से शुरू होता है)
• मोहम्मद (मध्यम और 900px से शुरू होता है)
• एलजी (बड़ा और 1200px से शुरू होता है)
• एक्स्ट्रा लार्ज (अतिरिक्त-बड़ा और 1536px से प्रारंभ होता है)

MUIgridcomponent उसी तरह काम करता है जैसे CSS flexbox प्रॉपर्टी में इसमें दो प्रकार के लेआउट-कंटेनर (पैरेंट) और आइटम्स (चाइल्ड) के आधार पर एक यूनिडायरेक्शनल पैरेंट-चाइल्ड सिस्टम होता है। हालांकि, एमयूआई ग्रिड घटक एक नेस्टेड ग्रिड की सुविधा प्रदान करता है, जहां एक आइटम एक कंटेनर भी हो सकता है।

ReactJS अनुप्रयोगों के लिए अन्य स्टाइलिंग विकल्पों का अन्वेषण करें

यह लेख आपको सिखाता है कि अपने रिएक्ट एप्लिकेशन में एमयूआई लाइब्रेरी को कैसे स्थापित और उपयोग करें। आप कुछ बुनियादी घटकों (जैसे टाइपोग्राफी) और कुछ अधिक उन्नत संरचनात्मक घटकों (जैसे बॉक्स घटक) का उपयोग करना सीखते हैं।

एमयूआई लाइब्रेरी का उपयोग करना आसान है, प्रभावी है और रिएक्ट ऐप्स के साथ बढ़िया काम करता है। लेकिन इसका मतलब यह नहीं है कि यह रिएक्ट डेवलपर्स के लिए उपलब्ध एकमात्र स्टाइलिंग विकल्प है। यदि आप एक रिएक्ट एप्लिकेशन बना रहे हैं, तो आप अपने ऐप को स्टाइल करने के लिए एमयूआई लाइब्रेरी या किसी भी सीएसएस फ्रेमवर्क का उपयोग करने के लिए स्वतंत्र हैं।

कदीशा कीन (33 लेख प्रकाशित)

कदीशा कीन एक पूर्ण-स्टैक सॉफ़्टवेयर डेवलपर और तकनीकी/प्रौद्योगिकी लेखक हैं। उसके पास कुछ सबसे जटिल तकनीकी अवधारणाओं को सरल बनाने की विशिष्ट क्षमता है; उत्पादन सामग्री जिसे कोई भी तकनीकी नौसिखिया आसानी से समझ सकता है। उसे लिखने, दिलचस्प सॉफ्टवेयर विकसित करने और दुनिया की यात्रा (वृत्तचित्रों के माध्यम से) करने का शौक है।

कदीशा कीन. की अन्य फ़िल्में-टीवी शो