02. Vrste komponenti, prva komponenta - kristijan-perkovic96/Osnove-reacta GitHub Wiki

U Reactu postoje dvije vrste komponenti: klasne i funkcijske.

Ne postoji točno pravilo po kojemu ćete odlučiti koju vrstu komponente koristiti za kreiranje vaše aplikacije iz razloga jer obje komponente mogu služiti za sve funkcionalnosti, ali će se to postići korištenjem različite sintakse. Primjer nam može biti state unutar klasne komponente koji predstavlja veliki objekt, dok u funkcijskoj komponenti možemo koristiti hook useState. Oba pristupa nam omogućavaju globalno dostupnu varijablu unutar komponente u koju možemo pohraniti neku vrijednost.

Kao primjer ćemo napraviti dvije komponente te će jedna od njih biti klasna, dok će druga biti funkcijska. Obje komponente će ispisivati tekst :"Prva komponenta".

Klasna komponenta:

Funkcijska komponenta:

App.js:

Kao što možete primijetiti unutar return(); pišemo što želimo prikazati na ekranu.

Napomena: return može prikazati samo jedan element!!

Ukoliko imate više elemenata za prikaz možete ih staviti unutar div elementa kao što je prikazano u App.js. Za prikaz svake komponente mora se definirati njezin export. Ukoliko navedete kao u ovim primjerima export default NazivKomponente tada u komponenti u kojoj želite koristiti tu komponentnu dovoljno je napisati import NazivKomponente from 'putanja do komponente'; Ukoliko ne navedete riječ default tada morate koristiti {} da biste ispravno importali komponentu,odnostno import {NazivKomponente} from 'putanja do komponente'; Primjeri navedenih importova je moguće vidjeti u App.js gdje se nalaze prvi primjeri importa, dok primjer drugog importa je moguće vidjeti unutar klasne komponente prilikom importa Component kojega mora extendati klasna komponenta.