Komponenty: stavebnica pre web

Ukážem ti: tvoj prvý vlastný komponent

Komponent je funkcia s veľkým prvým písmenom, ktorá vracia JSX. Zvyk je dať každý do vlastného súboru. Vytvor súbor src/Header.jsx:

function Header() {
  return (
    <header>
      <h1>FC Riverside</h1>
      <nav>
        <a href="#team">Team</a>
        <a href="#results">Results</a>
      </nav>
    </header>
  );
}

export default Header;

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

import Header from './Header.jsx';

function App() {
  return (
    <div>
      <Header />
      <main>
        <p>Welcome to our club's website!</p>
      </main>
    </div>
  );
}

export default App;

• import ... from ... – „požičaj si komponent z iného súboru.” Patrí k export default.
• <Header /> – vlastný tag! Veľké písmeno hovorí Reactu: toto nie je HTML, je to môj komponent.

Pamätáš na bolesť z Úrovne 1 – menu skopírované na každú stránku? Práve zmizla. Hlavička existuje raz, v jednom súbore.

Ukážem ti: komponent s vymeniteľnými dátami (props)

Pečiatka s vymeniteľnými písmenami – dáta sa komponentu odovzdávajú ako props (properties). Súbor src/PlayerCard.jsx:

function PlayerCard({ name, position, number }) {
  return (
    <div className="card">
      <h3>{name} · #{number}</h3>
      <p>{position}</p>
    </div>
  );
}

export default PlayerCard;

Použitie v App.jsx:

import PlayerCard from './PlayerCard.jsx';

<PlayerCard name="Jake" position="goalkeeper" number={1} />
<PlayerCard name="Alex" position="midfield" number={8} />
<PlayerCard name="Tom" position="forward" number={9} />

Props sa píšu ako HTML atribúty. Text ide v úvodzovkách, čísla a JavaScript v {}. Komponent ich rozbalí v ({ name, position, number }) a použije.

Ukážem ti: zoznam z poľa

Tri karty ručne – v poriadku. Ale čo keď ich je dvadsať? Dáta daj do poľa a použij .map():

const players = [
  { name: "Jake", position: "goalkeeper", number: 1 },
  { name: "Matt", position: "defense", number: 4 },
  { name: "Alex", position: "midfield", number: 8 },
  { name: "Tom", position: "forward", number: 9 },
];

function App() {
  return (
    <div className="cards">
      {players.map((player) => (
        <PlayerCard
          key={player.number}
          name={player.name}
          position={player.position}
          number={player.number}
        />
      ))}
    </div>
  );
}

.map() prejde pole a pre každú položku vytvorí kartu. Pridanie hráča = pridanie riadku do poľa. Žiadne HTML sa nekopíruje. (key je len pomocník pre React, aby karty rozlíšil – daj tam čokoľvek jedinečné.)

Teraz ty 💪

Postav súpravu komponentov pre svoj projekt v React projekte:

1. Komponent Header s názvom webu a menu.
2. Komponent karty s props podľa projektu: 🏫 TeacherCard (meno, predmet) · 🙋 HobbyCard (názov, popis) · 🌍 TripCard (miesto, popis) · ⚽ PlayerCard (meno, pozícia, číslo).
3. Dáta daj do poľa a vykresli ich pomocou .map() – aspoň 4 položky.
4. Skopíruj štýly kariet zo starej webovej stránky do src/App.css – tvoje CSS znalosti sa prenášajú bez zmeny!

Čo si z tejto lekcie odnášaš

• Komponent = súbor + funkcia s veľkým písmenom + export default; použitie cez import a <Tag />.
• Props = vymeniteľné dáta komponentu: <Card name="Jake" number={1} />.
• Zoznamy sa kreslia pomocou array.map() – dáta riadia obrazovku.

© 2026 Ing. Martin Polak / AlgoRhino · Podmienky používania obsahu