Увод у React компоненте

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

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

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

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

Хајде да вежбамо креирање нових компоненти.

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

jsximport React from 'react';

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

export default Product;

Као што видите, тренутно наша компонента враћа потпасањ са текстом. У наредним лекцијама ћемо дорадити овај код тако да се враћају подаци о производу. Али за сада, за почетак, оставимо само потпасањ са неким почетним текстом.

Хајде сада да испишемо нашу креирану компоненту у компоненти App. Нека тренутно наш App има следећи код:

jsximport React from 'react';

function App() {
  return <div>
    текст
  </div>;
}

export default App;

За почетак нам треба да увеземо креирану компоненту са производом:

jsximport React from 'react';
import Product from './Product'; // увозимо производ

function App() {
  return <div>
    текст
  </div>;
}

export default App;

Након оваквог увоза унутар компоненте App може се користити компонента Product.