← Zpět na blog

Co jsou to komponenty?

📖 3 minuty

Web components, React components, Wrapper component, Styled components. U frontendového vývoje je nekončící seznam technologií, které vytvářejí, využívají nebo pomáhají udržovat komponenty. Ale co to ta komponenta (nebo komponent?) vlastně je?

HTML a CSS

Pokud jste dělali stránky jenom v HTML a CSS a měli jste například 5 obrázků s popiskem, které jste chtěli zobrazit, museli jste pětkrát napsat element img, přidat mu správné třídy, pokaždé unikátní src a popisek.

  <ul class="image-gallery">
    <li>
      <a href="drawing.html">
        <img src="Imgdrawing.png" width="130" height="130" alt="Learn to draw">
      </a>
      <p class="image-description">This image links to a page about learning to draw.</p>
    </li>
    <li>
      <a href="art.html">
        <img src="Imgart.png" width="130" height="130" alt="Art Design and creation">
      </a>
      <p class="image-description">This image links to a page about art design and creation.</p>
    </li>
    <li>
      <a href="design.html">
        <img src="Imgdesignart.png" width="130" height="130" alt="Design">
      </a>
      <p class="image-description">This image links to a page about design.</p>
    </li>
    <li>
      <a href="code.html">
        <img src="Imgcode.png" width="130" height="130" alt="Coding programmer">
      </a>
      <p class="image-description">This image links to a page about code.</p>
    </li>
    <li>
      <a href="test.html">
        <img src="Img	est.png" width="130" height="130" alt="Test">
      </a>
      <p class="image-description">This image links to a page about testing.</p>
    </li> 
  </ul>

Už takto se to zdá poměrně zdlouhavé napsat. Hodně věcí se v kódu opakuje, jen s jiným obsahem. A představte si, že budete chtít něco změnit. Přidat nebo upravit třídu, nebo pozměnit strukturu galerie. Musíte ručně u každého obrázku udělat změnu a doufat, že jste nikde neudělali překlep.

Kéž by tak bylo možné si udělat nějakou šablonu image a description a potom tam jen vložit samotný obrázek a text!

Voilá, přivítejte komponenty!

Komponenty jsou samostatné bloky kódu, které je možné využít na více místech v naší aplikaci. Mají v sobě zahrnutý styl a logiku, který s danou částí souvisí. Mohou být úplně malé, jako třeba tlačítko, až do komplexních, jako je sidebar nebo dashboard. Mohou být obalové a mít v sobě vykreslené další komponenty a mohou mít víc variant.

Co jsou základní principy komponent?

1. Reusability - znovupoužitelnost

   Komponentu je možné použít na více místech aplikace s jiným obsahem

   Díky tomu dodržujeme DRY princip (Don't repeat yourself)

2. Encapsulation - zapouzdření (oddělení)

   Každá komponenta je zodpovědná jen za jednu část logiky - například jedna komponenta řeší pouze zobrazení článku a další řeší přidávání komentáře k článku.

3. Flexibilita

   Komponenty je možné snadno přizpůsobit a upravit, aniž by to mělo vliv na ostatní části aplikace.

4. Testovatelnost

   Komponenty je možné testovat samostatně

Jak začít psát komponenty?

Ještě neotvírejte textový editor. Začněte tím, že si otevřete jakoukoli webovou stránku a zkusíte se pouze vizuálně podívat na to, jak by se dala rozdělit na komponenty.

Tady je možné vidět jasné opakující se komponenty. Mají společný design s možnými variacemi - např. barva pozadí kartičky. Kromě toho se ale liší pouze obsahem.

Komponenty v Reactu

Kdybychom měli princip komponent aplikovat na naše obrázky a použili React, vypadal by kód takto:

1. Definice komponenty

Nejdřív se definuje komponenta, která bere props (dynamický obsah, který se mění). Props jsou href, src, alt a description. Tyto se pak použití při vykreslení komponenty.

  const GalleryItem = ({ href, src, alt, description }) => (
  <li>
    <a href={href}>
      <img src={src} width="130" height="130" alt={alt} />
    </a>
    <p className="image-description">{description}</p>
  </li>
);
  

2. Definice dat

Následně definujeme data, která chceme vykreslit. K tomu se nejlépe hodí pole objektů. Vidíte, že každý objekt má vlastnosti, které se použijí jako props pro komponentu.

  const galleryData = [
  {
    href: "/drawing",
    src: "img/drawing.png",
    alt: "Learn to draw",
    description: "This image links to a page about learning to draw."
  },
  {
    href: "/art",
    src: "img/art.png",
    alt: "Art Design and creation",
    description: "This image links to a page about art design and creation."
  },
  {
    href: "/design",
    src: "img/designart.png",
    alt: "Design websites",
    description: "This image links to a page about design."
  },
  {
    href: "/code",
    src: "img/code.png",
    alt: "Coding programmer",
    description: "This image links to a page about code."
  },
  {
    href: "/test",
    src: "img/test.png",
    alt: "Tester",
    description: "This image links to a page about testing."
  }
];
  

3. Vykreslení sezanmu komponent

A následně vykreslíme seznam obrázků. Pomocí .map procházíme polem a pro každou položku pole - tady pojmenovaná item - renderujeme komponentu GalleryItem s příslušnými props.

Při mapování se používá index (pořadí položky v poli) jako key. V tomto případě to stačí, ale je pokud máte např. unikátní id, je lepší ho použít. Proč? Protože při přeskládání pole se může stát, že se indexy změní a React bude mít problém s vykreslením.

  const ImageGallery = () => (
  <ul className="image-gallery">
    {galleryData.map((item, index) => (
      <GalleryItem
        key={index}
        href={item.href}
        src={item.src}
        alt={item.alt}
        description={item.description}
      />
    ))}
  </ul>
);

Praktické využití

Na první pohled se může zdát, že tento kód je zbytečně složitý. Často nám ale dynamicky nepřijde pět obrázků, ale třeba tisíc uživatelů. A v tuto chvíli začne příprava a použití komponent dávat smysl.

Kromě efektivnosti psaní kódu je dobré, že komponenty se pojmenovávají sémanticky. Podle názvu tedy už tušíte, co komponenta dělá: pokud v kódu uvidíte GalleryItem, je jasné, že se jedná o obrázek v galerii.

Je snazší se orientovat v kódu, kde vidíte elementy jako ProductCard, UserList Sidebar, nebo LoginForm, než když vidíte pouze hluboce zanořené div, span, p.

Shrnutí

Komponenty jsou tak častým přístupem v psaní frontendu webových stránek, že existují celé knihovny a frameworky, které nabízí už hotové nastylované komponenty, které stačí do projektu jen naimportovat.

Jsou to například Bootstrap, SemanticUI nebo pro React ChakraUI.

Díky tomto shrnutí se už nikdy nebudete na webové stránky dívat stejně. Komponenty uvidíte všude! A nebojte se nakouknout do devtools a zkusit si nějaké atributy nebo stylování změnit.