De grote herbouw: je website in React

Je missie

Je neemt je website uit Levels 1–2 en bouwt hem opnieuw in React. Klinkt als een stap terug? Niet zo – het is de beste training: je hebt inhoud en design al uitgezocht, dus je focust puur op de nieuwe techniek. En aan het eind zie je zwart op wit waarom de professionals het de moeite waard vinden.

Het herbouwplan

1. Splits de website in componenten. Pak papier en potlood (serieus!) en schets je website als boxen: Header, Gallery, Quiz, Footer… Elke box = één bestand in src/.

2. Verplaats de HTML naar componenten. Kopieer stuk voor stuk uit je oude .html-bestanden naar JSX. Let op de bekende verschillen: class → className, elke component geeft één wrapper-element terug. Kopieer je afbeeldingen naar de map public/ in het Vite-project – dan werken paden als /images/team.jpg ongewijzigd.

3. Verplaats de CSS. Kopieer de inhoud van je style.css naar src/App.css. Het zou bijna ongewijzigd moeten werken – CSS blijft CSS.

4. Haal de data uit in arrays. Kaarten, uitslagen, galerijfoto’s – alles wat herhaalt, wordt een array van objecten + .map(), zoals in de componentenles.

5. Herschrijf de Level 2-spreuken als state. Hier een conversietabel:

   Level 2 (gewoon JavaScript)	React
   getElementById + textContent	state + {value} in JSX
   addEventListener("click", ...)	onClick={...}
   classList.toggle + CSS .hidden	boolean state + {condition && (...)}
   een teller met een variabele	useState met een getal

Ik laat je zien: donkere modus op de React-manier

Laten we één spreuk samen herschrijven, zodat je de conversie ziet:

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;

En in Header.jsx krijgt de knop een functie als prop:

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

Nog één nieuw ding: een prop kan ook een functie zijn. App bezit de state en leent zijn kind een knop om die te schakelen. Dit heet “state leeft bovenaan” en is het meest voorkomende patroon in React.

Herbouw-checklist

• De website is opgesplitst in minstens 4 componenten in aparte bestanden
• Herhalende elementen (kaarten, foto’s…) komen uit een array via .map()
• Minstens twee interactieve plekken draaien op useState
• Donkere modus werkt en wordt onthouden (localStorage)
• Geen fouten in de console
• Nergens in de code staat getElementById 😉

Wat neem je mee uit deze les

• De herbouw: splitsen in componenten → HTML en CSS verplaatsen → data in arrays → spreuken naar state.
• Een prop kan ook een functie zijn – een ouder leent kinderen knoppen om zijn eigen state te besturen.
• Zelfde resultaat, schonere structuur: minder kopiëren, makkelijker wijzigen. Dat is vooruitgang die je ziet.

© 2026 Ing. Martin Polak / AlgoRhino · Contentgebruiksvoorwaarden