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

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

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

Компоненти User созед, ки додаҳои корбаронро баронад. Ҳоло бигзор ин компонент танҳо як матни дилхоҳро баронад. Ин компонентро дар компоненти App истифода баред.