Veľká prestavba: tvoja webová stránka v Reacte

Prepíš svoju webovú stránku z Úrovne 1 do Reactu. Ten istý web, tretíkrát – tentoraz ako profík.

Tvoja misia

Vezmeš svoju webovú stránku z Úrovní 1–2 a postavíš ju znova v Reacte. Znie to ako krok späť? Nie je – je to najlepší tréning: obsah a dizajn už máš vymyslené, takže sa môžeš sústrediť čisto na novú techniku. A na konci uvidíš čierne na bielom, prečo sa to profesionálom oplatí.

Plán prestavby

Rozdeľ webovú stránku na komponenty. Vezmi papier a ceruzku (vážne!) a načrtni web ako boxy: Header, Gallery, Quiz, Footer… Každý box = jeden súbor v src/.
Presuň HTML do komponentov. Kopíruj po častiach zo starých .html súborov do JSX. Dávaj pozor na známe rozdiely: class → className, každý komponent vracia jeden obalový prvok. Obrázky skopíruj do priečinka public/ vo Vite projekte – potom cesty ako /images/team.jpg fungujú bez zmeny.
Presuň CSS. Obsah style.css skopíruj do src/App.css. Malo by to fungovať takmer bez zmeny – CSS je stále CSS.
Vytiahni dáta do polí. Karty, výsledky, fotky v galérii – čokoľvek, čo sa opakuje, sprav z poľa objektov + .map(), ako si sa naučil v lekcii o komponentoch.

Prepíš kúzla z Úrovne 2 na state. Tu je konverzná tabuľka:

Úroveň 2 (obyčajný JavaScript)	React
`getElementById` + `textContent`	state + `{value}` v JSX
`addEventListener("click", ...)`	`onClick={...}`
`classList.toggle` + CSS `.hidden`	boolean state + `{condition && (...)}`
počítadlo s premennou	`useState` s číslom

Ukážem ti: tmavý režim po reactovsku

Prepíšme spolu jedno kúzlo, aby si videl konverziu v akcii:

import { useState } from 'react';
import Header from './Header.jsx';
import Gallery from './Gallery.jsx';

function App() {
  const [dark, setDark] = useState(
    localStorage.getItem("mode") === "dark"
  );

  function toggleMode() {
    const newMode = !dark;
    setDark(newMode);
    localStorage.setItem("mode", newMode ? "dark" : "light");
  }

  return (
    <div className={dark ? "dark" : ""}>
      <Header onToggle={toggleMode} dark={dark} />
      <Gallery />
    </div>
  );
}

export default App;

A v Header.jsx tlačidlo dostane funkciu ako prop:

function Header({ onToggle, dark }) {
  return (
    <header>
      <h1>My website</h1>
      <button onClick={onToggle}>{dark ? "☀️" : "🌙"}</button>
    </header>
  );
}

Posledná nová vec: prop môže byť aj funkcia. App vlastní state a požičia dieťaťu tlačidlo na jeho prepínanie. Tomu hovorí „state žije hore” a je to najčastejší vzor v Reacte.

Checklist prestavby

Webová stránka je rozdelená na aspoň 4 komponenty v samostatných súboroch
Opakujúce sa prvky (karty, fotky…) vznikajú z poľa cez .map()
Aspoň dve interaktívne miesta bežia na useState
Tmavý režim funguje a pamätá sa (localStorage)
V konzole nie sú chyby
V kóde nie je nikde getElementById 😉

💡

Zaseknutie je súčasť hry. Táto lekcia je maratón, nie šprint – pokojne ju rozdeľ na viac dní. Keď sa zasekneš: konzola (F12), chybová správa od Vite a porovnanie s príkladmi z predchádzajúcich lekcií. Presne tak debuguje profík.

✅

Skontroluj sa: Tvoja webová stránka beží na localhoste a vyzerá (takmer) rovnako ako predtým – ale vnútri je z komponentov, dát a state. Skús pridať jednu kartu do poľa dát a sleduj, koľko málo práce to stojí. To je celý dôvod, prečo React existuje.

Čo si z tejto lekcie odnášaš

Prestavba: rozdel na komponenty → presuň HTML a CSS → dáta do polí → kúzla na state.
Prop môže byť aj funkcia – rodič požičia deťom tlačidlá na ovládanie svojho state.
Rovnaký výsledok, čistejšia štruktúra: menej kopírovania, ľahšie zmeny. To je pokrok, ktorý vidíš.