Loading...

React in Hindi – Props

  • Introduction to react props in Hindi
  • Examples of react props in Hindi

Introduction to React Props

पिछली tutorial में आपने components के बारे में पढ़ा और जाना की किस प्रकार की react में functional और class components create किए जाते है। इस tutorial में props के बारे में बताया गया है।

Props को properties भी कहा जाता है। यदि अभी तक आपने components के बारे में नहीं पढ़ा है तो पहले आपको उनके बारे में ज़रूर पढ़ लेना चाहिए।

Pass Data to A Component

किसी भी component में data pass करने के लिए react में props का प्रयोग किया जाता है। Functional components के संदर्भ में इन्हें आप किसी function को pass किए गए argument की तरह समझ सकते है और class component के संदर्भ में ये object create करते समय pass किए गये argument की तरह देखे जा सकते है।

Passed As Tag Attribute

जैसा की पहले components की tutorial में बताया गया था components tags के रूप में render (call) किए जाते है। हालाँकि की ये DOM tags नहीं होते है। इन्हें user defined tags कहा जाता है।

उदाहरण के लिए यदि आपके component का नाम myComponent है तो यह react DOM में <myComponent /> tag द्वारा render (call) किया जाएगा।

Components को जब tags के रूप में render किया जाता है तो props को उनके attributes के रूप में define किया जाता है।

उदाहरण के लिए यदि आप myComponent component को Name props pass करना चाहते है तो Name को उसके attribute के रूप define किया जाएगा। Attribute को pass की गयी value props की value होती है।

<myComponent Name="Jade Buddha" />

props is A Object

Components के अंदर किसी props को access करने के लिए props object का प्रयोग किया जाता है।

props.Name

Functional component में सिर्फ़ यही syntax use होता है। लेकिन यदि आप class component में props को access कर रहे है तो इसके लिए आपको this object का भी प्रयोग करना होगा।

this.props.Name

Props Are Read Only

Props किसी component का हिस्सा नहीं होते है। ये component को बाहर से pass किए जा सकते है। इसलिए ये component के द्वारा किसी भी प्रकार change नहीं किए जा सकते है। Props read only होते है।

React में एक strict rule है की सभी components उनकी props के संदर्भ में pure functions की तरह behave करने चाहिए।

एक pure function वह function होता है जो उसको pass किए गए arguments को किसी प्रकार भी modify नहीं करता है और same input दिए जाने पर हर बार same ही output देता है।

Pure function की तरह components को code किए जाने का अर्थ है की component के अंदर किसी भी प्रकार से props को change नहीं किया जाना चाहिए।

Passing Props to Other Components

आप एक component से दूसरे component को props pass कर सकते है। इसके लिए आप first component में दूसरे component को render करते है।

<html>

<head>

<script src= “https://unpkg.com/react@16/umd/react.production.min.js"></script>

<script src= “https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>

<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>

</head>

<body>

<div id="container"> </div>


<script type="text/Babel">

function FirstComponent(props){ 
  return(
    <div>
          <h1>First Component Props are: {props.firstName}</h1>
          <SecondComponent lastName="Sharma" /> 
   </div>
  );
}
            
function SecondComponent(props){
  return(
          <h1>Second Component Props are: {props.lastName}</h1>
  );    
}

const ele = <FirstComponent firstName="Vipin" />;

ReactDOM.render(ele,document.getElementById("root"));


</script>

</body>

</html>