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>