Prečo profesionáli používajú React

Pamätáš si kopírovanie menu?

V Úrovni 1 si mal hlavičku s menu na každej stránke. A keď si pridal novú stránku, musel si menu skopírovať – a pri každej zmene ho opraviť všade. Otravné pri troch stránkach, nočná mora pri tridsiatich. A táto bolesť je presne začiatok nášho príbehu.

Komponenty: napíš raz, používaj všade

Profesionáli si povedali: čo keby menu bolo jeden kus kódu, ktorý sa len „vloží” na každú stránku? Zmeníš ho na jednom mieste – zmení sa všade. Takýto kus sa volá komponent.

A nie je to len menu. Pozri sa na svoju webovú stránku očami stavebnice:

• karta hráča (máš ju 4× – líši sa len menom a pozíciou),
• fotka v galérii (10× – líši sa len obrázkom),
• tlačidlo (všade – líši sa len textom).

Web profesionálov nie je hromada HTML súborov. Je to krabica LEGO: pár vlastných kociek (komponentov) poskladaných do celej aplikácie.

Čo je React

React je nástroj (knižnica) pre JavaScript, ktorý sa stará o takéto skladanie. Vymysleli ho vo Facebooku, je zadarmo a obrovská časť internetu na ňom stojí: Facebook, Instagram, Netflix, Airbnb… Komponent v Reacte vyzerá takto – neboj sa, zatiaľ len pozeráme:

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

A používa sa ako vlastný HTML tag:

<PlayerCard name="Jake" position="goalkeeper" jerseyNumber={1} />
<PlayerCard name="Alex" position="midfield" jerseyNumber={8} />

Poznávaš to? Je to funkcia (z Úrovne 2), ktorá vracia HTML. Karta je napísaná raz a používa sa s rôznymi dátami – ako pečiatka s vymeniteľnými písmenami.

Druhá superschopnosť: React rieši prekresľovanie

V Úrovni 2 si písal: „nájdi prvok, zmeň text, pridaj triedu…” Vo veľkých aplikáciách je toho ručného preusporiadavania toľko, že sa v tom stratíš. React to otočí:

Opíšeš, ako má stránka vyzerať pre dané dáta. Keď sa dáta zmenia, React sám zistí, čo prekresliť.

Skóre sa zmení z 0 na 1? Nepátraš po žiadnom prvku – len zmeníš číslo a React prekreslí, čo treba. Uvidíš to v akcii v lekcii o state.

Čo ťa čaká v tejto úrovni

1. Nainštaluješ profi nástroje: terminál a Node.js (ďalšia lekcia).
2. Postavíš svoju prvú React aplikáciu pomocou Vite.
3. Naučíš sa komponenty, props a state.
4. Prepíšeš svoju webovú stránku z Úrovne 1 do Reactu.
5. Postavíš vlastný Node.js server a pripojíš k nemu knižku návštev.

Čo si z tejto lekcie odnášaš

• Kopírovanie rovnakého kódu na viac miest je pasca – to si už sám objavil v Úrovni 1.
• Komponent je funkcia, ktorá vracia kus stránky. Napíš raz, používaj veľakrát s rôznymi dátami.
• React prekreslí stránku za teba: ty zmeníš dáta, on zmení obrazovku.

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