Learn React
Describing the UI

Import-ovanje i export-ovanje komponenata

Magija komponenata leži u njihovoj upotrebljivosti: možete kreirati komponente koje se sastoje iz drugih komponenata. Međutim, ugnježdavanjem novih i novih komponenata, često ima smisla započeti njihovu podelu u različite fajlove. Ovo vam omogućava da fajlove lakše skenirate i koristite komponente na više mesta.

Naučićete:

  • Šta je to fajl root komponente
  • Kako da import-ujete i export-ujete komponentu
  • Kada da koristite default i imenovane import-e i export-e
  • Kako da import-ujete i export-ujete više komponenata iz jednog fajla
  • Kako da podelite komponente u više fajlova

Fajl root komponente

U Vaša prva komponenta, napravili ste Profile komponentu i Gallery komponentu koja je renderuje:

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

export default function Gallery() {
  return (
    <section>
      <h1>Zadivljujući naučnici</h1>
      <Profile />
      <Profile />
      <Profile />
    </section>
  );
}

One trenutno žive u fajlu root komponente, koji se u ovom primeru zove App.js. U zavisnosti od vaših podešavanja, root komponenta može biti i u drugom fajlu. Ako koristite neki framework sa fajl rutiranjem, kao što je Next.js, vaša root komponenta će biti drugačija na svakoj stranici.

Export-ovanje i import-ovanje komponente

Šta ako želite da promenite landing stranicu i prikažete listu naučnih knjiga na njoj? Ili da postavite sve profile na neko drugo mesto? Ima smisla pomeriti Gallery i Profile izvan fajla root komponente. To će im omogućiti da budu modularnije i reusable. Komponentu možete pomeriti u tri koraka:

  1. Napravite novi JS fajl gde ćete smestiti komponente.
  2. Export-ujte vašu funkciju komponente iz tog fajla (koristeći ili default ili imenovane export-e).
  3. Import-ujte ih u fajl gde ćete ih koristiti (pomoću odgovarajuće tehnike import-ovanja default ili imenovanih export-a).

Sada su i Profile i Gallery pomereni iz App.js u fajl pod imenom Gallery.js. Sada možete promeniti App.js da import-uje Gallery iz Gallery.js:

import Gallery from './Gallery.js';

export default function App() {
  return (
    <Gallery />
  );
}

Primetite da je primer sada razdvojen na dva fajla:

  1. Gallery.js:
    • Definiše Profile komponentu koja se koristi samo u okviru istog fajla i nije export-ovana.
    • Export-uje Gallery komponentu kao default export.
  2. App.js:
    • Import-uje Gallery kao default import iz Gallery.js.
    • Export-uje root App komponentu kao default export.

Napomena

Možete se susresti sa fajlovima koji ne koriste .js ekstenziju:

import Gallery from './Gallery';

I './Gallery.js' i './Gallery' će raditi u React-u, ali je prvi način bliži tome kako native ES moduli rade.

Deep Dive

Default vs imenovani export-i

Postoje dva primarna načina za export-ovanje vrednosti u JavaScript-u: default export-i i imenovani export-i. Naši primeri su do sad koristili samo default export-e. Možete koristiti jedan ili oba načina u istom fajlu. Fajl ne sme imati više od jednog default export-a, ali može imati koliko god želite imenovanih export-a.

Default i imenovani export-i

Način na koji export-ujete komponentu diktira način za njeno import-ovanje. Dobićete grešku ako pokušate da import-ujete default export na isti način kao i imenovani export! Ova tabela vam može pomoći da bolje razumete:

SintaksaExport iskazImport iskaz
Defaultexport default function Button() {}import Button from './Button.js';
Imenovanoexport function Button() {}import { Button } from './Button.js';

Kada koristite default import, možete staviti bilo koje ime nakon import-a. Na primer, možete napisati import Banana from './Button.js', ali ćete i dalje dobiti isti default export. Nasuprot tome, sa imenovanim import-ima, ime mora da se poklapa na obe strane. Zato se i nazivaju imenovani import-i!

Ljudi često koriste default export-e ako fajl export-uje samo jednu komponentu, a imenovane export-e ako fajl export-uje više komponenata i vrednosti. Koji god stil kodiranja da preferirate, uvek dajte smislena imena funkcijama komponenata i fajlovima u kojima se nalaze. Komponente bez imena poput export default () => {} ne bi trebale da se koriste jer otežavaju debug-ovanje.

Export-ovanje i import-ovanje više komponenata iz istog fajla

Šta ako želite prikazati samo jedan Profile umesto galerije? Možete export-ovati Profile komponentu takođe. Ali Gallery.js već ima default export, a ne možete imati dva default export-a. Možete kreirati novi fajl sa default export-om, ili možete dodati imenovani export za Profile. Fajl može imati samo jedan default export, ali može imati bezbroj imenovanih export-a!

Napomena

Da bi izbegli zabunu između default i imenovanih export-a, neki timovi odluče da se drže jednog načina (default ili imenovani), ili izbegavaju upotrebu oba u istom fajlu. Koristite ono što vam najviše odgovara!

Prvo, export-ujte Profile iz Gallery.js upotrebom imenovanog export-a (bez ključne reči default):

export function Profile() {
  // ...
}

Nakon toga, import-ujte Profile iz Gallery.js u App.js upotrebom imenovanog import-a (sa vitičastim zagradama):

import { Profile } from './Gallery.js';

Na kraju, renderujte <Profile /> u App komponenti:

export default function App() {
  return <Profile />;
}

Sada Gallery.js sadrži dva export-a: default Gallery export i imenovani Profile export. App.js ih oba import-uje. Probajte da menjate <Profile /> i <Gallery /> naizmenično:

import Gallery from './Gallery.js';
import { Profile } from './Gallery.js';

export default function App() {
  return (
    <Profile />
  );
}

Sada koristite kombinaciju default i imenovanih export-a:

  • Gallery.js:
    • Export-uje Profile komponentu kao imenovani export pod imenom Profile.
    • Export-uje Gallery komponentu kao default export.
  • App.js:
    • Import-uje Profile kao imenovani import pod imenom Profile iz Gallery.js.
    • Import-uje Gallery kao default import iz Gallery.js.
    • Export-uje root App komponentu kao default export.

Recap

Na ovoj stranici ste naučili:

  • Šta je to fajl root komponente
  • Kako da import-ujete i export-ujete komponentu
  • Kada i kako da koristite default i imenovane import-e i export-e
  • Kako da export-ujete više komponenata iz istog fajla

Probajte da rešite par izazova

Izazov 1 od 1:
Deliti komponente dalje

Trenutno, Gallery.js export-uje i Profile i Gallery, što je malo zbunjujuće.

Pomerite Profile komponentu u zaseban fajl Profile.js, a nakon toga izmenite App komponentu da renderuje i <Profile /> i <Gallery /> komponente jednu za drugom.

Možete koristiti i default i imenovani export za Profile, ali se potrudite da iskoristite odgovarajuću import sintaksu i u App.js i u Gallery.js! Možete se osloniti na već spomenutu tabelu:

SintaksaExport iskazImport iskaz
Defaultexport default function Button() {}import Button from './Button.js';
Imenovanoexport function Button() {}import { Button } from './Button.js';
// Pomerite me u Profile.js!
export function Profile() {
  return (
    <img
      src="https://i.imgur.com/QIrZWGIs.jpg"
      alt="Alan L. Hart"
    />
  );
}

export default function Gallery() {
  return (
    <section>
      <h1>Zadivljujući naučnici</h1>
      <Profile />
      <Profile />
      <Profile />
    </section>
  );
}

Nakon što uspete sa jednim tipom export-a, napravite da radi i sa drugim.

PreviousYour First Component
NextWriting Markup with JSX