"30 दिनों के रिएक्टजेएस" चुनौती के चौथे दिन में आपका स्वागत है! आज, हम कंपोनेंट्स और प्रॉप्स—किसी भी रिएक्ट एप्लिकेशन के बिल्डिंग ब्लॉक्स का पता लगाने जा रहे हैं। इन अवधारणाओं को समझने से आप अपने यूआई को पुन: प्रयोज्य, स्वतंत्र टुकड़ों में विभाजित कर सकेंगे।

घटक क्या हैं?

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

रिएक्ट में दो मुख्य प्रकार के घटक हैं:

कार्यात्मक घटक: ये जावास्क्रिप्ट फ़ंक्शन हैं जो JSX लौटाते हैं। वे पढ़ने में सरल और आसान हैं।

क्लास घटक: ये ES6 वर्ग हैं जो React.Component से विस्तारित होते हैं। उनके पास राज्य और जीवनचक्र विधियों जैसी अधिक विशेषताएं हैं लेकिन आधुनिक रिएक्ट विकास में कम आम हैं।

उदाहरण: एक बटन घटक

आइए एक सरल बटन घटक बनाएं:

function Button() {
  return (
    Click me!
  );
}

यह बटन घटक एक कार्यात्मक घटक है जो "मुझे क्लिक करें!" पाठ के साथ एक बटन तत्व लौटाता है।

घटक क्यों मायने रखते हैं

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

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

प्रॉप्स क्या हैं?
प्रॉप्स ("गुण" का संक्षिप्त रूप) वह तरीका है जिससे आप डेटा को एक घटक से दूसरे घटक में स्थानांतरित करते हैं। वे फ़ंक्शन तर्कों के समान हैं और किसी घटक को अनुकूलित करने के लिए उनका उपयोग किया जा सकता है।

उदाहरण के लिए, मान लें कि हम एक बटन घटक बनाना चाहते हैं जो प्राप्त प्रॉप्स के आधार पर अलग-अलग टेक्स्ट प्रदर्शित कर सके:

function Button(props) {
  return (
    {props.label}
  );
}

अब, जब आप बटन घटक का उपयोग करते हैं, तो आप इसके टेक्स्ट को अनुकूलित करने के लिए एक लेबल प्रोप पास कर सकते हैं:

function App() {
  return (
    

      
      
    
  );
}

यहां, बटन घटक का उपयोग दो बार किया जाता है, लेकिन अलग-अलग लेबल के साथ: "सबमिट करें" और "रद्द करें"।

प्रॉप्स का महत्व

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

विटे के साथ घटकों और प्रॉप्स की स्थापना

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

यहां बताया गया है कि आप अपने प्रोजेक्ट की संरचना कैसे कर सकते हैं:

1. एक नया घटक बनाएं: अपने src फ़ोल्डर में एक नई फ़ाइल, Button.jsx बनाएं और वहां अपने बटन घटक को परिभाषित करें।
2. अपने ऐप में घटक का उपयोग करें: अपनी App.jsx फ़ाइल में, बटन घटक आयात करें और इसे विभिन्न प्रॉप्स के साथ उपयोग करें।

यह सब एक साथ रखना

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

कल, हम राज्य और जीवनचक्र विधियों पर विचार करेंगे, जो आपके घटकों को गतिशील डेटा प्रबंधित करने और समय के साथ परिवर्तनों पर प्रतिक्रिया करने की अनुमति देगा।