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 компонентин колдонсо болот.