Истифодаи компонентҳо дар 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;

Дар натиҷа пас аз render кардан чунин натиҷа ба даст меояд:

html<div>
  <p>
    mahsulot
  </p>
</div>