Velká přestavba: tvůj web v Reactu

Přepíšeš svůj web z Úrovně 1 do Reactu. Stejný web, potřetí – tentokrát jako profík.

Tvoje mise

Vezmeš svůj web z Úrovní 1–2 a postavíš ho znovu v Reactu. Zní to jako krok zpátky? Není – je to nejlepší trénink, jaký existuje: obsah a design už máš vymyšlený, takže se soustředíš čistě na novou techniku. A na konci uvidíš černé na bílém, proč se to profíkům vyplácí.

Plán přestavby

Rozděl web na komponenty. Vezmi papír a tužku (vážně!) a zakresli svůj web jako krabice: Hlavicka, Galerie, Kviz, Paticka… Každá krabice = jeden soubor v src/.
Přenes HTML do komponent. Kopíruj po kouskách ze starých .html souborů do JSX. Pozor na známé rozdíly: class → className, každá komponenta vrací jeden obalový prvek. Obrázky nakopíruj do složky public/ ve Vite projektu – pak fungují cesty jako /obrazky/tym.jpg beze změny.
Přenes CSS. Obsah svého styl.css nakopíruj do src/App.css. Mělo by fungovat skoro beze změny – CSS je pořád CSS.
Data vytáhni do polí. Karty, výsledky, fotky galerie – všechno, co se opakuje, převeď na pole objektů + .map(), jak umíš z lekce o komponentách.

Kouzla z Úrovně 2 přepiš na state. Tady je převodní tabulka:

Úroveň 2 (čistý JavaScript)	React
`getElementById` + `textContent`	state + `{hodnota}` v JSX
`addEventListener("click", ...)`	`onClick={...}`
`classList.toggle` + CSS `.schovany`	boolean state + `{stav && (...)}`
počítadlo s proměnnou	`useState` s číslem

Ukaž mi to: tmavý režim po reactovsku

Jedno kouzlo přepíšeme spolu, ať vidíš převod v akci:

import { useState } from 'react';
import Hlavicka from './Hlavicka.jsx';
import Galerie from './Galerie.jsx';

function App() {
  const [tmavy, setTmavy] = useState(
    localStorage.getItem("rezim") === "tmavy"
  );

  function prepniRezim() {
    const novy = !tmavy;
    setTmavy(novy);
    localStorage.setItem("rezim", novy ? "tmavy" : "svetly");
  }

  return (
    <div className={tmavy ? "tmavy" : ""}>
      <Hlavicka onPrepni={prepniRezim} tmavy={tmavy} />
      <Galerie />
    </div>
  );
}

export default App;

A v Hlavicka.jsx tlačítko dostane funkci jako props:

function Hlavicka({ onPrepni, tmavy }) {
  return (
    <header>
      <h1>Můj web</h1>
      <button onClick={onPrepni}>{tmavy ? "☀️" : "🌙"}</button>
    </header>
  );
}

Novinka na závěr: props může být i funkce. App vlastní stav a půjčuje dětem tlačítko na jeho přepnutí. Tomu se říká „stav bydlí nahoře” a je to nejčastější vzor v Reactu.

Kontrolní seznam přestavby

Web je rozdělený aspoň na 4 komponenty v samostatných souborech
Opakující se prvky (karty, fotky…) se rodí z pole přes .map()
Aspoň dvě interaktivní místa běží na useState
Tmavý režim funguje a pamatuje se (localStorage)
V konzoli nejsou chyby
Nikde v kódu není getElementById 😉

💡

Zaseknutí je součást hry. Tahle lekce je maraton, ne sprint – klidně si ji rozděl na víc dnů. Když se zasekneš: konzole (F12), chybová hláška ve Vite, a porovnání s ukázkami z minulých lekcí. Přesně takhle debuguje profík.

✅

Kontrola: Tvůj web běží na localhost, vypadá (skoro) stejně jako předtím – ale uvnitř je z komponent, dat a state. Teď si zkus přidat jednu kartu do pole dat a sleduj, jak málo práce to je. Tohle je ten důvod, proč React existuje.

Co si z téhle lekce odnést

Přestavba: rozděl na komponenty → přenes HTML a CSS → data do polí → kouzla na state.
Props může být i funkce – rodič půjčuje dětem tlačítka ke svému stavu.
Stejný výsledek, čistší stavba: méně kopírování, snadnější změny. To je pokrok, který jde vidět.