रिएक्ट आरिया घटकों के साथ सुलभ रिएक्ट अनुप्रयोगों का निर्माण

रिएक्ट आरिया कंपोनेंट्स एक लाइब्रेरी है जिसमें रिएक्ट आरिया हुक के शीर्ष पर बने बिना स्टाइल वाले घटकों का संग्रह है।

इसे Adobe द्वारा विकसित किया गया है और यह रिएक्ट स्पेक्ट्रम प्रोजेक्ट का हिस्सा है, जिसका उद्देश्य एक व्यापक बनाना है पुस्तकालयों और उपकरणों का संग्रह जो डेवलपर्स को अनुकूली, सुलभ और मजबूत उपयोगकर्ता बनाने में मदद करता है अनुभव.

रिएक्ट आरिया घटकों को समझना

प्रतिक्रिया आरिया घटक WAI-ARIA (वेब ​​एक्सेसिबिलिटी इनिशिएटिव - एक्सेसिबल रिच इंटरनेट एप्लिकेशन) सर्वोत्तम प्रथाओं के अनुसार पहुंच, उपयोगकर्ता इंटरैक्शन और व्यवहार प्रदान करता है। रिएक्ट आरिया लाइब्रेरी के विपरीत, जो रिएक्ट हुक का उपयोग करता है अपने घटकों का निर्माण करने के लिए.

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

रिएक्ट एरिया घटकों का उपयोग करने के लाभ

रिएक्ट आरिया कंपोनेंट्स लाइब्रेरी कई लाभ प्रदान करती है, जिनमें शामिल हैं:

• सरल उपयोग: रिएक्ट आरिया घटक WAI-ARIA सर्वोत्तम प्रथाओं का पालन करते हैं, यह सुनिश्चित करते हुए कि आपका एप्लिकेशन सहायक तकनीकों का उपयोग करने वालों सहित सभी उपयोगकर्ताओं के लिए पहुंच योग्य है।
• FLEXIBILITY: रिएक्ट आरिया घटक बिना स्टाइल के आते हैं, जिससे आप बिना किसी बाधा के अपने डिजाइन सिस्टम को लागू कर सकते हैं।
• उपयोगकर्ता सहभागिता: रिएक्ट एरिया कीबोर्ड, माउस और टच इंटरैक्शन सहित उपयोगकर्ता इंटरैक्शन का मजबूत प्रबंधन प्रदान करता है।
• अंतर्राष्ट्रीयकरण: रिएक्ट एरिया दाएं से बाएं भाषाओं, दिनांक और संख्या स्वरूपण और बहुत कुछ का समर्थन करता है, जिससे अंतर्राष्ट्रीयकृत एप्लिकेशन बनाना आसान हो जाता है।

रिएक्ट आरिया घटकों के साथ रिएक्ट ऐप्स का निर्माण

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

अपना रिएक्ट एप्लिकेशन बनाना

Vite का उपयोग करके अपना रिएक्ट एप्लिकेशन बनाने के लिए, अपने टर्मिनल में निम्नलिखित कोड चलाएँ:

npm init vite

उपरोक्त कोड को चलाने से आपको अपना नया रिएक्ट प्रोजेक्ट बनाने में मदद करने के लिए संकेतों की एक श्रृंखला लॉन्च होगी।

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

अपना प्रोजेक्ट बनाने के बाद, आपको आवश्यक निर्भरताएँ स्थापित करने की आवश्यकता होगी। ऐसा करने के लिए, अपने टर्मिनल में निम्नलिखित कोड चलाएँ:

cd react-aria-app

npm install

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

रिएक्ट आरिया घटकों को स्थापित करना

आप एनपीएम या यार्न का उपयोग करके रिएक्ट एरिया कंपोनेंट्स लाइब्रेरी स्थापित कर सकते हैं। इसे npm के माध्यम से स्थापित करने के लिए, अपने टर्मिनल में निम्नलिखित कमांड चलाएँ:

npm install react-aria-components

वैकल्पिक रूप से, यार्न के माध्यम से स्थापित करने के लिए, यह कोड चलाएँ:

yarn add react-aria-components

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

रिएक्ट एरिया घटकों का उपयोग करना

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

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

import React from"react";
import { Button, Popover, DialogTrigger, Dialog } from"react-aria-components";
functionApp() {
return (




Click Me</Button>

You clicked the button</Dialog>
 </Popover>
 </DialogTrigger>
 </div>
 );
}
exportdefault App;

उपरोक्त कोड ब्लॉक आयात करता है बटन, जल्दी सेना, डायलॉग ट्रिगर, और संवाद से घटक प्रतिक्रिया-एरिया-घटक मापांक। सभी आयातित घटक एक साधारण बटन बनाते हैं जो क्लिक करने पर एक पॉपओवर प्रदर्शित करता है।

डायलॉग ट्रिगर घटक किसी संवाद या पॉपओवर की दृश्यता को नियंत्रित करता है। के अंदर डायलॉग ट्रिगर, वहाँ है बटन अवयव। यह बटन की दृश्यता को ट्रिगर करता है जल्दी सेना और संवाद.

जल्दी सेना घटक एक कंटेनर है जो शेष यूआई पर पॉप अप होता है, जबकि संवाद घटक ऐप के ऊपर एक परत में सामग्री प्रदर्शित करता है। के अंदर जल्दी सेना घटक एक है संवाद पाठ के साथ घटक "आपने बटन क्लिक किया."

बटन पर क्लिक करने पर टेक्स्ट के साथ एक पॉपओवर प्रदर्शित होगा "आपने बटन क्लिक किया" आपकी स्क्रीन पर, आपके इंटरफ़ेस को नीचे दी गई छवि के समान रूप दे रहा है।

जैसा कि आप ऊपर की छवि में देख सकते हैं, लाइब्रेरी के घटक बिना स्टाइल के आते हैं ताकि आप अपनी पसंदीदा स्टाइल चुन सकें।

अपने घटकों को स्टाइल करना

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

आप अलग-अलग कस्टम पास कर सकते हैं वर्गनाम घटकों के लिए और फिर अपनी सीएसएस फ़ाइल में सीएसएस कक्षाओं को परिभाषित करें।

यहाँ एक उदाहरण है:

import React from"react";
import { Button, Popover, DialogTrigger, Dialog } from"react-aria-components";
functionApp() {
return (




"button">Click Me</Button>
"popover">
"dialog">You clicked the button</Dialog>
 </Popover>
 </DialogTrigger>
 </div>
 );
}
exportdefault App;

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

.button{
margin-block-start: 1rem;
border: none;
color: #f2f2f2;
background-color: #333333;
padding: 0.7rem 0.8rem;
border-radius: 12px;
font-family: cursive;
}
.popover{
padding: 1rem;
background-color: antiquewhite;
border-radius: 12px;
}
.dialog{
outline: none;
}

आपके घटकों के लिए शैलियों को परिभाषित करने के बाद, आपका बटन और पॉपओवर कुछ इस तरह दिखना चाहिए।

यदि आप किसी प्रथा को परिभाषित नहीं करना चाहते हैं कक्षा का नाम आपके घटकों के लिए, रिएक्ट एरिया कंपोनेंट्स लाइब्रेरी में एक डिफ़ॉल्ट शामिल है कक्षा का नाम प्रत्येक घटक के लिए. डिफ़ॉल्ट कक्षा का नाम है प्रतिक्रिया-एरिया-घटकनाम, कहाँ घटक का नाम यह उस घटक का नाम है जिसे आप स्टाइल करना चाहते हैं।

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

.react-aria-Button{
margin-block-start: 1rem;
border: none;
color: #f2f2f2;
background-color: #333333;
padding: 0.7rem 0.8rem;
border-radius: 12px;
font-family: cursive;
}
.react-aria-Popover{
padding: 1rem;
background-color: antiquewhite;
border-radius: 12px;
}
.react-aria-Dialog{
outline: none;
}

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

सुलभ और इंटरएक्टिव रिएक्ट एप्लिकेशन बनाएं

रिएक्ट एरिया कंपोनेंट्स सुलभ और इंटरैक्टिव रिएक्ट अनुप्रयोगों के निर्माण के लिए एक शक्तिशाली लाइब्रेरी है। यह ऐसे घटक प्रदान करता है जो WAI-ARIA सर्वोत्तम प्रथाओं के अनुसार उपयोगकर्ता इंटरैक्शन और पहुंच को संभालते हैं। यदि आप एक ऐसी घटक लाइब्रेरी की तलाश में हैं जो बहुत सारे घटक और लचीलापन प्रदान करती है, तो रिएक्ट एरिया कंपोनेंट्स एक उत्कृष्ट विकल्प है।

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