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>