Vaša prva komponenta

Komponente: Blokovi za pravljenje UI-a

HTML nam omogućava da na web-u kreiramo bogato struktuirane dokumente pomoću ugrađenog skupa tag-ova poput <h1> ili <li>:

<article>
  <h1>Moja prva komponenta</h1>
  <ol>
    <li>Komponente: Blokovi za pravljenje UI-a</li>
    <li>Definisanje komponente</li>
    <li>Upotreba komponente</li>
  </ol>
</article>

Ovaj markup predstavlja ovaj članak <article>, njegov naslov <h1> i (skraćenu) tabelu sa sadržajem kao ordered list-u <ol>. Markup poput ovog, u kombinaciji sa CSS-om za stilizovanje i JavaScript-om za interaktivnost, stoji iza svakog sidebar-a, avatar-a, modal-a, dropdown-a, odnosno iza svakog dela UI-a kojeg vidite na web-u.

React vam omogućava da kombinujete markup, CSS i JavaScript u custom “komponente”, reusable UI elemente za vašu aplikaciju. Kod za tabelu sadržaja koji ste videli gore može biti pretvoren u <TableOfContents /> komponentu koju možete renderovati na svakoj stranici. Ispod haube, i dalje će se koristiti isti HTML tag-ovi poput <article>, <h1>, itd.

Kao i sa HTML tag-ovima, komponente možete sastavljati, praviti im redosled i ugnježdavati ih kako bi dizajnirali cele stranice. Na primer, stranica za dokumentaciju koju upravo čitate je napravljena pomoću React komponenata:

<PageLayout>
  <NavigationHeader>
    <SearchBar />
    <Link to="/docs">Dokumentacija</Link>
  </NavigationHeader>
  <Sidebar />
  <PageContent>
    <TableOfContents />
    <DocumentationText />
  </PageContent>
</PageLayout>

Kako vaš projekat raste, uvidećete da dobar deo dizajna može biti sastavljen upotrebom komponenata koje ste već napisali. To može ubrzati vaš razvoj. Tabela sadržaja od gore može biti dodata bilo gde pomoću <TableOfContents />! Možete čak i započeti projekat velikom brzinom uz pomoć ogromnog broja komponenata dostupnih u React-ovoj open source zajednici poput Chakra UI i Material UI.

Definisanje komponente

Tradicionalno, developeri su tokom pravljenja web stranica prvo kreirali sadržaj, a nakon toga su ga obogatili interakcijom pomoću JavaScript-a. Ovo je radilo dobro dok je interakcija bila poželjna na web-u. Danas je ona očekivana na većini sajtova i u svim aplikacijama. React stavlja interakciju na prvo mesto, iako još uvek koristi istu tehnologiju: React komponenta je JavaScript funkcija koju možete obogatiti sa markup-om. Ovako to izgleda (možete menjati primer ispod):

A ovako možete napraviti komponentu:

Korak 1: Export-ovati komponentu

export default prefiks je standardna JavaScript sintaksa (nije specifično za React). Omogućava vam da obeležite glavnu funkciju u fajlu kako biste je mogli import-ovati u drugim fajlovima. (Više o import-ovanju u Import-ovanje i export-ovanje komponenata!)

Korak 2: Definisati funkciju

Pomoću function Profile() { } definišete JavaScript funkciju čije je ime Profile.

Korak 3: Dodati markup

Komponenta vraća <img /> tag sa src i alt atributima. <img /> je napisan kao HTML, ali je, ispod haube, zapravo JavaScript! Ova sintaksa se naziva JSX i omogućava vam da ugradite markup unutar JavaScript-a.

Return iskazi mogu biti napisani u jednoj liniji, kao u ovoj komponenti:

return <img src="https://i.imgur.com/MK3eW3As.jpg" alt="Katherine Johnson" />;

Ako vaš markup nije u istoj liniji kao i ključna reč return, morate koristiti zagrade:

return (
  <div>
    <img src="https://i.imgur.com/MK3eW3As.jpg" alt="Katherine Johnson" />
  </div>
);

Upotreba komponente

Kada ste definisali vašu Profile komponentu, možete je ugnjezditi unutar ostalih komponenata. Na primer, možete export-ovati Gallery komponentu koja koristi više Profile komponenata:

Šta pretraživač vidi

Primetite razliku u veličini slova:

• <section> je napisano malim slovima, pa React zna da se to odnosi na HTML tag.
• <Profile /> počinje velikim slovom P, pa React zna da želimo koristiti našu komponentu po imenu Profile.

Profile sadrži još više HTML-a: <img />. Na kraju, ovo je ono što pretraživač vidi:

<section>
  <h1>Zadivljujući naučnici</h1>
  <img src="https://i.imgur.com/MK3eW3As.jpg" alt="Katherine Johnson" />
  <img src="https://i.imgur.com/MK3eW3As.jpg" alt="Katherine Johnson" />
  <img src="https://i.imgur.com/MK3eW3As.jpg" alt="Katherine Johnson" />
</section>

Ugnježdavanje i organizacija komponenata

Komponente su obične JavaScript funkcije, tako da možete imati više komponenata u jednom fajlu. Ovo je zgodno kada su komponente relativno male ili su usko povezane međusobno. Ako fajl postane prenatrpan, uvek možete pomeriti Profile u poseban fajl. Naučićete kako se to radi ubrzo na stranici o import-ovanju.

Pošto su Profile komponente renderovane unutar Gallery-a (i to više puta), možemo reći da je Gallery roditeljska komponenta koja renderuje svaki Profile kao “dete”. Ovo je deo React-ove magije: komponentu definišete jednom, a onda je koristite koliko god i gde god želite.

export default function Gallery() {
  // 🔴 Nikada nemojte definisati komponentu unutar druge komponente!
  function Profile() {
    // ...
  }
  // ...
}

export default function Gallery() {
  // ...
}

// ✅ Definišite komponente na najvišem nivou unutar fajla
function Profile() {
  // ...
}