Reactда компонент ёндашувига кириш

Фарз қилайлик, бизнинг веб-сайтимиз бор. Бу веб-сайтда биз айрим блокларни ажратишимиз мумкин: сарлавҳа, контент, ён панел, футер ва ҳоказо. Ҳар бир блокни кичикрок қисмларга бўлиш мумкин. Масалан сарлавҳада одатда логотип, меню, алақа блоги ва ҳоказоларни ажратиш мумкин.

Reactда ҳар бир бундай блок компонент деб аталади. Ҳар бир компонент ўз ичида кичикрок компонентларни ўз ичига олиши мумкин, улар ўз навбатида янада кичикрокларни ва ҳоказо.

Reactдаги ҳар бир компонентга src папкасида жойлашган ES6 модули мос келади. Модул файлининг номи бош ҳарф билан ёзилади ва ўша модул кодида жойлашган функцияга мос келиши керак.

Масалан, App.js номли файл ўз ичида App функциясини ўз ичига олиши керак:

import React from 'react';

function App() {
	// компонент коди
}

export default App;

Компонентларнинг бири асосий бўлиши керак - бу бошқа компонентлар қўшиладиган компонент. Reactда сунъий холда бундай компонент App компоненти бўлади. Ушбу компонентга бошқа компонентлар улангани. Бу қандай амалга оширилишини - биз кейинроқ ўқув қўлланмада ўрганамиз.