Waarom de professionals React gebruiken

Herinner je dat gekopieerde menu?

In Level 1 had je op elke pagina een header met een menu. En telkens als je een nieuwe pagina toevoegde, moest je het menu kopiëren – en bij elke wijziging overal aanpassen. Irritant met drie pagina’s, een nachtmerrie met dertig. En die pijn is precies waar ons verhaal begint.

Componenten: één keer schrijven, overal gebruiken

De professionals dachten: wat als het menu één stuk code was dat je gewoon op elke pagina “invoegt”? Verander het op één plek – het verandert overal. Zo’n stuk heet een component.

En het is niet alleen het menu. Kijk naar je website door de ogen van een bouwset:

• een spelerskaart (je hebt hem 4× – en alleen naam en positie verschillen),
• een foto in de galerij (10× – alleen de afbeelding verschilt),
• een knop (overal – alleen de tekst verschilt).

De website van een professional is geen stapel HTML-bestanden. Het is een doos LEGO: een handvol eigen blokken (componenten) die je tot een hele applicatie samenstelt.

Wat React is

React is een hulpmiddel (een library) voor JavaScript dat dit soort assemblage regelt. Het is uitgevonden bij Facebook, het is gratis, en een groot deel van internet is erop gebouwd: Facebook, Instagram, Netflix, Airbnb… Een component in React ziet er zo uit – maak je geen zorgen, we kijken nu alleen:

function PlayerCard({ name, position, jerseyNumber }) {
  return (
    <div className="card">
      <h3>{name} · #{jerseyNumber}</h3>
      <p>{position}</p>
    </div>
  );
}

En je gebruikt het als een eigen HTML-tag:

<PlayerCard name="Jake" position="goalkeeper" jerseyNumber={1} />
<PlayerCard name="Alex" position="midfield" jerseyNumber={8} />

Herken je dit? Het is een functie (uit Level 2) die HTML teruggeeft. De kaart wordt één keer geschreven en gebruikt met andere data – als een rubberen stempel met verwisselbare letters.

Superkracht nummer twee: React regelt het opnieuw tekenen

In Level 2 schreef je: “vind het element, verander de tekst, voeg een class toe…” In grote applicaties is er zoveel handmatig herschikken dat je verdwaalt. React draait het om:

Je beschrijft hoe de pagina eruit moet zien voor gegeven data. Als de data verandert, zoekt React zelf uit wat opnieuw getekend moet worden.

De score verandert van 0 naar 1? Je zoekt geen element – je verandert alleen het getal, en React tekent opnieuw wat nodig is. Je ziet het in actie in de les over state.

Wat er in dit level komt

1. Je installeert pro-tools: de terminal en Node.js (volgende les).
2. Je zet je eerste React-app op met Vite.
3. Je leert componenten, props en state.
4. Je bouwt je Level 1-website opnieuw in React.
5. Je bouwt je eigen Node.js-server en koppelt een gastenboek eraan.

Wat neem je mee uit deze les

• Dezelfde code op meerdere plekken kopiëren is een valkuil – dat ontdekte je al in Level 1.
• Een component is een functie die een stuk pagina teruggeeft. Schrijf hem één keer, gebruik hem vaak met andere data.
• React tekent de pagina voor je opnieuw: jij verandert de data, hij verandert het scherm.

© 2026 Ing. Martin Polak / AlgoRhino · Contentgebruiksvoorwaarden