REACT | Basis

App

├── Header

├── SearchBar

├── GameList

│ ├── GameCard

│ ├── GameCard

│ ├── GameCard

│ └── GameCard

└── Footer

laravel new game-collection

php artisan breeze:install react

npm install

php artisan serve

npm run dev

http://127.0.0.1:8000

resources/js/Pages/Welcome.jsx

<h1>🎮 Game Collection</h1>

<h2>Welkom bij mijn eerste React-applicatie!</h2>

<p>Naam: Jouw naam</p>

<p>Studentnummer: 123456</p>

<p>Klas: SD4A</p>

Les 1 - React ontwikkelomgeving gereed

Les 2 – JSX: Bouw je eerste Game Collection pagina

🎯 Leerdoelen

Na deze les kun je:

• uitleggen wat JSX is;
• HTML schrijven in React;
• JSX aanpassen;
• CSS classes gebruiken met className;
• een eenvoudige React-pagina bouwen;
• wijzigingen automatisch bekijken in de browser.

📖 Wat ga je vandaag maken?

Vandaag maak je de eerste versie van jouw Game Collection.

De pagina bevat straks:

🎮 Game Collection

Welkom...

Mijn favoriete games

Minecraft

FIFA

Mario Kart

Elden Ring

Dat lijkt nog eenvoudig, maar je leert vandaag de belangrijkste basis van React.

[Screenshot eindresultaat]

📖 Wat is JSX?

Normaal schrijf je HTML zo:

<h1>Game Collection</h1>

React gebruikt JSX.

JSX lijkt heel erg op HTML.

Toch is het geen HTML.

JSX is eigenlijk JavaScript waarin HTML geschreven mag worden.

React zet deze JSX later automatisch om naar gewone JavaScript-code.

💡 Waarom gebruikt React JSX?

Met JSX kun je veel makkelijker een pagina opbouwen.

Vergelijk eens.

Gewone JavaScript:

document.createElement(...)

JSX:

<h1>Game Collection</h1>

Welke leest prettiger?

Vrijwel iedere React-programmeur kiest daarom voor JSX.

📖 Welcome.jsx

In de vorige les heb je gewerkt in:

resources/js/Pages/Welcome.jsx

Open dit bestand opnieuw.

Je ziet iets dat lijkt op HTML.

Dat is JSX.

💡 Let op

JSX lijkt op HTML.

Maar er zijn kleine verschillen.

HTML

class

React

className

HTML

for

React

htmlFor

Hier gaan we later verder op in.

🛠️ Opdracht 1

Verander de pagina zodat deze er ongeveer zo uitziet.

<h1>🎮 Game Collection</h1>

<h2>Mijn favoriete games</h2>

<ul>

<li>Minecraft</li>

<li>FIFA</li>

<li>Mario Kart</li>

<li>Elden Ring</li>

</ul>

Controleer of de browser automatisch wordt bijgewerkt.

[Screenshot browser]

📖 Waarom verandert de browser automatisch?

Misschien is het je al opgevallen.

Je hoeft de browser niet opnieuw te laden.

Na het opslaan zie je direct het resultaat.

Dit noemen we Hot Reloading.

Dat maakt React erg prettig om mee te werken.

🛠️ Opdracht 2

Maak onder de lijst een tekst.

Aantal games:

4

Het aantal hoeft nog niet automatisch te worden berekend.

Dat leren we later.

🛠️ Opdracht 3

Maak een nette opmaak.

Gebruik hiervoor:

• h1
• h2
• ul
• li
• p

Voeg daarna een eenvoudige CSS-class toe.

className="title"

Maak vervolgens zelf de CSS.

[Screenshot resultaat]

💾 GitHub

Maak een commit.

Les 2 - Eerste JSX pagina

Synchroniseer daarna met GitHub.

🤖 AI-opdracht

Vraag ChatGPT:

Waarom gebruikt React JSX in plaats van gewone HTML?

Vergelijk de uitleg met deze les.

Noem vervolgens twee voordelen van JSX.

🧠 Kennischeck

1. Wat is JSX?
2. Is JSX hetzelfde als HTML?
3. Waarom gebruikt React JSX?
4. Waarom gebruiken we className?
5. Wat doet Hot Reloading?

📤 Inleveren

• Screenshot van de browser.
• Screenshot van Welcome.jsx.
• Screenshot van GitHub commit.
• PDF met de antwoorden.

Les 3 – Componenten: Bouw je eerste React-componenten

🎯 Leerdoelen

Na deze les kun je:

• uitleggen wat een React-component is;
• componenten maken;
• componenten importeren;
• componenten gebruiken in een pagina;
• de React-projectstructuur begrijpen;
• een pagina opbouwen uit meerdere componenten.

📖 Wat ga je vandaag maken?

Tot nu toe stond alle code in één bestand.

Dat werkt prima voor kleine projecten.

Maar stel je eens voor dat jouw Game Collection straks bestaat uit:

• Header
• Footer
• Zoekbalk
• Favorieten
• GameCards
• Detailpagina
• Navigatie

Alles in één bestand zetten?

Dat wordt al snel honderden regels code.

Daarom gebruiken React-programmeurs componenten.

Vandaag ga je jouw pagina opdelen in losse bouwstenen.

Aan het einde van deze les ziet jouw project er ongeveer zo uit.

resources
└── js
    ├── Components
    │      Header.jsx
    │      Footer.jsx
    │      GameCard.jsx
    │
    └── Pages
           GameCollection.jsx

[Afbeelding projectstructuur]

📖 Wat is een component?

Een component is een herbruikbaar onderdeel van een website.

Je kunt het vergelijken met LEGO.

Van losse LEGO-blokken bouw je een compleet huis.

React werkt precies hetzelfde.

Onze website bestaat straks uit kleine onderdelen.

Bijvoorbeeld:

Game Collection

│

├── Header

├── Zoekbalk

├── GameList

│      ├── GameCard

│      ├── GameCard

│      ├── GameCard

│      └── GameCard

└── Footer

Iedere GameCard wordt slechts één keer gemaakt.

React gebruikt deze daarna zo vaak als nodig.

[Afbeelding Component Tree]

💡 Waarom gebruiken we componenten?

Componenten hebben veel voordelen.

✅ Je schrijft minder code.

✅ Je kunt onderdelen hergebruiken.

✅ Je project blijft overzichtelijk.

✅ Je kunt eenvoudiger samenwerken.

Daarom bestaat vrijwel iedere professionele React-applicatie uit componenten.

📖 Een professionele projectstructuur

Tot nu toe werkte je in:

Welcome.jsx

Vanaf vandaag gaan we werken zoals professionele React-projecten zijn opgebouwd.

Maak in de map:

resources/js

de volgende mappen aan.

Components

Pages

[Screenshot mappenstructuur]

🛠️ Opdracht 1 – Maak de eerste component

Maak een nieuw bestand.

resources/js/Components/Header.jsx

Plaats hierin de volgende code.

export default function Header() {
    return (
        <header>
            <h1>🎮 Game Collection</h1>
        </header>
    );
}

Sla het bestand op.

🛠️ Opdracht 2 – Footer maken

Maak vervolgens:

Footer.jsx

export default function Footer() {
    return (
        <footer>

            <p>ROC van Amsterdam</p>

        </footer>
    );
}

🛠️ Opdracht 3 – GameCard maken

Maak een derde component.

GameCard.jsx

export default function GameCard() {
    return (
        <div>

            Minecraft

        </div>
    );
}

Nog even geduld.

In de volgende lessen gaan we deze component veel slimmer maken.

🛠️ Opdracht 4 – Nieuwe pagina maken

Maak nu:

resources/js/Pages/GameCollection.jsx

Plaats hierin de volgende code.

import Header from "../Components/Header";
import Footer from "../Components/Footer";
import GameCard from "../Components/GameCard";

export default function GameCollection() {

    return (

        <>

            <Header />

            <GameCard />

            <GameCard />

            <GameCard />

            <Footer />

        </>

    );

}

💡 Wat gebeurt hier?

Bovenaan zie je drie imports.

import Header from "../Components/Header";

Hiermee vertel je React:

Gebruik de component Header uit de map Components.

Daarna kun je de component gebruiken alsof het een HTML-tag is.

<Header />

Dat is één van de sterke punten van React.

🛠️ Opdracht 5 – GameCollection tonen

Open nu:

resources/js/Pages/Welcome.jsx

Vervang de inhoud van <main> (of de centrale content) door je nieuwe component:

<GameCollection />

Voeg bovenaan ook de import toe:

import GameCollection from "./GameCollection";

Controleer of de pagina er ongeveer zo uitziet:

🎮 Game Collection

Minecraft

Minecraft

Minecraft

ROC van Amsterdam

[Screenshot browser]

💡 Wist je dat?

Sommige React-applicaties bestaan uit meer dan 500 componenten.

Juist daarom is een goede mappenstructuur zo belangrijk.

💾 GitHub

Maak een commit.

Les 3 - Eerste componenten gemaakt

Synchroniseer daarna met GitHub.

🤖 AI-opdracht

Vraag ChatGPT:

Waarom zijn componenten één van de belangrijkste onderdelen van React?

Vraag daarna:

Noem drie voordelen van componenten ten opzichte van één groot bestand.

Vergelijk de antwoorden met de theorie uit deze les.

🧠 Kennischeck

1. Wat is een component?
2. Waarom gebruiken we componenten?
3. Wat doet import?
4. Waarom schrijven we <Header />?
5. Waarom maken we een map Components?
6. Waarom maken we een map Pages?
7. Waarom is deze structuur beter dan alles in één bestand?

📤 Inleveren

Lever de volgende onderdelen in:

• 📷 Screenshot van de browser.
• 📷 Screenshot van de map Components.
• 📷 Screenshot van GameCollection.jsx.
• 📷 Screenshot van de GitHub-commit.
• 📄 PDF of TXT met de antwoorden op de kennischeck.
• 📄 De uitwerking van de AI-opdracht.

Les 4 – Props: Maak componenten herbruikbaar

🎯 Leerdoelen

Na deze les kun je:

• uitleggen wat props zijn;
• gegevens doorgeven aan een component;
• meerdere GameCards maken met verschillende gegevens;
• begrijpen waarom props belangrijk zijn;
• componenten hergebruiken zonder code te kopiëren.

📖 Wat ga je vandaag maken?

In de vorige les zag jouw applicatie er ongeveer zo uit.

🎮 Game Collection

Minecraft

Minecraft

Minecraft

ROC van Amsterdam

Dat is natuurlijk niet erg handig.

Je wilt verschillende games laten zien.

Vandaag leer je hoe React dit oplost.

Aan het einde van deze les ziet jouw applicatie er ongeveer zo uit.

🎮 Game Collection

Minecraft
PC

Mario Kart
Nintendo Switch

FIFA 26
PlayStation 5

ROC van Amsterdam

[Screenshot eindresultaat]

📖 Waarom hebben we Props nodig?

Kijk eens naar deze code.

<GameCard />

<GameCard />

<GameCard />

React maakt drie keer exact dezelfde component.

Dat betekent ook drie keer dezelfde informatie.

Maar stel dat je honderd verschillende games wilt tonen.

Moet je dan honderd verschillende GameCards maken?

Natuurlijk niet.

Daarvoor gebruiken we Props.

💡 Wat zijn Props?

Props zijn gegevens die je meegeeft aan een component.

Je kunt props vergelijken met een invulformulier.

De GameCard is steeds hetzelfde.

Alleen de gegevens veranderen.

Bijvoorbeeld:

GameCard

Titel:

Platform:

Genre:

Iedere keer vul je andere gegevens in.

📖 Eerste Props

Open:

Components/GameCard.jsx

De component ziet er nu ongeveer zo uit.

export default function GameCard() {

    return (

        <div>

            Minecraft

        </div>

    );

}

Dat gaan we aanpassen.

🛠️ Opdracht 1 – Props ontvangen

Vervang de code door:

export default function GameCard(props) {

    return (

        <div>

            <h2>{props.title}</h2>

        </div>

    );

}

Hier gebeurt iets nieuws.

props.title

React kijkt nu naar de waarde die je straks meegeeft.

🛠️ Opdracht 2 – Props gebruiken

Open:

Pages/GameCollection.jsx

Vervang de drie GameCards.

<GameCard title="Minecraft" />

<GameCard title="Mario Kart" />

<GameCard title="FIFA 26" />

Sla alles op.

Controleer de browser.

Je ziet nu drie verschillende games.

[Screenshot browser]

💡 Wat gebeurt hier?

React maakt nog steeds drie GameCards.

Alleen krijgt iedere GameCard andere gegevens.

Bijvoorbeeld.

Eerste GameCard

title = Minecraft

Tweede GameCard

title = Mario Kart

Derde GameCard

title = FIFA 26

De component blijft hetzelfde.

Alleen de gegevens veranderen.

🛠️ Opdracht 3 – Platform toevoegen

Pas GameCard aan.

export default function GameCard(props) {

    return (

        <div>

            <h2>{props.title}</h2>

            <p>{props.platform}</p>

        </div>

    );

}

Gebruik daarna:

<GameCard

title="Minecraft"

platform="PC"

/>

<GameCard

title="Mario Kart"

platform="Nintendo Switch"

/>

<GameCard

title="FIFA 26"

platform="PlayStation 5"

/>

Controleer opnieuw de browser.

🛠️ Opdracht 4 – Genre toevoegen

Voeg nu ook een derde prop toe.

genre

Bijvoorbeeld.

Sandbox

Race

Sport

Werk zowel GameCard als GameCollection bij.

[Screenshot eindresultaat]

💡 Kort samengevat

Een component blijft altijd hetzelfde.

Met Props geef je verschillende gegevens door.

Daardoor kun je één component honderden keren gebruiken.

Dat is één van de grootste voordelen van React.

💾 GitHub

Maak een commit.

Les 4 - Props toegevoegd aan GameCard

Synchroniseer daarna met GitHub.

🤖 AI-opdracht

Vraag ChatGPT:

Leg props uit met een voorbeeld uit het dagelijks leven.

Vergelijk het antwoord met de uitleg uit deze les.

Schrijf daarna in maximaal 75 woorden uit hoe jij props zou uitleggen aan een klasgenoot.

🧠 Kennischeck

1. Wat zijn props?
2. Waarom gebruiken we props?
3. Wat betekent:

props.title

4. Waarom maken we niet voor iedere game een nieuwe component?
5. Welke drie props heb je vandaag gebruikt?
6. Noem één voordeel van props.

📤 Inleveren

Lever de volgende onderdelen in.

• 📷 Screenshot van de browser.
• 📷 Screenshot van GameCard.jsx.
• 📷 Screenshot van GameCollection.jsx.
• 📷 Screenshot van de GitHub-commit.
• 📄 PDF of TXT met de antwoorden op de kennischeck.
• 📄 De uitwerking van de AI-opdracht.

Les 5 – useState: Maak je Game Collection interactief

🎯 Leerdoelen

Na deze les kun je:

• uitleggen wat state is;
• useState gebruiken;
• state aanpassen;
• reageren op een klik van de gebruiker;
• de interface automatisch laten vernieuwen;
• een favorietensysteem maken.

📖 Wat ga je vandaag maken?

Tot nu toe is jouw Game Collection statisch.

De gebruiker kan alleen kijken.

Vandaag gaan we daar verandering in brengen.

Bij iedere game komt een knop.

Door op de knop te klikken kun je een game markeren als favoriet.

Bijvoorbeeld:

🎮 Minecraft

Platform: PC

Genre: Sandbox

🤍 Favoriet

Na het klikken verandert de knop in:

❤️ Favoriet

[Screenshot eindresultaat]

📖 Wat is State?

Tot nu toe veranderde er niets op je pagina.

Alles wat je in JSX schreef bleef hetzelfde.

Maar stel dat een gebruiker:

• op een knop klikt;
• een formulier invult;
• iets zoekt;
• een favoriet toevoegt.

Dan moet de pagina veranderen.

React bewaart zulke gegevens in State.

State betekent letterlijk:

De huidige toestand van de applicatie.

💡 Waarom gebruiken we State?

Stel dat een gebruiker op de knop Favoriet klikt.

React moet onthouden:

• Is deze game favoriet?
• Of niet?

Dat onthoudt React in een state-variabele.

📖 useState

Om state te gebruiken importeer je eerst de hook.

Open:

resources/js/Components/GameCard.jsx

Voeg bovenaan toe:

import { useState } from "react";

🛠️ Opdracht 1 – Eerste state-variabele

Maak boven de return een state-variabele.

const [favorite, setFavorite] = useState(false);

Wat betekent dit?

const [favorite, setFavorite]

React maakt twee dingen.

favorite

Hierin staat de huidige waarde.

En

setFavorite

Hiermee verander je de waarde.

De beginwaarde is:

false

Dus:

De game is nog geen favoriet.

🛠️ Opdracht 2 – Favoriet tonen

Onder de informatie van de game plaats je:

<p>

    {favorite ? "❤️ Favoriet" : "🤍 Geen favoriet"}

</p>

Sla het bestand op.

Er verandert nog niets.

Dat komt omdat de waarde nog nooit verandert.

🛠️ Opdracht 3 – Knop toevoegen

Voeg onder de tekst toe.

<button>

    Wijzig favoriet

</button>

📖 Reageren op een klik

React gebruikt hiervoor:

onClick

Pas de knop aan.

<button

onClick={() => setFavorite(!favorite)}

>

Wijzig favoriet

</button>

💡 Wat gebeurt hier?

Kijk goed naar deze regel.

setFavorite(!favorite)

Stel:

favorite = false

Dan wordt

!favorite

automatisch

true

Klik je nog een keer?

Dan gebeurt precies het omgekeerde.

Hierdoor wisselt de knop steeds tussen:

🤍

❤️

🛠️ Opdracht 4 – Maak de knop slimmer

Verander de knoptekst.

<button

onClick={() => setFavorite(!favorite)}

>

{favorite ? "Verwijder favoriet" : "Maak favoriet"}

</button>

Nu verandert niet alleen het hartje.

Ook de knoptekst verandert automatisch.

[Screenshot browser]

🛠️ Opdracht 5 – Test alle GameCards

Klik op verschillende GameCards.

Wat valt je op?

Iedere GameCard onthoudt zijn eigen favoriete status.

Waarom?

Omdat iedere component zijn eigen state heeft.

Dat is precies de kracht van React.

💡 Wist je dat?

Bij grote React-applicaties kunnen honderden componenten tegelijkertijd hun eigen state hebben.

React zorgt ervoor dat iedere component alleen zijn eigen gegevens beheert.

Daardoor blijft een applicatie snel en overzichtelijk.

💾 GitHub

Maak een commit.

Les 5 - useState favorieten toegevoegd

Synchroniseer daarna met GitHub.

🤖 AI-opdracht

Vraag ChatGPT:

Waarom gebruiken React-programmeurs useState in plaats van gewone JavaScript-variabelen?

Vergelijk de uitleg met deze les.

Beschrijf daarna in je eigen woorden het verschil tussen een gewone variabele en een state-variabele.

🧠 Kennischeck

1. Wat is state?
2. Waarom gebruiken we state?
3. Waarvoor gebruik je useState?
4. Wat betekent:

const [favorite, setFavorite] = useState(false);

5. Wat doet:

setFavorite(!favorite)

6. Waarom onthoudt iedere GameCard zijn eigen favoriete status?
7. Wat gebeurt er als een state-variabele verandert?

📤 Inleveren

Lever de volgende onderdelen in:

• 📷 Screenshot van de browser waarop minimaal één game als favoriet is gemarkeerd.
• 📷 Screenshot van GameCard.jsx.
• 📷 Screenshot van de GitHub-commit.
• 📄 PDF of TXT met de antwoorden op de kennischeck.
• 📄 De uitwerking van de AI-opdracht.