रेडिक्स यूआई का उपयोग करके एक रिएक्ट एप्लिकेशन बनाना

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

रेडिक्स यूआई क्या है?

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

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

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

रेडिक्स यूआई का उपयोग करने के लिए आपको एक रिएक्ट एप्लिकेशन सेट करना होगा। ऐसा करने के लिए, आपके पास Node.js और होना चाहिए एनपीएम, नोड पैकेज मैनेजर, आपके कंप्यूटर पर स्थापित.

इन्हें इंस्टॉल करके, आप इस टर्मिनल कमांड के साथ एक नया रिएक्ट एप्लिकेशन बना सकते हैं:

npm init vite

यह कमांड Vite को इनिशियलाइज़ करेगा। Vite एक तेज़-निर्माण टूल है जो आपको आधुनिक वेब एप्लिकेशन तेज़ी से बनाने की सुविधा देता है। तुम कर सकते हो अपना रिएक्ट एप्लिकेशन बनाने के लिए Vite का उपयोग करें.

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

इसके बाद, अपने नए ऐप की रूट डायरेक्टरी दर्ज करें और आवश्यक निर्भरताएँ स्थापित करें:

cd radix-ui-app
npm install

आपका रिएक्ट एप्लिकेशन अब तैयार है।

रेडिक्स यूआई स्थापित करना

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

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

npm install @radix-ui/react-dropdown-menu

यह रेडिक्स यूआई ड्रॉपडाउन मेनू घटक स्थापित करेगा। रेडिक्स यूआई में कई अन्य घटक हैं जिन्हें आप अपनी आवश्यकताओं के आधार पर इंस्टॉल कर सकते हैं।

रेडिक्स यूआई का उपयोग करके अपना एप्लिकेशन बनाना

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

यहां एक उदाहरण दिया गया है जिसमें दिखाया गया है कि आप रेडिक्स का उपयोग करके एक सरल ड्रॉपडाउन मेनू कैसे बना सकते हैं:

import React from"react";
import * as DropdownMenu from"@radix-ui/react-dropdown-menu";
functionApp() {
return (





Click Me</button>
 </DropdownMenu.Trigger>




New Tab</p>
 </DropdownMenu.Item>
 </DropdownMenu.Group>


More tools</p>
 </DropdownMenu.Item>
 </DropdownMenu.Group>
 </DropdownMenu.Content>
 </DropdownMenu.Root>
 </div>
 );
}
exportdefault App;

यह कोड सभी घटकों को आयात करता है @रेडिक्स-यूआई/प्रतिक्रिया-ड्रॉपडाउन-मेनू पैकेज के रूप में ड्रॉप डाउन मेनू. इसके बाद यह इन घटकों का उपयोग अंदर एक ड्रॉपडाउन मेनू बनाने के लिए करता है डिव तत्व।

ड्रॉप डाउन मेनू। जड़ ड्रॉपडाउन मेनू का मूल घटक है. आपको अन्य सभी ड्रॉपडाउन मेनू घटकों को इसी में समाहित करना चाहिए। आप इसका उपयोग करके ड्रॉपडाउन मेनू के लिए ट्रिगर परिभाषित कर सकते हैं ड्रॉप डाउन मेनू। चालू कर देना अवयव। इस मामले में, ट्रिगर एक है बटन "मुझे क्लिक करें" टेक्स्ट वाला तत्व। जब आप बटन पर क्लिक करेंगे तो ड्रॉपडाउन मेनू दिखाई देगा।

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

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

उपरोक्त कोड ब्लॉक को प्रस्तुत करने से आपका इंटरफ़ेस इस तरह दिखने के लिए संशोधित हो जाएगा:

जैसा कि आप देख सकते हैं, परिणामों में किसी भी स्टाइल का अभाव है, इसलिए आपको आगे अपना स्वयं का सीएसएस जोड़ना होगा।

अपने रेडिक्स यूआई घटकों को स्टाइल करना

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

पारंपरिक सीएसएस का उपयोग करके अपने रेडिक्स यूआई घटकों को कैसे स्टाइल करें इसका एक उदाहरण यहां दिया गया है:

import React from"react";
import * as DropdownMenu from"@radix-ui/react-dropdown-menu";
functionApp() {
return (




"trigger">
"button">Click Me</button>
 </DropdownMenu.Trigger>
"content">

"item">
New Tab</p>
 </DropdownMenu.Item>
 </DropdownMenu.Group>

"item">
More tools</p>
 </DropdownMenu.Item>
 </DropdownMenu.Group>
 </DropdownMenu.Content>
 </DropdownMenu.Root>
 </div>
 );
}

exportdefault App;

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

कक्षाएं लागू करने के बाद, आप सीएसएस का उपयोग करके घटकों को स्टाइल कर सकते हैं:

.button {
padding: 0.7rem 0.8rem;
border: none;
border-radius: 12px;
background-color: #333333;
color: #f2f2f2;
}
.trigger {
border: none;
}
.content {
margin: 1rem;
padding: 0.7rem;
background-color: #FFFFFF;
color: #333333;
border-radius: 7px;
}
.item {
padding: 1rem;
cursor: pointer;
border-radius: 7px;
font-weight: bold;
}
.item:hover {
background-color: #333333;
color: lightgray;
}

उपरोक्त कोड ब्लॉक अधिक आकर्षक लुक के लिए घटकों पर परिभाषित शैलियों को लागू करेगा:

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

npm install @radix-ui/react-icons

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

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

import React from"react";
import * as DropdownMenu from"@radix-ui/react-dropdown-menu";
import { HamburgerMenuIcon, PlusIcon } from"@radix-ui/react-icons";
functionApp() {
return (




"trigger">
"button">

 </button>
 </DropdownMenu.Trigger>
"content">

"item">
New Tab</p>

 </DropdownMenu.Item>
 </DropdownMenu.Group>

"item">
More tools</p>
 </DropdownMenu.Item>
 </DropdownMenu.Group>
 </DropdownMenu.Content>
 </DropdownMenu.Root>
 </div>
 );
}

exportdefault App;

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

अगला, अद्यतन करें ।वस्तु आपकी सीएसएस फ़ाइल में कक्षा:

.item {
padding: 1rem;
cursor: pointer;
border-radius: 7px;
font-weight: bold;
display: flex;
gap: 1rem;
}

अब आपका एप्लिकेशन इस तरह दिखना चाहिए.

रेडिक्स यूआई का उपयोग करके गुणवत्तापूर्ण रिएक्ट एप्लिकेशन बनाएं

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

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