Proč profíci používají React

Vzpomínáš na kopírování menu?

V Úrovni 1 jsi měl(a) hlavičku s menu na každé stránce. A když jsi přidal(a) novou stránku, musel(a) jsi menu zkopírovat – a při každé změně ho opravit všude. U tří stránek otrava, u třiceti stránek noční můra. A přesně u téhle bolesti začíná náš příběh.

Komponenty: napiš jednou, použij všude

Profíci si řekli: co kdyby menu byl jeden kus kódu, který se na každou stránku jen „vloží”? Změníš ho na jednom místě – změní se všude. Takovému kusu se říká komponenta.

A nejen menu. Podívej se na svůj web očima stavebnice:

• karta hráče (máš ji 4× – a liší se jen jménem a pozicí),
• fotka v galerii (10× – liší se jen obrázkem),
• tlačítko (všude – liší se jen textem).

Web profíka není hromada HTML souborů. Je to krabice lega: pár vlastních kostek (komponent) a z nich poskládaná celá aplikace.

Co je React

React je nástroj (knihovna) pro JavaScript, který tohle skládání umí. Vymysleli ho ve Facebooku, je zdarma a staví na něm velká část internetu: Facebook, Instagram, Netflix, Airbnb… Komponenta v Reactu vypadá takhle – neboj, zatím jen koukáme:

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

A použije se jako vlastní HTML značka:

<KartaHrace jmeno="Kuba" pozice="brankář" cisloDresu={1} />
<KartaHrace jmeno="Ondra" pozice="záloha" cisloDresu={8} />

Poznáváš to? Je to funkce (z Úrovně 2), která vrací HTML. Karta se napíše jednou a použije s různými údaji – jako razítko s výměnnými písmenky.

Druhá supersíla: React se stará o překreslování

V Úrovni 2 jsi psal(a): „najdi prvek, změň mu text, přidej třídu…” U velkých aplikací je tohohle ručního přeskládávání tolik, že se v něm člověk ztratí. React to otáčí:

Ty popíšeš, jak má stránka vypadat pro daná data. Když se data změní, React sám přijde na to, co překreslit.

Skóre se změní z 0 na 1? Nehledáš žádný prvek – jen změníš číslo a React překreslí, co je potřeba. Uvidíš to v akci v lekci o state.

Co tě v téhle úrovni čeká

1. Nainstaluješ si profi nástroje: terminál a Node.js (příští lekce).
2. Založíš první React aplikaci pomocí Vite.
3. Naučíš se komponenty, props a state.
4. Přestavíš svůj web z Úrovně 1 do Reactu.
5. Postavíš vlastní server v Node.js a napojíš na něj návštěvní knihu.

Co si z téhle lekce odnést

• Kopírování stejného kódu na víc míst je past – na to jsi přišel/přišla už v Úrovni 1 sám/sama.
• Komponenta = funkce, která vrací kus stránky. Napíše se jednou, použije mnohokrát s různými údaji.
• React překresluje stránku za tebe: ty měníš data, on mění obrazovku.

© 2026 Ing. Martin Polak / AlgoRhino · Podmínky užití obsahu