React में कंपोनेंट्स का उपयोग

प्रत्येक कनेक्टेड कंपोनेंट अपने JSX टैग से मेल खाता है। उदाहरण के लिए, हमारे पास एक कंपोनेंट है Product, जिसका अर्थ है कि यह निम्नलिखित टैग से मेल खाता है:

jsx<Product />

कंपोनेंट टैग का नाम बड़े अक्षर से लिखना अनिवार्य है, ताकि React कंपोनेंट कॉल और HTML टैग के उपयोग के बीच अंतर कर सके।

तो, आइए App कंपोनेंट के अंदर Product कंपोनेंट का उपयोग करें, इसके संगत टैग लिखकर:

jsximport React from 'react';
import Product from './Product';

function App() {
  return <div>
    <Product />
  </div>;
}

export default App;

परिणामस्वरूप, रेंडरिंग के बाद निम्नलिखित प्राप्त होगा:

html<div>
  <p>
    product
  </p>
</div>