React JS Components in Hindi: React JS में घटक (components) मूल रूप से JSX कोड का एक टुकड़ा लौटाते हैं जो बताता है कि स्क्रीन पर क्या प्रस्तुत किया जाना चाहिए।
मूल रूप से, ReactJS में components आमतौर पर दो प्रकार के होते हैं, कार्यात्मक घटक (functional components) और वर्ग घटक (class components), इस लेख में, हम इन दोनों प्रकार के React JS के घटकों के बारे में भी बात करेंगे।
नोट: इस लेख को अच्छी तरह से समझने के लिए आपको पहले React JS क्या होता है और JSX की मूल बातें समझनी होंगी। और यहाँ से आपके कंप्यूटर में React JS को install करें।
Table of Contents
ReactJS में घटक क्या हैं (React Components in Hindi)?
React घटक (Components) मूल रूप से रिएक्ट की मौलिक इकाई और बिल्डिंग ब्लॉक्स को संदर्भित करते हैं। ReactJS का उपयोग करके विकसित किया जा रहा कोई भी एप्लिकेशन या वेबसाइट विभिन्न इकाइयों से बनी होगी जिन्हें components कहा जाता है।
वास्तव में, रिएक्ट में एक घटक को किसी भी रिएक्ट एप्लिकेशन की रीढ़ या अनिवार्यता के रूप में माना जाता है, इसके अलावा, यह हमें UI (user interface) को बहुत प्रभावी ढंग से बनाने या बनाने की अनुमति देता है।
रिएक्ट में प्रत्येक घटक एक ही संरचना (structure) में मौजूद होता है, लेकिन वे एक से दूसरे में स्वतंत्र रूप से काम करते हैं और सभी को एक मूल घटक में विलय कर देते हैं जो हमें पुन: उपयोग करने योग्य घटक बनाने का लाभ उठाने की अनुमति देता है, और उन्हें मिलाकर, यह एक अंतिम दृश्य पेज बनाता है।
मूल रूप से, प्रत्येक रिएक्ट घटक की अपनी संरचना, विधियाँ और साथ ही APIs होते हैं। वे आपकी आवश्यकता के अनुसार पुन: प्रयोज्य हो सकते हैं।
Component का उदाहरण (Example of React Components)
आप नीचे दी गई छवि में देख सकते हैं कि हमने “TutorialinHindi.com” होमपेज के UI को अलग-अलग घटकों (components) में विभाजित किया है:
ऊपरी बाएं कोने में TiH logo को एक व्यक्तिगत घटक के रूप में देखा जा सकता है, नेविगेशन बार को एक व्यक्तिगत घटक के रूप में देखा जा सकता है, साइडबार एक व्यक्तिगत घटक है, लेखों या पोस्ट की सूची भी एक व्यक्तिगत घटक है और अंत में, हम सभी को मर्ज कर सकते हैं इन व्यक्तिगत घटकों में से एक मूल घटक बनाने के लिए जो मुखपृष्ठ के लिए अंतिम UI होगा।
घटक UI के निर्माण के कार्य को बहुत आसान बनाते हैं। React.js में घटक पुन: प्रयोज्य (reusable) हैं। आप नीचे दिए गए अनुसार मूल्य को props में इंजेक्ट कर सकते हैं:
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}
const element = <Welcome name="Tutorial in Hindi" />;
ReactDOM.render(
element,
document.getElementById('root')
);name="Tutorial in Hindi" function Welcome(props) से {props.name} में वैल्यू देगा और एक कंपोनेंट लौटाएगा जिसने name="Tutorial in Hindi" से वैल्यू दी है। उसके बाद रिएक्ट तत्व को HTML में रेंडर करेगा।
React घटकों के प्रकार (Types of Components in ReactJs)
रिएक्ट में, मुख्य रूप से दो प्रकार के घटक (components) होते हैं:
- कार्यात्मक घटक (Functional component)।
- वर्ग घटक (Class Component)।
आइए इन दोनो ReactJS के components को अच्छी तरह समझते है –
1. Functional Component in React in Hindi
कार्यात्मक घटकों (Functional component) को केवल जावास्क्रिप्ट फ़ंक्शन लिखकर बनाया जा सकता है। विशिष्ट होने के लिए, कार्यात्मक घटक वे कार्य हैं जो Props को अंदर लेते हैं और JSX को वापस करते हैं।
Functional components पैरामीटर के रूप में डेटा प्राप्त करने में सक्षम हो भी सकते हैं और नहीं भी।
इसके अलावा, कार्यात्मक घटकों में जीवनचक्र के तरीके या स्थिति नहीं होती है, हालांकि उन्हें केवल रिएक्ट हुक को लागू करके जोड़ा जा सकता है। Functional घटकों को डीबग करना, पढ़ना और परीक्षण करना हमेशा आसान होता है।
- जावास्क्रिप्ट को समझने के लिए इस “Full JavaScript Tutorial” कोड पढ़ें।
2. Class Component in React in Hindi
वर्ग घटक (Class component) सभी प्रकारों में सबसे अधिक उपयोग किया जाने वाला घटक है। कारण यह है कि वर्ग घटक में Functional घटक के प्रत्येक कार्य को करने की क्षमता होती है और साथ ही साथ कुछ अतिरिक्त क्षमताएं भी होती हैं।
यह React, Props, state और जीवनचक्र विधियों के मुख्य कार्यों का कुशलता से उपयोग कर सकता है। हालांकि, कार्यात्मक घटकों की तुलना में वर्ग (class) घटक तुलनात्मक रूप से अधिक जटिल हैं।
डेटा को एक वर्ग घटक से दूसरे वर्ग घटक में बहुत आसानी से पारित किया जा सकता है।
Pure Components in ReactJS
रिएक्ट जेएस pure component क्लास वर्तमान स्थिति की तुलना करता है और नए props के साथ props की तुलना करता है और यह तय करने के लिए कहता है कि React component को खुद को फिर से प्रस्तुत करना चाहिए या नहीं।
मूल रूप से, Pure components सबसे सरल और तेज़ घटक हैं जिन्हें कोई लिख सकता है। चूंकि pure घटक अपने दायरे से बाहर विभिन्न चर (variable) की स्थिति को संशोधित या निर्भर नहीं करते हैं, इसलिए वे सरल functional घटकों को आसानी से बदल सकते हैं।
वे घटक जो केवल रेंडर फ़ंक्शन लौटाते हैं, शुद्ध घटकों के लिए सबसे उपयुक्त हैं। शुद्ध घटक का सबसे बड़ा उपयोग मामला अनुकूलन प्रदान करना है।
Pure components स्वचालित रूप से shouldComponentUpdate() का प्रबंधन करते हैं।
Higher-Order Components in React
Higher-order के घटक जिन्हें HOC के रूप में भी जाना जाता है, एक प्रतिक्रिया घटक की तरह कम और एक पैटर्न की तरह अधिक होते हैं, जो प्रतिक्रिया की संरचना प्रकृति का परिणाम होता है। एचओसी का मुख्य उपयोग अन्य घटकों के साथ तर्क साझा करना है।
React Nesting Components in Hindi
रिएक्ट के बारे में सबसे अच्छी चीजों में से एक यह है कि components घटक एक दूसरे के अंदर nest बना सकते हैं। यह सुविधा एक जटिल यूजर इंटरफेस बनाने में काफी मदद करती है।
यहां, child components को parent components के अंदर नेस्ट किया जाता है। एक दूसरे में घटकों के घोंसले को आंतरिक (internal) और बाहरी (external) कहा जाता है।
Export: जब किसी विशेष मॉड्यूल या फ़ाइल को निर्यात किया जाता है और दूसरे मॉड्यूल में उपयोग किया जाता है, तो इसे निर्यात (export) कहा जाता है।
Import: जब किसी विशेष मॉड्यूल या फ़ाइल को आयात किया जाता है और मौजूदा मॉड्यूल में उपयोग किया जाता है, तो इसे आयात (import) कहा जाता है।
निष्कर्ष
React JS Component कोड के स्वतंत्र और पुन: प्रयोज्य बिट हैं। वे जावास्क्रिप्ट कार्यों के समान उद्देश्य की पूर्ति करते हैं, लेकिन अलगाव में काम करते हैं और HTML लौटाते हैं।
मुख्य रूप से React components दो प्रकार के होते हैं, फंक्शन कंपोनेंट्स और क्लास कंपोनेंट्स, इस ट्यूटोरियल में हम React Components के साथ इसके प्रकार पर भी ध्यान केंद्रित किया है।
मुझे उम्मीद है कि यह लेख “React Components in Hindi – React JS Component क्या ह” आपको React घटकों के बारे में सब कुछ समझने में मदद करेगा।
