React компонентларига кириш

Хар кандай веб-саҳифага кўзимизни ташлайлик. У бир нечта мустақил блоклардан ташкил топган: саҳифа боши, ён панеллар, саҳифа оёги, контент. Демак, Reactда назарда тутилганидек, мана шу блоклар компонентлардир.

Худди шу саҳифа бошнии ўзига қараб кўрсак, унда логотип блоги, алақа блоги, меню блоги ва ҳоказоларни ажратиб олиш мумкин. Яъни компонентлар бошқа қисм компонентлардан ташкил топгани мумкин.

Reactда ҳам иш шу тарзда олади - веб-саҳифа компонентлар тўпламидан курилади, улар ўз навбатида бошқа компонентларни ўз ичига олиши мумкин.

Reactда ҳар бир компонент алохида модульдир. Оддата, ишлаб чиқиш асосий компонент App дан бошланади, у ўзида бошқаларни ўз ичига олади.

Келинг, янги компонентлар яратишда машқ қилайлик.

Мисол учун бизга маҳсулот маълумотларини чиқарувчи компонент керак бўлсин. Бунинг учун бизга ишчи жилдда Product.js файлини яратиб, уга куйидаги кодни қўшиш керак:

import React from 'react';

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

export default Product;

Кўриниб турганидек, ҳозирча бизнинг компонентимиз матн билан абзацни қайтармокда. Кейинги дарсларда биз маҳсулот маълумотлари қайтарилиши учун бу кодни такомиллаштирамиз. Лекин ҳозирча бошланғич матн билан абзацни қолдирамиз.

Келинг, энди яратган компонентимизни 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 компонентидан фойдаланиш мумкин.