Увод у 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.