Velika pregradnja: tvoja web stranica u Reactu

Tvoja misija

Uzeti ćeš svoju web stranicu iz razina 1–2 i ponovo je izgraditi u Reactu. Zvuči kao korak unazad? Nije – to je najbolja vježba: sadržaj i dizajn već imaš riješene, pa se možeš usredotočiti samo na novu tehniku. A na kraju ćeš crno na bijelo vidjeti zašto se profesionalcima isplati.

Plan pregradnje

1. Razdvoji web stranicu na komponente. Uzmi papir i olovku (ozbiljno!) i nacrtaj web stranicu kao kutije: Header, Gallery, Quiz, Footer… Svaka kutija = jedna datoteka u src/.

2. Premjesti HTML u komponente. Kopiraj dio po dio iz starih .html datoteka u JSX. Pazi na poznate razlike: class → className, svaka komponenta vraća jedan omotni element. Kopiraj slike u mapu public/ u Vite projektu – tada putanje poput /images/team.jpg rade nepromijenjeno.

3. Premjesti CSS. Kopiraj sadržaj style.css u src/App.css. Trebao bi raditi gotovo nepromijenjeno – CSS je i dalje CSS.

4. Izvuci podatke u nizove. Kartice, rezultati, fotografije u galeriji – sve što se ponavlja pretvori u niz objekata + .map(), kao što si naučio u lekciji o komponentama.

5. Prepiši čarolije iz razine 2 u state. Evo tablice pretvorbe:

   Razina 2 (obični JavaScript)	React
   getElementById + textContent	state + {value} u JSX-u
   addEventListener("click", ...)	onClick={...}
   classList.toggle + CSS .hidden	boolean state + {condition && (...)}
   brojač s varijablom	useState s brojem

Pokazat ću ti: tamni način na React način

Prepišimo jednu čaroliju zajedno, da vidiš pretvorbu u akciji:

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 u Header.jsx gumb prima funkciju kao prop:

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

Još jedna nova stvar: prop može biti i funkcija. App posjeduje state i posuđuje djetetu gumb za prebacivanje. To se zove “state živi na vrhu” i najčešći je obrazac u Reactu.

Popis za pregradnju

• Web stranica je podijeljena na barem 4 komponente u zasebnim datotekama
• Ponavljajući elementi (kartice, fotografije…) nastaju iz niza preko .map()
• Barem dvije interaktivne točke rade na useState
• Tamni način radi i pamti se (localStorage)
• Nema grešaka u konzoli
• U kodu nigdje nema getElementById 😉

Što ćeš ponijeti iz ove lekcije

• Pregradnja: podijeli na komponente → premjesti HTML i CSS → podatke u nizove → čarolije u state.
• Prop može biti i funkcija – roditelj posuđuje djeci gumbe za upravljanje vlastitim stateom.
• Isti rezultat, čistija struktura: manje kopiranja, lakše promjene. To je napredak koji se stvarno vidi.

© 2026 Ing. Martin Polak / AlgoRhino · Uvjeti korištenja sadržaja