Components (कम्पोनेन्टस)

कम्पोनेन्ट भनेको रियाक्टजेएस (ReactJS) मा जाभास्क्रीफ्ट (JavaScript) मा एउटा क्ललासको मेथड (फङ्गसन) जस्तै हो । कुनै एउटा कम्पोनेन्टमा अर्को कम्पोनेन्ट कल गरीन सक्छ । उदारणको लागि एउटा कमेन्ट भन्ने कम्पोनेन्ट हुन सक्छ जुन कम्पोनेन्ट भित्र अथर (कमेन्ट अथर) भन्ने अर्को कम्पोनेन्ट पनि रहन सक्छ ।

क्लास कम्पोनेन्टमा अनिवार्य रुपमा रेन्डर मेथड हुने गर्दछ । यही रेन्डर (render) मैथडले रियाक्ट ईलेमेन्ट रिटर्न गर्ने गर्दछ । अर्को शब्दमा भन्दा प्रत्येक कम्पोनेन्टको अनिवार्य रुपमा आउटपुट देखीन पर्दछ । र यो आउटपुट क्लास कम्पोनेन्टमा रेण्डर मेथडले गर्ने गर्दछ ।

एङ्गुलरजेएस (AngularJS) मा क्लासको कन्सेप्ट थियो भने रियाक्ट(ReactJS) मा कम्पोनेन्टको कन्सेप्ट छ ।

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

क्लास कम्पोनेन्ट (Class component)

React.Component को एक्सटेन्टडेड क्लासलाई क्लास कम्पोनेन्ट भनिन्छ । माथीको उदारणमा वेलकम भन्ने एउटा क्लास कम्पोनेन्ट हो । क्लास कम्पोनेन्टमा रेण्डर मेथड हुने गर्दछ । क्लास कम्पोनेन्टमा रेण्डर मेथडको अतिरिक्त आफ्नो छुट्टै मेथड पनि बनाउन सकिन्छ । जसलाई रेण्डर मैथड भित्र पनि लजिक प्रयोग गरी डिस्प्ले गराउन सकिन्छ ।

फङ्गसनल कम्पोनेन्ट (Functional Component)

रियाक्टमा फङ्गसनल कम्पोनेन्ट भनेको जाभास्क्रीप्टको फङ्गसन जस्तै हो जसले आर्गुमेन्टको रुपमा प्रप्सलाई एसेप्ट गर्छ भने रियाक्ट ईलेमेन्ट रिटर्न गर्ने गर्दछ । फङ्गसनल कम्पोनेन्टमा आर्गुमेन्टको रुपमा प्रप्स पास गर्न सकिन्छ ।

function Parentheses() {
  return (
    <h1>
      {" "}
      As usual we can call the function using name of the function followed by
      Parentheses{" "}
    </h1>
  );
}
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(Parentheses());

रेण्डरिङ्ग कम्पोनेन्ट (Rendering Component)

माथीको उदारणमा Welcome भन्ने एउटा (क्लास) कम्पोनेन्ट छ जसमा <h1> ट्याग भित्र कुनै ब्यक्तीको नाम पास गरेर रेण्डर गर्न (ब्राउजरमा देखाउन) सकिन्छ ।

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<Welcome name="Aabrit" />);

माथिको उदारण सहित बुझ्नको लागी यहाँ क्लिक गर्नुहोस ।