Komponenty: stavebnice pro web · Programuj s Martinem

Vyrobíš první vlastní komponenty a poskládáš z nich stránku jako z lega.

Ukaž mi to: první vlastní komponenta

Komponenta je funkce s velkým počátečním písmenem, která vrací JSX. Každou je zvykem dávat do vlastního souboru. Vytvoř soubor src/Hlavicka.jsx:

function Hlavicka() {
  return (
    <header>
      <h1>FK Sokol Nebovidy</h1>
      <nav>
        <a href="#tym">Tým</a>
        <a href="#vysledky">Výsledky</a>
      </nav>
    </header>
  );
}

export default Hlavicka;

A použij ji v src/App.jsx:

import Hlavicka from './Hlavicka.jsx';

function App() {
  return (
    <div>
      <Hlavicka />
      <main>
        <p>Vítej na webu našeho klubu!</p>
      </main>
    </div>
  );
}

export default App;

import ... from ... – „půjč si komponentu z jiného souboru”. Párové k export default.
<Hlavicka /> – vlastní značka! Velké písmeno říká Reactu: tohle není HTML, to je moje komponenta.

Pamatuješ na bolest z Úrovně 1 – menu kopírované do každé stránky? Právě zmizela. Hlavička existuje jednou, v jednom souboru.

Ukaž mi to: komponenta s výměnnými údaji (props)

Razítko s výměnnými písmenky – komponentě se údaje předávají jako props (properties = vlastnosti). Soubor src/KartaHrace.jsx:

function KartaHrace({ jmeno, pozice, cislo }) {
  return (
    <div className="karta">
      <h3>{jmeno} · #{cislo}</h3>
      <p>{pozice}</p>
    </div>
  );
}

export default KartaHrace;

Použití v App.jsx:

import KartaHrace from './KartaHrace.jsx';

<KartaHrace jmeno="Kuba" pozice="brankář" cislo={1} />
<KartaHrace jmeno="Ondra" pozice="záloha" cislo={8} />
<KartaHrace jmeno="Tomáš" pozice="útočník" cislo={9} />

Props se zapisují jako HTML atributy. Texty do uvozovek, čísla a JavaScript do {}. Komponenta si je rozbalí ve ({ jmeno, pozice, cislo }) a použije.

Ukaž mi to: seznam ze pole

Tři karty ručně – dobré. Ale co jich je dvacet? Data do pole a .map():

const hraci = [
  { jmeno: "Kuba", pozice: "brankář", cislo: 1 },
  { jmeno: "Matěj", pozice: "obrana", cislo: 4 },
  { jmeno: "Ondra", pozice: "záloha", cislo: 8 },
  { jmeno: "Tomáš", pozice: "útočník", cislo: 9 },
];

function App() {
  return (
    <div className="karty">
      {hraci.map((hrac) => (
        <KartaHrace
          key={hrac.cislo}
          jmeno={hrac.jmeno}
          pozice={hrac.pozice}
          cislo={hrac.cislo}
        />
      ))}
    </div>
  );
}

.map() projde pole a pro každou položku vyrobí kartu. Přidat hráče = přidat řádek do pole. Žádné HTML se nekopíruje. (key je jen pomůcka pro React, aby poznal karty od sebe – dej tam cokoli jedinečného.)

Teď ty 💪

Postav ve svém React projektu stavebnici pro svůj projekt:

Komponentu Hlavicka s názvem svého webu a menu.
Komponentu-kartu s props podle projektu: 🏫 KartaUcitele (jméno, předmět) · 🙋 KartaKonicku (název, popis) · 🌍 KartaVyletu (místo, popis) · ⚽ KartaHrace (jméno, pozice, číslo).
Data dej do pole a vykresli je přes .map() – aspoň 4 položky.
Zkopíruj si do src/App.css styly karet ze svého starého webu – CSS znalosti se ti přenášejí beze změny!

✅

Kontrola: Stránka je poskládaná z tvých vlastních značek (<Hlavicka />, <KartaHrace />…), karty se rodí z pole dat a přidání položky do pole přidá kartu na stránku. Přesně takhle se staví opravdové aplikace.

Co si z téhle lekce odnést

Komponenta = soubor + funkce s velkým písmenem + export default; použití přes import a <Znacka />.
Props = výměnné údaje komponenty: <Karta jmeno="Kuba" cislo={1} />.
Seznamy se kreslí přes pole.map() – data řídí obrazovku.