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:
import 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:
import React from 'react';
function App() {
return <div>
tekst
</div>;
}
export default App;
Za početak treba da importujemo kreiranu komponentu sa proizvodom:
import 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.