Twój pierwszy komponent

Komponenty: cegiełki do budowania UI-a

W świecie aplikacji internetowych HTML pozwala nam na tworzenie dokumentów o bogatej strukturze przy pomocy wbudowanych znaczników, jak <h1> czy <li>:

<article>
  <h1>Twój pierwszy komponent</h1>
  <ol>
    <li>Komponenty: cegiełki do budowania UI</li>
    <li>Definiowanie komponentu</li>
    <li>Używanie komponentu</li>
  </ol>
</article>

Powyższy kod odzwierciedla czytany przez ciebie artykuł <article>, jego nagłówek <h1> i (skrócony) spis treści w postaci listy numerowanej <ol>. Tego typu kod, połączony ze stylami CSS oraz interaktywnością napisaną w JavaScripcie, stoi za każdym paskiem bocznym, awatarem, oknem dialogowym, listą rozwijaną - każdym fragmentem UI-a widocznym w sieci.

React pozwala na połączenie znaczników, CSS-a i JavaScriptu w “komponent”, element wielokrotnego użytku stanowiący część UI-a twojej aplikacji. Powyższy kod, reprezentujący spis treści, mógłby zostać zastąpiony komponentem <TableOfContents />, renderowanym na każdej stronie. Pod spodem nadal byłby to ten sam kod HTML, składający się z <article>, <h1> itd.

Podobnie jak w przypadku znaczników HTML-owych, komponenty można łączyć, zagnieżdżać i zmieniać im kolejność, tworząc w ten sposób całe strony. Dla przykładu, dokumentacja, którą właśnie czytasz, składa się z następujących komponentów:

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

Wraz ze wzrostem złożoności projektu z pewnością zauważysz, że wiele widoków można poskładać z istniejących już komponentów, co znacznie skróci czas pisania kodu. Nasz spis treści mógłby być dodawany do każdej strony jako <TableOfContents />! Co więcej, możesz rozpędzić prace nad aplikacją korzystając z tysięcy komponentów udostępnianych przez reactową społeczność open-source’ową, takich jak Chakra UI czy Material UI.

Definiowanie komponentu

W przeszłości, kiedy programiści tworzyli stronę internetową, składali najpierw HTML, aby zbudować treść, a następnie dokładali kod javascriptowy dodający interakcje. Takie podejście działało, gdy interakcje na stronie były tylko przyjemnym dodatkiem; teraz dla wielu stron jest to mus. React stawia interakcje na pierwszym miejscu, w dalszym ciągu korzystając z tej samej technologii: komponent reactowy jest więc funkcją javascriptową okraszony znacznikami. Oto przykład, jak to może wyglądać w rzeczywistości (poniższy kod można edytować):

A oto przepis na stworzenie komponentu:

Krok 1: Wyeksportuj komponent

Prefiks export default należy do standardowej składni JavaScriptu (nie jest specyficzny dla samego Reacta). Pozwala oznaczyć funkcję tak, aby można było ją zaimportować w innych plikach. (Więcej na temat importowania dowiesz się z rozdziału pt. Importowanie i eksportowanie komponentów!)

Krok 2: Zdefiniuj funkcję

Za pomocą function Profile() { } definiujemy funkcję javascriptową o nazwie Profile.

Krok 3: Dodaj kod

Komponent zwraca znacznik <img /> z atrybutami src oraz alt. <img /> jest napisany jak w HTML-u, lecz tak naprawdę pod spodem wykonuje się kod javascriptowy! Ta składnia nosi nazwę JSX i pozwala umieszczać znaczniki w kodzie javascriptowym.

Instrukcje wyjścia (ang. return statements) mogą być napisane w jednej linii, jak w poniższym przykładzie:

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

lecz jeśli znaczniki nie znajdują się w tej samej linii co słowo kluczowe return, musisz otoczyć je parą nawiasów:

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

Używanie komponentu

Teraz gdy masz już zdefiniowany komponent Profile, możesz zagnieździć go w innych komponentach. Na przykład, możesz wyeksportować komponent Gallery, który wyświetla kilka komponentów Profile:

Co widzi przeglądarka

Zauważ różnicę w wielkości liter:

• <section> zaczyna się od małej litery, dzięki czemu React wie, że mamy na myśli znacznik HTML-owy.
• <Profile /> zaczyna się od wielkiej litery P, stąd React wie, że mamy na myśli komponent o nazwie Profile.

A sam Profile zawiera jeszcze więcej kodu HTML: <img />. Ostatecznie, to, co trafia do przeglądarki, to:

<section>
  <h1>Niesamowici naukowcy</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>

Zagnieżdżanie i rozmieszczanie komponentów

Komponenty są zwykłymi funkcjami javascriptowymi, dzięki czemu możesz mieć kilka komponentów w tym samym pliku. Jest to wygodne, gdy komponenty są małe lub mocno ze sobą powiązane. Jeśli jednak plik zacznie robić się długi i skomplikowany, zawsze możesz przenieść Profile do osobnego pliku. Wkrótce dowiesz się, jak to zrobić, na stronie o importach.

Ponieważ komponenty Profile są renderowane wewnątrz Gallery — nawet kilka razy! — możemy powiedzieć, że Gallery jest komponentem-rodzicem (nadrzędnym), a każdy z Profile jest “dzieckiem” (potomkiem). Na tym właśnie polega magia Reacta: możesz zdefiniować komponent jeden raz, a używać go wielokrotnie w wielu miejscach.

export default function Gallery() {
  // 🔴 Nigdy nie definiuj komponentu wewnątrz innego komponentu!
  function Profile() {
    // ...
  }
  // ...
}

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

// ✅ Deklaruj komponenty na głównym poziomie
function Profile() {
  // ...
}