Муқаддима ба компонентҳои React

Ба ҳар як сомона нигаред. Он аз маҷмӯи блокҳои мустақил иборат аст: сарлавҳа, панелҳои канорӣ, пойгоҳ, муҳтаво. Мумкин гуфт, ки ин блокҳо дар маъное, ки дар React фаҳмида мешавад, ҳамин компонентҳо мебошанд.

Агар ба ҳамон сарлавҳа нигарем, дар он чӣ чизро метавон ҷудо кард: блок бо логотип, блоки тамос, блок бо меню ва ғайра. Яъне, компонентҳо метавонанд аз дигар зеркомпонентҳо иборат бошанд.

Ба ҳамин монанд дар React кор идома дорад - сомона аз маҷмӯи компонентҳо сохта мешавад, ки ҳар яки онҳо метавонанд компонентҳои дигарро дар бар гиранд.

Дар React ҳар як компонент модули алоҳидаро ташкил медиҳад. Одатан таҳия аз компоненти асосӣ App оғоз меёбад, ки дигаронро дар бар мегирад.

Биёед сохтани компонентҳои навро машқ кунем.

Бигзор барои намуна ба мо компоненте лозим бошад, ки маълумоти маҳсулотро бароварда мегирад. Барои ин ба мо дар ҷойи корӣ лозим аст, ки файли Product.js-ро эҷод карда ва ба он рамзи зеринро илова кунем:

import React from 'react';

function Product() {
	return <p>
		маҳсулот
	</p>;
}

export default Product;

Тавре ки шумо мебинед, ҳоло компоненти мо абзацро бармегардонад бо матн. Дар дарсҳои оянда мо ин рамзерo тавре такмил медиҳем, ки маълумоти маҳсулот баргардонида шаванд. Вале ҳоло барои оғоз фақат абзасро бо матни аввалагии муайян гузорем.

Ҳоло биёед компоненти эҷодкардаи худро дар компоненти App чоп кунем. Бигзор ҳоло App-и мо рамзи зеринро дорад:

import React from 'react';

function App() {
	return <div>
		матн
	</div>;
}

export default App;

Барои оғоз ба мо лозим аст, ки компоненти эҷодкардаи мо бо маҳсулотро ворид кунем:

import React from 'react';
import Product from './Product'; // маҳсулотро ворид мекунем

function App() {
	return <div>
		матн
	</div>;
}

export default App;

Пас аз чунин воридот дар дохили компоненти App компоненти Product-ро истифода бурдан мумкин аст.