React-тағы компоненттік тәсілге кіріспе

Бізде сайт бар делік. Бұл сайтта біз кейбір блоктарды бөліп көре аламыз: хедер, контент, сайдбар, футер және т.б. Әрбір блокты кішірек подблоктарға бөлуге болады. Мысалы хедерде әдетте логотипті, мәзірді, байланыс блогын және т.б. бөліп көруге болады.

React-та әрбір мұндай блок компонент деп аталады. Әрбір компонент өзінің ішінде кішірек компоненттерді қамтуы мүмкін, олар өз кезегінде одан да кішірек компоненттерді қамтыуы мүмкін және т.б.

React-тағы әрбір компонентке src бумасында орналасқан ES6 модулі сәйкес келеді. Модуль файлының аты үлкен әріппен жазылады және сол модульдің кодында орналасқан функцияға сәйкес келуі керек.

Мысалы, App.js атауымен файл өзінің ішінде App функциясын қамтуы керек:

import React from 'react';

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

export default App;

Компоненттердің бірі негізгі болуы керек - басқа компоненттер қосылатын компонент. React-та әдепкі бойынша мұндай компонент App компоненті болады. Бұл компонентке басқа компоненттер қосылады. Мұны қалай жасау керектігін - біз оқулықтың келесі бөлімдерінде қарастырамыз.