Learn React
Describing the UI

Importování a exportování komponent

Krása komponent spočívá v jejich znovupoužitelnosti, můžete vytvořit komponentu, která je složená z dalších komponent. Občas dává smysl, že jakmile začnete přidávat více a více komponent, je dobré je rozdělit do více souborů. Toto vede ke snazšímu čtení kódu a větší znovupoužitelnosti jednotlivých komponent.

You will learn

  • Co je to kořenová komponenta
  • Jak importovat a exportovat komponenty
  • Kdy použít výchozí a kdy jmenný import a export
  • Jak importovat a exportovat vícero komponent z jednoho souboru
  • Jak rozdělit komponenty do dalších souborů

Kořenová komponenta

V kapitole Vaše první komponenta, byly vytvořeny komponenty Profile a Gallery, která ji rendruje:

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

export default function Gallery() {
  return (
    <section>
      <h1>Amazing scientists</h1>
      <Profile />
      <Profile />
      <Profile />
    </section>
  );
}

V tomto příkladě jsou komponenty v kořenovém souboru jménem App.js. V Create React App, je aplikace umístěna do src/App.js. V závislosti na projektu může být kořenová komponenta v úplně jiném souboru. Pokud používáte framework s navigací založenou na souborovém systému, jako je třeba Next.js, bude vaše kořenová komponenta jiná pro každou stránku.

Export a import komponent

Představte si, že chcete na úvodní stránce zobrazit seznam učebnic. Nebo vložit seznam profilů někam jinam. Teď dává smysl přesunout Gallery a Profile mimo kořenový soubor. Tyto komponenty tak budou více modulární a znovupoužitelné i v dalších souborech. Komponenty můžete přesouvat pomocí těchto tří kroků:

  1. Vytvořte nový JS soubor pro komponenty.
  2. Exportujte vaši funkcionální komponentu z tohoto souboru (použitím buď výchozího nebo jmenného exportu).
  3. Importujte ji do souboru, kde se chystáte tuto komponentu použít (použitím korespondující techniky pro import výchozí nebo jmenný import).

Obě komponenty, Profile a Gallery, byly přesunuty mimo soubor App.js do nového souboru Gallery.js. Nyní můžete upravit App.js aby importoval Gallery z Gallery.js:

import Gallery from './Gallery.js';

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

Všimněte si, jak je tento příklad rozdělen do dvou souborů:

  1. Gallery.js:
    • Definuje Profile komponentu, která je použita pouze uvnitř tohoto souboru a není exportována.
    • Exportuje Gallery komponentu jako výchozí export.
  2. App.js:
    • Importuje Gallery přes výchozí import z Gallery.js.
    • Exportuje kořenovou komponentu App jako výchozí export.

Poznámka

Můžete si povšimnout, že soubory postrádají příponu .js například tady:

import Gallery from './Gallery';

Obě './Gallery.js' nebo './Gallery' budou fungovat s Reactem, přestože první je blíže tomu, jak nativní ES Moduly fungují.

Deep Dive

Výchozí vs. jmenné exporty

Máme dva hlavní způsoby jak exportovat hodnoty v JavaScriptu, výchozí a jmenný export. Prozatím jsme v našich příkladech používali pouze výchozí exporty. V jednom souboru můžeme použít jeden nebo oba způsoby. Soubor může mít pouze jeden výchozí export, ale může mít několik jmenných exportů.

Výchozí a jmenné exporty

Druh exportu komponenty určuje jak ji musíte naimportovat. V případě, že se pokusíte importovat výchozí export jako jmenný, dostanete error! Tato tabulka vám pomůže s určením typu:

SyntaxeVýraz pro exportVýraz pro import
Výchozíexport default function Button() {}import Button from './Button.js';
Jmennýexport function Button() {}import { Button } from './Button.js';

S výchozím importem můžete za klíčové slovo import vložit jakékoliv jméno. Například můžete napsat import Banana from './Button.js' a stále dostane výchozí export. Na rozdíl od jmenných importů, kde musí jméno odpovídat na obou stranách. Proto se jim říká jmenné importy!

Výchozí export se většinou používá pokud soubor exportuje pouze jednu komponentu. Naopak jmenný export se používá tam, kde se exportuje více komponent nebo hodnot z jednoho souboru. Nehledě jaký programátorský styl preferujete, dávejte komponentám a souborům které je obsahují smysluplné názvy. Bezejmenná komponenta, například export default () => {}, je nežádoucí protože je těžké ji debugovat.

Exportování a importování vícero komponent ze stejného souboru

Co když chceme zobrazit pouze Profile namísto galerie? Komponentu Profile lze také vyexportovat. Pozor, soubor Gallery.js již má výchozí export a nemůže mít dva výchozí exporty. Můžete vytvořit nový soubor s výchozím exportem, nebo můžete přidat jmenný export pro komponentu Profile. Soubor může mít pouze jeden výchozí export, ale může mít vícero jmenných exportů!

Poznámka

Pro zjednodušení, se některé týmy rozhodly používat pouze jeden styl (výchozí nebo jmenný) nebo nemíchat tyto styly v jednom souboru. Zařiďte se podle sebe!

Nejprve exportujte Profile z Gallery.js použitím jmenného exportu (bez klíčového slova default):

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

Poté importujte Profile z Gallery.js do App.js použitím jmenného importu (se složenými závorkami):

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

Nakonec vyrenderujte <Profile /> v komponentě App:

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

Nyní, Gallery.js obsahuje dva exporty, výchozí Gallery a jmenný Profile. App.js importuje oba dva. Zkuste upravit <Profile /> na <Gallery /> a zpět v následujícím příkladu:

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

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

Nyní používáte mix výchozích a jmenných exportů:

  • Gallery.js:
    • Exportuje komponentu Profile jako jmenný export Profile.
    • Exportuje komponentu Gallery jako výchozí export.
  • App.js:
    • Importuje Profile jako jmenný import Profile z Gallery.js.
    • Importuje Gallery jako výchozí import z Gallery.js.
    • Exportuje kořenovou komponentu App jako výchozí export.

Recap

Na této stránce jste se naučili:

  • Co je to soubor s kořenovou komponentou
  • Jak importovat a exportovat komponentu
  • Kdy a jak použít výchozí a jmenný import a export
  • Jak exportovat vícero komponent z jednoho souboru

Try out some challenges

Challenge 1 of 1:
Další rozdělení komponent

Nyní, Gallery.js exportuje obě komponenty Profile a Gallery což je trochu matoucí.

Přesuňte komponentu Profile do vlastního souboru Profile.js a změňte komponentu App tak, aby rendrovala obě komponenty <Profile /> a <Gallery /> v tomto pořadí.

Můžete použít buďto výchozí nebo jmenný export pro Profile, ale ujistěte se, že použijete korespondující syntaxi pro import v obou souborech App.js a Gallery.js! Můžete se podívat na tabulku z rozboru výše:

SyntaxeVýraz pro exportVýraz pro import
Výchozíexport default function Button() {}import Button from './Button.js';
Jmennýexport function Button() {}import { Button } from './Button.js';
// Přesuň mne do 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>Amazing scientists</h1>
      <Profile />
      <Profile />
      <Profile />
    </section>
  );
}

Jakmile to zvládnete s jedním typem exportu, zkuste to i s druhým.

PreviousYour First ComponentNextWriting Markup with JSX

How do you like these docs?