Props in React JS in Hindi: React JS में, Props एक प्रकार की object होती है जहां एक टैग की attributes का मूल्य संग्रहीत किया जाता है। “Props” शब्द का अर्थ “गुण (properties)” है, और इसकी कार्यशीलता HTML attributes के समान है।
इस लेख में, आप React props के बारे में जानेंगे कि वे क्या हैं और कुशल सॉफ्टवेयर बनाने के लिए आप अपने कोड में उनका उपयोग कैसे कर सकते हैं। आप Props के सिंटैक्स को भी सीखेंगे और एक्शन में React props के कुछ कोड उदाहरण देखेंगे।
मुझे लगता है कि आप पहले से ही रिएक्ट में घटक (components) क्या है, JSX क्या होता है, React Install करें, और React State की मूल बातें को समझते हैं। यदि नहीं, तो पहले पढ़ लें।
Table of Contents
रिएक्ट में प्रॉप्स क्या है (What are Props in React JS)?
React में, Props शब्द गुणों (properties) के लिए है, जो किसी object के गुणों को संदर्भित करता है। ऐसा इसलिए है क्योंकि रिएक्ट में बनाए गए सभी तत्व (elements) जावास्क्रिप्ट ऑब्जेक्ट हैं। नतीजतन, किसी घटक में डेटा पास करना ऑब्जेक्ट के लिए गुण और मान बनाकर किया जाता है।
मूल रूप से, हम एक कंपोनेंट से दूसरे कंपोनेंट (parent कंपोनेंट से child कंपोनेंट्स) में डेटा पास करने के लिए रिएक्ट में प्रॉप्स का इस्तेमाल करते हैं। वे तब उपयोगी होते हैं जब आप चाहते हैं कि आपके App में डेटा का प्रवाह गतिशील हो।
रिएक्ट प्रॉप्स रीड-ओनली (केवल पढ़ने के लिए) होते हैं, यानी एक बार डेटा को उसके component में पास कर देने के बाद, इसे बदला नहीं जा सकता। किसी घटक में प्रॉप्स भेजने के लिए, HTML विशेषताओं के समान सिंटैक्स का उपयोग करें:
उदाहरण: कार तत्व में “brand” विशेषता जोड़ें:
const myElement = <Car brand="Ford" />;घटक को प्रॉप्स ऑब्जेक्ट के रूप में तर्क प्राप्त होता है:
उदाहरण: घटक में ब्रांड विशेषता का उपयोग करें:
import React from 'react';
import ReactDOM from 'react-dom/client';
function Car(props) {
return <h2>I am a { props.brand }!</h2>;
}
const myElement = <Car brand="Ford" />;
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(myElement);React Props का उद्देश्य (Purpose) क्या है?
रिएक्ट प्रॉप्स का एक बहुत ही महत्वपूर्ण कार्य (function) है; वे एक घटक से दूसरे घटक में डेटा पास करते हैं। वे एक चैनल प्रदान करते हैं जिसके माध्यम से घटक संचार करते हैं।
React Props का उपयोग शुरू करने से पहले आपको एक सरल नियम सीखने की आवश्यकता है, सभी घटकों को एक शुद्ध फ़ंक्शन (प्रॉप्स के संबंध में) के समान ही कार्य करना चाहिए।
इसका सीधा सा मतलब है कि एक React component को अपने किसी भी props के मूल्य को कभी नहीं बदलना चाहिए। यह सुनिश्चित करता है कि प्रॉप्स में केवल असम्बद्ध (uncompromised) डेटा हो।
Props का उपयोग कैसे करें (How to use props in React)
React में एक prop का उपयोग करने के लिए, आपको सबसे पहले prop को कार्यात्मक घटक के लिए एक विशेषता के रूप में पास करना होगा। तब आपके पास घटक के भीतर प्रोप और उसके डेटा तक पहुंच होगी।
उदाहरण के लिए, यदि आप एक task tracker बना रहे हैं, तो एक घटक जिसे आप रखना चाहते हैं वह है header। इस header component में अन्य तत्वों के साथ App का title शामिल होगा।
इसलिए, हेडर घटक app का title प्राप्त करने के लिए एक prop का उपयोग कर सकता है।
Using a Prop in the Header Component
function Header(props) {
return (
<div>
<h1> {props.title} </h1>
</div>
);
}
export default Header;उपरोक्त header घटक एक prop विशेषता लेता है और app के title के बारे में डेटा तक पहुंचने के लिए इसका उपयोग करता है।
अपने UI में इस header घटक को प्रदर्शित करने के लिए, आपको सबसे पहले इसे React की App.js फ़ाइल (हैडर घटक टैग का उपयोग करके) में सम्मिलित करना होगा।
The App.js File
import Header from './components/Header';
function App() {
return (
<div>
<Header title='Task Tracker' />
</div>
);
}
export default App;उपरोक्त कोड React की App.js फ़ाइल दिखाता है, जो UI को प्रस्तुत करता है। app घटक <header> टैग का उपयोग करके UI में header घटक प्रदर्शित करता है। यदि आप कोड को करीब से देखते हैं, तो आप देखेंगे कि <header> टैग में एक prop और एक prop वैल्यू है।
इसलिए, header घटक के पास अब एक title prop तक पहुंच है जिसे वह UI के अपने अनुभाग में उपयोग कर सकता है।
App.js फ़ाइल के साथ अपने रिएक्ट एप्लिकेशन को निष्पादित करना और ऊपर नया header घटक आपके ब्राउज़र में निम्नलिखित आउटपुट उत्पन्न करेगा:
React props can be passed conditionally
Props जो घटकों को पारित (passed) किए जाते हैं, उन्हें एक फ़ंक्शन में पारित किए गए तर्कों (arguments) के बारे में सोचा जा सकता है।
यदि prop values को एक निश्चित घटक पारित नहीं किया जाता है, तो कोई त्रुटि नहीं डाली जाएगी। इसके बजाय, उस घटक के भीतर जो प्रोप का undefined मान होगा।
यदि आप किसी component के prop के रूप में मान pass नहीं होने पर सतर्क रहना चाहते हैं, तो आप इन टूल का उपयोग करके prop-types या TypeScript जैसे टूल का उपयोग कर सकते हैं।
Default Props in ReactJS in Hindi
defaultProps एक react घटक गुण है जो आपको props तर्क के लिए डिफ़ॉल्ट मान सेट करने की अनुमति देता है। यदि प्रोप संपत्ति पारित हो जाती है, तो इसे बदल दिया जाएगा।
defaultProps को क्लास के लिए डिफॉल्ट प्रॉप्स सेट करने के लिए component class पर ही एक प्रॉपर्टी के रूप में परिभाषित किया जा सकता है।
आम तौर पर, Default props को सीधे हमारे कंपोनेंट के constructor को भेजा जा सकता है। इस प्रकार, प्रॉप्स को हमारे द्वारा ReactDOM.render में जोड़ने की आवश्यकता है।
Pass data from one component to another in React
Props यह भी है कि आप पैरामीटर के रूप में एक घटक से दूसरे घटक में डेटा कैसे पास करते हैं।
उदाहरण: गैराज घटक से कार घटक को “ब्रांड” गुण भेजें:
import React from 'react';
import ReactDOM from 'react-dom/client';
function Car(props) {
return <h2>I am a { props.brand }!</h2>;
}
function Garage() {
return (
<>
<h1>Who lives in my garage?</h1>
<Car brand="Ford" />
</>
);
}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Garage />);
स्टेट और प्रॉप्स में अंतर (State vs Props in Hindi)
React में state और props के बीच कुछ प्राथमिक अंतर हैं:
| State | Props | |
| Use Case | स्टेट का उपयोग उन घटकों के डेटा को संग्रहीत करने के लिए किया जाता है जिन्हें दृश्य में प्रस्तुत करना होता है। | प्रॉप्स का उपयोग डेटा और event handlers को children के घटकों को पास करने के लिए किया जाता है। |
| Mutability | State डेटा रखता है और समय के साथ बदल सकता है। | Props अपरिवर्तनीय हैं – एक बार सेट हो जाने पर, प्रॉप्स को बदला नहीं जा सकता। |
| Component | स्टेट का उपयोग केवल class components में किया जा सकता है। | प्रॉप्स का उपयोग functional और class दोनों घटकों में किया जा सकता है। |
| Updation | इवेंट हैंडलर आमतौर पर state को अपडेट करते हैं। | parent घटक children के घटकों के लिए सहारा सेट करता है। |
और इसके साथ ही, अब हम प्रॉप्स से परिचित हो गए हैं, जो रिएक्ट की सबसे महत्वपूर्ण अवधारणाओं में से एक है।
निष्कर्ष
असल में, Props ऑब्जेक्ट ReactJs में बहुत महत्वपूर्ण भूमिका निभाते हैं। हम अपने घटक के भीतर गतिशील डेटा का उपयोग एक घटक से दूसरे घटक में props के माध्यम से विशेषता को पारित करके कर सकते हैं।
चूंकि प्रॉप्स read-only कंपोनेंट होते हैं, प्रॉप्स जिन्हें हम parent component से पास कर रहे हैं, उन्हें child component में नहीं बदला जा सकता है जहां डेटा पास किया गया है।
मुझे उम्मीद है कि यह लेख “Props in React js in Hindi (Props का उपयोग कैसे करें)” आपको React Props की अवधारणा और उदाहरण के साथ उपयोग करने के तरीके को समझने में मदद करेगा।
