ये आसान लाइब्रेरी आपके रिएक्ट ऐप्स को आसानी से बनाने और अनुकूलित करने के लिए एक आदर्श विकल्प हो सकती हैं।
आप घटक लाइब्रेरीज़ का उपयोग कर सकते हैं जो रिएक्ट ऐप्स के लिए विकास प्रक्रिया को सरल बनाने के लिए पूर्व-निर्मित, स्टाइल वाले तत्व प्रदान करते हैं। ये लाइब्रेरी बहुत सारा समय और प्रयास बचा सकती हैं, लेकिन ये आपके ऐप की शैली पर आपके नियंत्रण को भी सीमित कर सकती हैं। यदि आपको अपने रिएक्ट ऐप्स की स्टाइलिंग पर अधिक नियंत्रण की आवश्यकता है, तो एक अनस्टाइल्ड घटक लाइब्रेरी का उपयोग करने पर विचार करें।
अनस्टाइल्ड कंपोनेंट लाइब्रेरी क्या हैं?
अस्थिर घटक पुस्तकालयों का उपयोग सुलभ रिएक्ट अनुप्रयोगों को विकसित करने के लिए किया जाता है. वे पूर्वनिर्धारित शैलियों के बिना पुन: प्रयोज्य यूआई घटकों का संग्रह हैं। वे आपको बिना किसी स्टाइलिंग के यूआई तत्वों की बुनियादी संरचना प्रदान करते हैं। इससे आपको इस पर पूरा नियंत्रण मिलता है कि आपके घटक कैसे दिखते और महसूस होते हैं।
अनस्टाइल्ड कंपोनेंट्स लाइब्रेरीज़ के लाभ
यहां अनस्टाइल्ड घटक पुस्तकालयों का उपयोग करने के कुछ लाभ दिए गए हैं:
- स्टाइल पर पूरा नियंत्रण: अनस्टाइल्ड कंपोनेंट लाइब्रेरीज़ आपको इस बात पर पूरा नियंत्रण देती हैं कि आपके कंपोनेंट कैसे दिखते हैं। आप अपनी आवश्यकताओं के अनुरूप घटकों को अनुकूलित करने के लिए किसी भी सीएसएस या स्टाइलिंग फ्रेमवर्क का उपयोग कर सकते हैं।
- विकास को गति दें: अनस्टाइल्ड कंपोनेंट लाइब्रेरीज़ आपके ऐप में उपयोग किए जा सकने वाले पूर्व-निर्मित घटकों का एक सेट प्रदान करके विकास को गति देने में आपकी सहायता कर सकती हैं।
- बनाए रखना आसान है: अनस्टाइल्ड घटक पुस्तकालयों को बनाए रखना आसान है क्योंकि वे किसी विशिष्ट स्टाइलिंग ढांचे से कसकर जुड़े नहीं हैं। इसका मतलब है कि आप अंतर्निहित कोड में बदलाव किए बिना स्टाइल को आसानी से अपडेट कर सकते हैं।
रेडिक्स यूआई एक अनस्टाइल्ड कंपोनेंट लाइब्रेरी है जो एक्सेसिबिलिटी पर केंद्रित है। यह सभी उपयोगकर्ताओं के लिए पहुंच योग्य होने के लिए डिज़ाइन किए गए यूआई घटकों का एक सेट प्रदान करता है। तुम कर सकते हो रेडिक्स यूआई का उपयोग करके सुंदर रिएक्ट ऐप्स बनाएं.
रेडिक्स यूआई के साथ काम करते समय, आप संपूर्ण लाइब्रेरी के बजाय आवश्यक व्यक्तिगत घटकों को स्थापित कर सकते हैं। यह सुनिश्चित करता है कि आप अपने एप्लिकेशन को हल्का रखें।
उदाहरण के लिए, यदि आपको केवल एक अकॉर्डियन घटक की आवश्यकता है, तो आप निम्न आदेश चलाकर इसे अपने एप्लिकेशन में स्थापित कर सकते हैं:
npm install @radix-ui/react-accordion
अकॉर्डियन घटक स्थापित करने के बाद, आप अपने रिएक्ट ऐप में अकॉर्डियन बना सकते हैं।
अकॉर्डियन घटक का उपयोग कैसे करें इसका एक उदाहरण यहां दिया गया है:
import React from"react"
import * as Accordion from"@radix-ui/react-accordion"
exportdefaultfunctionApp() {
return ("single" defaultValue="item-1" collapsible> "item-1"> Is this accordion unstyled?</Accordion.Trigger> Yes. It is unstyled.</Accordion.Content>
</Accordion.Item>
</Accordion.Root>
</div>
)
}
उपरोक्त कोड ब्लॉक का उपयोग करके एक बुनियादी अनस्टाइल्ड अकॉर्डियन घटक सेट करता है @रेडिक्स-यूआई/प्रतिक्रिया-अकॉर्डियन पुस्तकालय, अनुकूलन योग्य सामग्री के साथ संक्षिप्त करने योग्य वस्तुओं की अनुमति देता है।
कोड एक अकॉर्डियन उत्पन्न करेगा जो इस तरह दिखेगा:
रिएक्ट एरिया लाइब्रेरी रिएक्ट में यूजर इंटरफेस बनाने के लिए हुक का एक सेट है। लाइब्रेरी उन घटकों का संग्रह प्रदान करके सुलभ वेब एप्लिकेशन बनाना आसान बनाती है जो पहुंच के लिए सर्वोत्तम प्रथाओं का पालन करते हैं।
Adobe ने React Aria लाइब्रेरी का विकास और रखरखाव किया है। लाइब्रेरी अधिक व्यापक एडोब स्पेक्ट्रम डिज़ाइन सिस्टम का एक हिस्सा है, जो सुलभ उपयोगकर्ता इंटरफ़ेस के निर्माण के लिए डिज़ाइन दिशानिर्देशों और संसाधनों का एक व्यापक सेट प्रदान करता है। रिएक्ट आरिया लाइब्रेरी द्वारा प्रदान किए गए तत्व अस्थिर हैं, जिससे आप अपनी आवश्यकताओं के अनुरूप तत्वों को अनुकूलित कर सकते हैं।
अपने रिएक्ट एप्लिकेशन में रिएक्ट एरिया का उपयोग करने के लिए, निम्नलिखित कमांड चलाकर इसे इंस्टॉल करें:
npm install react-aria
इसका उपयोग करके बटन घटक कैसे बनाया जाए इसका एक उदाहरण यहां दिया गया है उपयोग बटन अंकुश:
import React from'react'
import {useButton} from'react-aria';functionButton(props: any) {
let ref = React.useRef(null);
let { buttonProps } = useButton(props, ref);return (
exportdefault Button;
अब आप इसे आयात और प्रस्तुत कर सकते हैं बटन आपके द्वारा चुने गए किसी अन्य घटक में घटक।
उदाहरण के लिए:
import React from'react'
import Button from'./Button';functionApp() {
return (
exportdefault App;
जब आप उपरोक्त कोड ब्लॉक प्रस्तुत करते हैं, तो यह एक साधारण बटन उत्पन्न करेगा जो इस तरह दिखता है:
यदि आप हुक के कारण रिएक्ट एरिया का उपयोग करने में असहज हैं, तो इसका उपयोग करें प्रतिक्रिया आरिया घटक इसके बजाय पुस्तकालय. यह लाइब्रेरी पूर्व-निर्मित घटक प्रदान करती है जो डिफ़ॉल्ट रूप से पहुंच योग्य होते हैं। यह रिएक्ट एरिया लाइब्रेरी के शीर्ष पर एक पतली परत है। प्रदान किए गए घटक अस्थिर हैं, इसलिए दोनों लाइब्रेरी बहुत समान हैं।
बेस यूआई एक अनस्टाइल्ड रिएक्ट यूआई लाइब्रेरी है जो बिना स्टाइल के यूआई घटक प्रदान करती है। मटेरियल यूआई टीम ने मूलभूत घटकों के एक सेट के साथ बेस यूआई बनाया है जिसका उपयोग आप अपने स्वयं के कस्टम रिएक्ट ऐप्स बनाने के लिए कर सकते हैं। उन्होंने बेस यूआई लाइब्रेरी को उसी पर आधारित किया सामग्री यूआई के रूप में मजबूत इंजीनियरिंग, लेकिन बेस यूआई मटेरियल डिज़ाइन लागू नहीं करता है।
आप इस कमांड से अपने रिएक्ट एप्लिकेशन में बेस यूआई इंस्टॉल कर सकते हैं:
npm install @mui/base
बेस यूआई चलते-फिरते घटक प्रदान करता है, जिसका अर्थ है कि आप सीधे लाइब्रेरी से घटकों को आयात और उपयोग कर सकते हैं। यह हुक भी प्रदान करता है जिनका उपयोग आप अपने घटकों को बनाने और कॉन्फ़िगर करने के लिए कर सकते हैं।
यहां बेस यूआई घटकों का उपयोग करने का एक उदाहरण दिया गया है:
import React from"react";
import Button from"@mui/base/Button";
exportdefaultfunctionApp() {
return (
यह कोड का उपयोग करके एक सरल बटन उत्पन्न करता है बटन बेस यूआई लाइब्रेरी का घटक। आप भी उपयोग कर सकते हैं उपयोग बटन समान कार्य करने के लिए हुक करें।
import React from"react";
import useButton from"@mui/base/useButton";exportdefaultfunctionApp() {
const { getRootProps } = useButton();
return (
उपयोग बटन हुक और बटन घटक एक अनस्टाइल बटन उत्पन्न करेगा, जैसा कि नीचे दी गई छवि में दिखाया गया है।
एक अन्य लाइब्रेरी जिसे आप एक्सप्लोर कर सकते हैं वह है हेडलेस यूआई, जो बिना स्टाइल वाले यूआई तत्वों की पेशकश करती है, जिससे आपको अपने यूआई घटकों की उपस्थिति और व्यवहार को अपनी इच्छानुसार अनुकूलित करने की आजादी मिलती है।
आप निम्न आदेश का उपयोग करके लाइब्रेरी स्थापित कर सकते हैं:
npm install @headlessui/react
लाइब्रेरी स्थापित करने के बाद, आप अपने रिएक्ट एप्लिकेशन में लाइब्रेरी द्वारा प्रदान किए गए कई घटकों का उपयोग कर सकते हैं।
उदाहरण के लिए:
import React from"react";
import { Popover } from"@headlessui/react";exportdefaultfunctionApp() {
return (Popover</Popover.Button>
This is a Popover</p>
</Popover.Panel>
</Popover>
</div>
);
}
इस उदाहरण में, आप इसका उपयोग करके एक पॉपओवर बनाते हैं जल्दी सेना हेडलेस यूआई लाइब्रेरी से घटक। उपरोक्त कोड ब्लॉक एक पॉपओवर उत्पन्न करेगा जो इस तरह दिखेगा।
अनस्टाइल्ड घटकों के साथ पूर्ण नियंत्रण प्राप्त करें
अनस्टाइल्ड कंपोनेंट लाइब्रेरीज़ आपको अपने रिएक्ट एप्लिकेशन की स्टाइलिंग पर पूर्ण नियंत्रण प्रदान करती हैं, जिससे आप अद्वितीय उपयोगकर्ता अनुभव बना सकते हैं। ये पुस्तकालय आपकी आवश्यकताओं के अनुरूप कई प्रकार के विकल्प प्रदान करते हैं। आप ऊपर उल्लिखित पुस्तकालयों का लाभ उठाकर दृष्टि से आकर्षक और उच्च अनुकूलन योग्य रिएक्ट एप्लिकेशन बना सकते हैं।
