Uvod u React komponente

Pogledajmo bilo koji sajt. Sastoji se od skupa nezavisnih blokova: header, sidebar-ovi, footer, sadržaj. Može se reći da su ovi blokovi komponente u smislu u kome se podrazumeva u React-u.

Ako pogledamo isti header, šta u njemu možemo izdvojiti blok sa logotipom, blok kontakata, blok sa menijem i tako dalje. To znači da komponente mogu da se sastoje od drugih podkomponenti.

Na sličan način stvari stoje u React-u - sajt se gradi od skupa komponenti, koje za svoj red mogu da sadrže druge komponente.

U React-u svaka komponenta predstavlja zaseban modul. Razvoj obično počinje glavnom komponentom App, koja sadrži u sebi ostale.

Hajde da vežbamo kreiranje novih komponenti.

Neka nam za primer treba komponenta koja prikazuje podatke o proizvodu. Za ovo treba da u radnoj fascikli kreiramo fajl Product.js i dodamo u njega sledeći kod:

jsximport React from 'react';

function Product() {
  return <p>
    proizvod
  </p>;
}

export default Product;

Kao što vidite, trenutno naša komponenta vraća paragraf sa tekstom. U narednim lekcijama ćemo doraditi ovaj kod tako da se vraćaju podaci o proizvodu. Ali za sada za početak jednostavno ostavimo paragraf sa nekim početnim tekstom.

Hajde sada da prikažemo našu kreiranu komponentu u komponenti App. Neka trenutno naš App ima sledeći kod:

jsximport React from 'react';

function App() {
  return <div>
    tekst
  </div>;
}

export default App;

Za početak treba da importujemo kreiranu komponentu sa proizvodom:

jsximport React from 'react';
import Product from './Product'; // importujemo proizvod

function App() {
  return <div>
    tekst
  </div>;
}

export default App;

Nakon ovakvog importa unutar komponente App može se koristiti komponenta Product.