प्रतिक्रिया घटक

अवयव उन कार्यों की तरह हैं जो HTML तत्वों को लौटाते हैं।

प्रतिक्रिया घटक

घटक कोड के स्वतंत्र और पुन: प्रयोज्य बिट्स हैं। वे जावास्क्रिप्ट कार्यों के समान उद्देश्य की पूर्ति करते हैं, लेकिन अलगाव में काम करते हैं और HTML लौटाते हैं।

कंपोनेंट्स दो प्रकार के होते हैं, क्लास कंपोनेंट्स और फंक्शन कंपोनेंट्स, इस ट्यूटोरियल में हम फंक्शन कंपोनेंट्स पर ध्यान केंद्रित करेंगे।

अपना पहला घटक बनाएं

रिएक्ट कंपोनेंट बनाते समय, कंपोनेंट का नाम अपर केस लेटर से शुरू होना चाहिए ।

कक्षा घटक

एक वर्ग घटक में extends React.Componentकथन शामिल होना चाहिए। यह कथन React.Component के लिए एक विरासत बनाता है, और आपके घटक को React.Component के कार्यों तक पहुंच प्रदान करता है।

घटक को एक render()विधि की भी आवश्यकता होती है, यह विधि HTML लौटाती है।

class Car extends React.Component {
  render() {
    return <h2>Hi, I am a Car!</h2>;
  }
}

समारोह घटक

यहां ऊपर जैसा ही उदाहरण दिया गया है, लेकिन इसके बजाय फ़ंक्शन घटक का उपयोग करके बनाया गया है।

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

function Car() {
  return <h2>Hi, I am a Car!</h2>;
}

एक घटक का प्रतिपादन

अब आपके रिएक्ट एप्लिकेशन में कार नामक एक घटक है, जो एक <h2>तत्व देता है।

अपने एप्लिकेशन में इस घटक का उपयोग करने के लिए, सामान्य HTML के समान सिंटैक्स का उपयोग करें: <Car />

ReactDOM.render(<Car />, document.getElementById('root'));

रंगमंच की सामग्री

घटकों के रूप में पारित किया जा सकता है props, जो गुणों के लिए खड़ा है।

प्रॉप्स फ़ंक्शन तर्कों की तरह हैं, और आप उन्हें घटक में विशेषताओं के रूप में भेजते हैं।

propsआप अगले अध्याय में इसके बारे में और जानेंगे ।

function Car(props) {
  return <h2>I am a {props.color} Car!</h2>;
}

ReactDOM.render(<Car color="red"/>, document.getElementById('root'));

घटकों में अवयव

हम अन्य घटकों के अंदर घटकों का उल्लेख कर सकते हैं:

function Car() {
  return <h2>I am a Car!</h2>;
}

function Garage() {
  return (
    <>
      <h1>Who lives in my Garage?</h1>
      <Car />
    </>
  );
}

ReactDOM.render(<Garage />, document.getElementById('root'));

फाइलों में अवयव

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

ऐसा करने के लिए, फ़ाइल एक्सटेंशन के साथ एक नई फ़ाइल बनाएं .js और उसके अंदर कोड डालें:

function Car() {
  return <h2>Hi, I am a Car!</h2>;
}

export default Car;

कार घटक का उपयोग करने में सक्षम होने के लिए, आपको फ़ाइल को अपने आवेदन में आयात करना होगा।

import React from 'react';
import ReactDOM from 'react-dom';
import Car from './Car.js';

ReactDOM.render(<Car />, document.getElementById('root'));

function (props) {
  return <h2>Hi, I'm {props.name}</h2>;
}