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 компонентін қолдануға болады.