Вовед во компоненти на React

Погледнете го кој било веб-сајт. Тој се состои од збир на независни блокови: хедер, сајдбар, футер, содржина. Може да се каже дека овие блокови се компоненти во смисла во која се подразбира во React.

Ако погледнете истиот хедер, што во него може да се издвои блок со лого, блок со контакти, блок со мени и така натаму. Односно, компонентите може да се состојат од други пocomпоненти.

На сличен начин работите стојат во React - веб-сајтот се гради од збир на компоненти, кои пakoсвој ред може да содржат други компоненти.

Во React, секоја компонента претставува посебен модул. Обично развојот започнува со главната компонента App, која ги содржи во себе останатите.

Да вежбаме да креираме нови компоненти.

Нека за пример ни треба компонента која ќе ги прикажува податоците за производ. За ова, треба во работната папка да креираме датотека Product.js и да додадеме во неа следниов код:

import React from 'react';

function Product() {
	return <p>
		производ
	</p>;
}

export default Product;

Како што можете да видите, моментално нашата компонента враќа параграф со текст. Во следните лекции ќе го доработиме овoj код така што ќе се вратат податоците за производот. Но, за сега за почеток, едноставно ќе оставиме параграф со некој почетен текст.

Сега да ја прикажеме нашата креирана компонента во компонентата 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.