Velika prenova: tvoja spletna stran v Reactu

Tvoja naloga

Vzameš svojo spletno stran iz ravni 1–2 in jo znova zgradiš v Reactu. Zveni kot korak nazaj? Ni – to je najboljša vadba: vsebino in oblikovanje že imaš, zato se lahko osredotočiš čisto na novo tehniko. Na koncu boš črno na belem videl, zakaj se profesionalcem splača.

Načrt prenove

1. Razdeli spletno stran na komponente. Vzemi papir in svinčnik (resno!) in nariši stran kot škatle: Header, Gallery, Quiz, Footer… Vsaka škatla = ena datoteka v src/.

2. Prestavi HTML v komponente. Kopiraj kos za kosom iz starih .html datotek v JSX. Pazljivo na znane razlike: class → className, vsaka komponenta vrne en ovojni element. Slike kopiraj v mapo public/ v Vite projektu – poti kot /images/team.jpg delujejo nespremenjene.

3. Prestavi CSS. Vsebino style.css kopiraj v src/App.css. Skoraj brez sprememb – CSS je še vedno CSS.

4. Izvleci podatke v polja. Kartice, rezultati, fotografije v galeriji – vse, kar se ponavlja, spremeni v polje objektov + .map(), kot si se naučil v lekciji o komponentah.

5. Prepiši kouzla iz ravni 2 v state. Tabela pretvorbe:

   Raven 2 (navaden JavaScript)	React
   getElementById + textContent	state + {vrednost} v JSX
   addEventListener("click", ...)	onClick={...}
   classList.toggle + CSS .hidden	boolean state + {pogoj && (...)}
   števec s spremenljivko	useState s številom

Pokažem ti: temni način na React način

Skupaj prepišimo eno kouzlo, da vidiš pretvorbo v praksi:

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;

In v Header.jsx gumb prejme funkcijo kot prop:

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

Še ena nova stvar: prop je lahko tudi funkcija. App ima state in otroku posodi gumb za preklop. To se imenuje “state živi na vrhu” in je najpogostejši vzorec v Reactu.

Kontrolni seznam prenove

• Stran je razdeljena v vsaj 4 komponente v ločenih datotekah
• Ponavljajoči elementi (kartice, fotografije…) nastanejo iz polja prek .map()
• Vsaj dve interaktivni točki tečeta na useState
• Temni način deluje in se si zapomni (localStorage)
• V konzoli ni napak
• V kodi nikjer ni getElementById 😉

Kaj si vzameš iz te lekcije

• Prenova: razdeli na komponente → prestavi HTML in CSS → podatki v polja → kouzla v state.
• Prop je lahko tudi funkcija – starš otrokom posodi gumbe za nadzor svojega state.
• Isti rezultat, čistejša struktura: manj kopiranja, lažje spremembe. To je napredek, ki ga vidiš.

© 2026 Ing. Martin Polak / AlgoRhino · Pogoji uporabe vsebine