Reactда компонентлардан фойдаланиш

Ҳар бир уланган компонент ўзига мос JSX тегига эга. Мисол учун, бизда Product компоненти бор, демак унга куйидаги тег мос келади:

<Product />

Компонент тегининг номи бош ҳарф билан ёзилиши шарт, бу Reactга компонент чақириғини HTML тегидан фарқлаш имконини беради.

Шундай қилиб, куйида App компоненти ичида Product компонентидан фойдаланамиз, унга мос тегни ёзиб:

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

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

export default App;

Натижада рендер қилингандан сўнг куйидаги ҳосил бўлади:

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

User компонентини яратинг, у фойдаланувчилар маълумотларини чиқаради. Ҳозирча бу компонент айни бир матнни чиқарсин. Ушбу компонентдан App компоненти ичида фойдаланинг.