Skip to main content

React Fundamentals – Game Collection /in ontwikkeling


Les 1 – Introductie React & Ontwikkelomgeving

🎯 Leerdoelen

Na deze les kun je:

  • uitleggen wat React is;
  • uitleggen waarom React wordt gebruikt;
  • het verschil beschrijven tussen Front-end en Back-end;
  • een nieuw React-project maken met Vite;
  • de belangrijkste React-bestanden herkennen;
  • je eerste React-pagina aanpassen;
  • je project opslaan in GitHub.

🎮 Wat ga je bouwen?

Tijdens deze module werk je aan één project:

🎮 Game Collection

Je bouwt stap voor stap een moderne webapplicatie waarin gebruikers games kunnen bekijken, zoeken en beheren.

Aan het einde van deze module kun je onder andere:

  • 🎮 Games weergeven
  • 🔍 Games zoeken
  • ❤️ Favorieten toevoegen
  • 📄 Detailpagina's maken
  • 🧩 Componenten bouwen
  • ⚡ Dynamische React-applicaties ontwikkelen

[Afbeelding eindresultaat Game Collection]

afbeelding.png

📖 Waarom React?

Stel je voor dat je de Game Collection maakt met alleen HTML.

Voor iedere game zou je opnieuw moeten schrijven:

  • titel;
  • afbeelding;
  • platform;
  • knop;
  • beschrijving.

Heb je 200 games? Dan schrijf je dezelfde code 200 keer.

Dat is natuurlijk niet handig. React lost dit probleem op.

React maakt gebruik van componenten.

Een component maak je één keer. Daarna gebruik je hem zo vaak als je wilt.

💡 Wat is React?

React is een JavaScript-library waarmee je moderne gebruikersinterfaces bouwt.

React is ontwikkeld door Meta (Facebook).

React wordt gebruikt door onder andere:

  • Facebook
  • Instagram
  • Netflix
  • Discord
  • Airbnb

React is tegenwoordig één van de meest gebruikte technieken voor Front-end ontwikkeling.

🛠️ Benodigdheden

Voor deze module heb je nodig:

  • Visual Studio Code
  • Node.js (LTS-versie)
  • Git
  • GitHub-account

Controleer of alles correct is geïnstalleerd.

Open een terminal en voer uit:

node -v
npm -v
git --version


Wanneer alle versies zichtbaar zijn, ben je klaar om te beginnen.

📖 Componenten

Een React-applicatie bestaat uit kleine bouwstenen.

Deze noemen we componenten.

Onze Game Collection zou er bijvoorbeeld zo uit kunnen zien.

App

├── Header

├── SearchBar

├── GameList

│ ├── GameCard

│ ├── GameCard

│ ├── GameCard

│ └── GameCard

└── Footer


Iedere GameCard wordt slechts één keer gemaakt.
React hergebruikt deze component daarna automatisch. Dat scheelt enorm veel programmeerwerk.

[Afbeelding componentenboom]

afbeelding.png

📖 Front-end versus Back-end

Een webapplicatie bestaat meestal uit twee delen.

Front-end Back-end
Alles wat de gebruiker ziet Verwerking achter de schermen
HTML Database
CSS API
JavaScript Server
React Laravel (behandelen we in deel 2)

Tijdens deze module richten we ons uitsluitend op de Front-end.

In de vervolgreeks koppelen we React aan een Back-end.

[Afbeelding Front-end vs Back-end]

afbeelding.png

💡 Wist je dat?

React gebruikt een techniek die Virtual DOM heet.

Hierdoor wordt niet de hele pagina opnieuw opgebouwd.

Alleen het onderdeel dat verandert wordt opnieuw weergegeven. Daardoor voelt een React-applicatie snel en soepel aan.

🛠️ Opdracht 1 – React installeren

Tijdens deze module gebruiken we Vite.

Vite is de officiële manier om een nieuw React-project te maken.

Stap 31

Maak een nieuw React-project.

npm create vite@latest game-collection -- --template react

💡 Waarom gebruiken we Vite?

Om met React te kunnen werken hebben we een ontwikkelomgeving nodig.
Tegenwoordig wordt bijna altijd Vite gebruikt.

Vite is:

  • sneller, moderner, eenvoudiger, de standaard binnen nieuwe React-projecten.

Daarom gebruiken wij Vite tijdens deze module.

Stap 2

Open het project in Visual Studio Code. Zorg ervoor dat je de juiste directory hebt geopend.

Ga naar de projectmap.

cd game-collection

Stap 3

Installeer alle packages.

npm install

Stap 4

Start de ontwikkelomgeving.

Terminal in VScode

npm run dev

Je ziet nu ongeveer:

VITE v7.x.x ready

➜ Local: http://localhost:5173/

Als alles goed is zie je de standaard React pagina

[Screenshot Laravel Breeze React startpagina]

afbeelding.png

🛠️ Opdracht 2 – Verken de projectstructuur

React-projecten bestaan uit verschillende mappen.

In deze module ga je vooral werken in:

src| │Bestand        ├──| assetsFunctie                                    ├──|
| -------------- | ------------------------------------------ |
| `src`          | Hier staat bijna alle React-code           |
| `App.jsxjsx`      ├──| De hoofdcomponent van de applicatie        |
| `main.jsxjsx`     └──| index.cssStartpunt van de React-app                 |
| `public`       | Afbeeldingen en andere statische bestanden |
| `package.json` | Overzicht van alle packages                |

Tijdens[Afbeelding dezeprojectstructuur]

module
werk
je
vooral
in:

🛠️ Opdracht 4 – Pas de eerste React-pagina aan

Open:

src/App.jsx
BestandFunctie
App.jsx Hoofdcomponent van de applicatie
main.jsxStartpunt van React
assetsAfbeeldingen en andere bestanden

Vervang de bestaande inhoud door:

function App() {
    return (
        <>
            <h1>🎮 Game Collection</h1>

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

            <p>Naam: Jouw naam</p>

            <p>Studentnummer: Jouw studentnummer</p>

            <p>Klas: Jouw klas</p>
        </>
    );
}

export default App;

Sla het bestand op.

De browser wordt automatisch bijgewerkt.

💡 Wist je dat?

React past de browser automatisch aan zodra je een bestand opslaat.

Dit heet Hot Reloading.

Daardoor zie je direct het resultaat van je wijzigingen, zonder de pagina handmatig te verversen.

💾 GitHub

SlaNu jede projectapplicatie op.werkt is het tijd om de eerste werkende versie op te slaan.

Open Source Control.Control in Visual Studio Code.

Maak een commit.commit met het bericht:

Les 1 - React ontwikkelomgevingomgeving gereed

VoerSynchroniseer daarna met GitHub.
Vanaf nu maak je na iedere werkende opdracht een Pushnieuwe of Sync uit.commit.

Github

💾 GitHub – Je project voor de eerste keer uploaden

Nu de applicatie werkt, slaan we de eerste werkende versie op in GitHub.

Stap 1 – Controleer de status

Open een terminal in Visual Studio Code en voer uit:

git status


Je ziet welke bestanden nieuw of gewijzigd zijn.

Stap 2 – Voeg alle bestanden toe

git add .

Controleer opnieuw:

git status


Nu zie je dat alle bestanden klaarstaan voor een commit.

Stap 3 – Maak een commit

git commit -m "Les 1 - React ontwikkelomgeving gereed"


Controleer de geschiedenis:

git log --oneline


je ziet nu jouw eerste commit.

Stap 4 – Maak een repository op GitHub

  1. Log in op GitHub.

  2. Klik op New Repository.

  3. Geef de repository de naam:

game-collection


  1. Kies Public.

  2. Klik op Create repository.

 

Let op: Voeg geen README, .gitignore of License toe. Deze zijn al aanwezig in het Laravel-project.

 

Stap 5 – Koppel GitHub aan je project

GitHub toont nu een aantal opdrachten.

Voer deze uit in de terminal.

Vervang <jouw-gebruikersnaam> door je eigen GitHub-gebruikersnaam.

git remote add origin https://github.com/<jouw-gebruikersnaam>/game-collection.git


Controleer of de koppeling is gemaakt:

git remote -v


Stap 6 – Upload je project

git branch -M main


Daarna:

git push -u origin main


Mogelijk vraagt GitHub om in te loggen.

Na het uploaden zie je jouw project online staan.

Vanaf nu

Na iedere werkende opdracht gebruik je de volgende Git-commando's:

git status

git add .


git commit -m "Korte beschrijving van je wijziging"


git push


Meer is meestal niet nodig.

💡 Wist je dat?

Gebruik altijd een duidelijk commitbericht.

Niet:

update


Maar bijvoorbeeld:

Les 2 - Eerste React component toegevoegd


of

Zoekfunctie toegevoegd


Zo kun je later precies zien welke wijzigingen je hebt gemaakt.


🤖 AI-opdracht

Gebruik ChatGPT.

Prompt:

Leg uit wat React is alsof je het uitlegt aan een eerstejaars mbo Software Developer.

Vergelijk de uitleg met deze les.

Beschrijf in maximaal 100 woorden welke uitleg jij duidelijker vond.

🧠 Kennischeck

  1. Wat is React?
  2. Waarom gebruiken veel bedrijven React?
  3. Wat is een component?
  4. Wat is het verschil tussen Front-end en Back-end?
  5. Waarom gebruiken wijwe Laravel Breeze?Vite?
  6. WelkeWat map bevatis de React-pagina's?functie van App.jsx?
  7. Wat is de functie van main.jsx?
  8. Waarom gebruiken we GitHub?GitHub tijdens deze module?

📤 Inleveren

Lever in:de volgende onderdelen in via Canvas.

  • 📷 Screenshot van de draaiende Laravel Breeze React-pagina.applicatie.
  • 📷 Screenshot van de projectstructuur in Visual Studio Code.App.jsx.
  • 📷 Screenshot van de eerste GitHub-commit.
  • 📄 UitwerkingPDF of TXT met de antwoorden op de kennischeck.
  • 📄 De uitwerking van de AI-opdracht.
  • 📄 Antwoorden kennischeck.



Les 2 – JSX: Bouw je eerste Game Collection pagina

🎯 Leerdoelen

Na deze les kun je:

📖 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:

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

Les 3 – Componenten: Bouw je eerste React-componenten

🎯 Leerdoelen

Na deze les kun je:

📖 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:

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]

afbeelding.png

📖 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]

afbeelding.png

💡 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:

Les 4 – Props: Maak componenten herbruikbaar

🎯 Leerdoelen

Na deze les kun je:

📖 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


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

📤 Inleveren

Lever de volgende onderdelen in.

Les 5 – useState: Maak je Game Collection interactief

🎯 Leerdoelen

Na deze les kun je:

📖 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:

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:

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);


  1. Wat doet:
setFavorite(!favorite)


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

📤 Inleveren

Lever de volgende onderdelen in:

Les 6 – Arrays en map(): Toon automatisch alle games

🎯 Leerdoelen

Na deze les kun je:

📖 Wat ga je vandaag maken?

Tot nu toe voeg je iedere game handmatig toe.

<GameCard />
<GameCard />
<GameCard />


Dat werkt prima voor drie games.

Maar stel dat jouw Game Collection straks uit 500 games bestaat.

Ga je dan 500 keer dezelfde code schrijven?

Natuurlijk niet.

Vandaag ga je React het werk laten doen.

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

games.map(...)


En React maakt daarna automatisch alle GameCards.

[Screenshot eindresultaat]

📖 Waarom een array?

Een array is een lijst waarin je meerdere gegevens kunt opslaan.

Bijvoorbeeld:

const games = [

    "Minecraft",

    "Mario Kart",

    "FIFA"

];


React gebruikt heel vaak arrays.

Bijvoorbeeld voor:

💡 Objecten in een array

In plaats van alleen namen kunnen we complete games opslaan.

const games = [

    {
        title: "Minecraft",
        platform: "PC",
        genre: "Sandbox"
    },

    {
        title: "Mario Kart",
        platform: "Nintendo Switch",
        genre: "Race"
    },

    {
        title: "FIFA 26",
        platform: "PlayStation 5",
        genre: "Sport"
    }

];


Nu bevat iedere game meerdere eigenschappen.

🛠️ Opdracht 1 – Maak een games-array

Open:

resources/js/Pages/GameCollection.jsx


Maak boven de return de volgende array.

const games = [

    {
        id: 1,
        title: "Minecraft",
        platform: "PC",
        genre: "Sandbox"
    },

    {
        id: 2,
        title: "Mario Kart",
        platform: "Nintendo Switch",
        genre: "Race"
    },

    {
        id: 3,
        title: "FIFA 26",
        platform: "PlayStation 5",
        genre: "Sport"
    }

];


[Screenshot GameCollection.jsx]

📖 Wat doet map()?

map() loopt door alle onderdelen van een array.

Voor iedere game voert React dezelfde code uit.

Je kunt het vergelijken met een for-lus, maar dan speciaal voor React.

Game 1

↓

GameCard

↓

Game 2

↓

GameCard

↓

Game 3

↓

GameCard


[Afbeelding map()-principe]

🛠️ Opdracht 2 – Gebruik map()

Verwijder de drie losse GameCards.

Vervang deze door:

{
    games.map(game => (

        <GameCard />

    ))
}


Er verschijnen nu drie GameCards.

Maar...

Alle drie zijn nog leeg.

Dat lossen we nu op.

🛠️ Opdracht 3 – Geef props door

Pas de code aan.

{
    games.map(game => (

        <GameCard

            title={game.title}
            platform={game.platform}
            genre={game.genre}

        />

    ))
}


Nu gebruikt iedere GameCard de gegevens uit de array.

Controleer of alle drie de games zichtbaar zijn.

[Screenshot browser]

📖 Waarom krijgen we een waarschuwing?

Misschien zie je in de browser of terminal een melding.

React zegt dat iedere component een key nodig heeft.

Waarom?

React moet kunnen herkennen welke GameCard bij welke game hoort.

Daarom krijgt iedere GameCard een unieke sleutel.

🛠️ Opdracht 4 – Voeg een key toe

Gebruik de id.

{
    games.map(game => (

        <GameCard

            key={game.id}

            title={game.title}

            platform={game.platform}

            genre={game.genre}

        />

    ))
}


De waarschuwing is nu verdwenen.

💡 Waarom is een key belangrijk?

Stel dat je later een game verwijdert.

React moet precies weten:

Daarom moet iedere component een unieke key hebben.

Gebruik hiervoor bij voorkeur een id uit de data.

🛠️ Opdracht 5 – Voeg zelf twee games toe

Breid de array uit met minimaal twee extra games.

Bijvoorbeeld:

Controleer of ze automatisch verschijnen.

Je hoeft verder niets aan je code te veranderen.

Dat is precies de kracht van map().

[Screenshot eindresultaat]

💡 Wist je dat?

Bij een webshop met 20.000 producten maakt React op precies dezelfde manier automatisch duizenden componenten.

map() is daarom één van de meest gebruikte functies binnen React.

💾 GitHub

Maak een commit.

Les 6 - map() toegevoegd


Synchroniseer daarna met GitHub.

🤖 AI-opdracht

Vraag ChatGPT:

Leg de JavaScript-functie map() uit aan een eerstejaars mbo Software Developer.

Vraag daarna:

Waarom gebruikt React zo vaak map()?

Vergelijk de antwoorden met de theorie uit deze les.

🧠 Kennischeck

  1. Wat is een array?
  2. Waarom gebruiken we objecten in een array?
  3. Wat doet map()?
  4. Waarom gebruiken we map() in React?
  5. Waarom heeft iedere GameCard een key nodig?
  6. Waarom gebruiken we een id als key?
  7. Wat gebeurt er als je een extra game toevoegt aan de array?

📤 Inleveren

Lever de volgende onderdelen in:

Les 7 – Zoeken met formulieren en filter()

🎯 Leerdoelen

Na deze les kun je:

📖 Wat ga je vandaag maken?

Je Game Collection bevat inmiddels meerdere games.

Maar stel dat je straks 200 games hebt.

Dan wil je natuurlijk kunnen zoeken.

Vandaag voeg je een zoekfunctie toe.

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

🎮 Game Collection

Zoeken:

mine

-------------------------

Minecraft

Platform: PC

Genre: Sandbox


Typ je:

fi


Dan verschijnt bijvoorbeeld:

FIFA 26


[Screenshot eindresultaat]

📖 Waarom hebben we een zoekfunctie nodig?

Bij een kleine lijst kun je eenvoudig scrollen.

Maar bij tientallen of honderden games wordt dat lastig.

Vrijwel iedere webapplicatie gebruikt daarom een zoekfunctie.

Bijvoorbeeld:

Ook onze Game Collection krijgt vandaag een zoekfunctie.

💡 Hoe werkt zoeken?

Zoeken bestaat uit drie stappen.

  1. De gebruiker typt iets.
  2. React bewaart deze tekst.
  3. React laat alleen de juiste games zien.
Gebruiker

↓

Zoekveld

↓

searchTerm

↓

filter()

↓

GameCards


[Afbeelding zoekproces]

🛠️ Opdracht 1 – Zoekterm opslaan

Open:

resources/js/Pages/GameCollection.jsx


Importeer useState.

import { useState } from "react";


Maak daarna een nieuwe state-variabele.

const [searchTerm, setSearchTerm] = useState("");


De zoekterm is nu nog leeg.

🛠️ Opdracht 2 – Zoekveld maken

Plaats boven de GameCards een invoerveld.

<input

    type="text"

    placeholder="Zoek een game..."

    value={searchTerm}

    onChange={(event) => setSearchTerm(event.target.value)}

/>


Sla het bestand op.

Controleer of je kunt typen.

Er gebeurt verder nog niets.

Dat lossen we in de volgende stap op.

📖 Wat doet onChange?

Iedere keer wanneer je een letter typt, wordt onChange uitgevoerd.

onChange={(event) => setSearchTerm(event.target.value)}


React leest:

event.target.value


Dat is precies de tekst die de gebruiker heeft ingevoerd.

Deze tekst wordt opgeslagen in:

searchTerm


🛠️ Opdracht 3 – Games filteren

Maak onder de games-array een nieuwe variabele.

const filteredGames = games.filter(game =>

    game.title.toLowerCase().includes(searchTerm.toLowerCase())

);


Wat gebeurt hier?

🛠️ Opdracht 4 – Gebruik de gefilterde lijst

Zoek deze code.

games.map(...)


Vervang deze door:

filteredGames.map(game => (

    <GameCard

        key={game.id}

        title={game.title}

        platform={game.platform}

        genre={game.genre}

    />

))


Sla alles op.

Probeer nu te zoeken.

Bijvoorbeeld:

mine

mario

fifa


De lijst verandert automatisch.

[Screenshot browser]

💡 Waarom gebruiken we filter()?

filter() maakt een nieuwe lijst.

Alleen de games die voldoen aan de voorwaarde blijven over.

Bijvoorbeeld.

Minecraft

Mario Kart

FIFA

Cyberpunk


Zoekterm:

ma


Resultaat:

Mario Kart


React gebruikt daarna alleen deze nieuwe lijst.

🛠️ Opdracht 5 – Geen resultaten gevonden

Soms bestaat een game niet.

Bijvoorbeeld:

Pong123


Dan is het netjes om een melding te tonen.

Voeg boven de map() toe.

{

filteredGames.length === 0 &&

<p>Geen games gevonden.</p>

}


Controleer of deze melding verschijnt wanneer er geen resultaten zijn.

[Screenshot browser]

💡 Wist je dat?

Zoekmachines zoals Google gebruiken natuurlijk veel ingewikkeldere algoritmes.

Maar vrijwel iedere zoekfunctie begint met hetzelfde idee:

💾 GitHub

Maak een commit.

Les 7 - Zoekfunctie toegevoegd


Synchroniseer daarna met GitHub.

🤖 AI-opdracht

Vraag ChatGPT:

Leg het verschil uit tussen map() en filter().

Vraag daarna:

Wanneer gebruik je filter() en wanneer map()?

Vergelijk de uitleg met deze les.

Schrijf daarna in maximaal 100 woorden uit wat volgens jou het belangrijkste verschil is.

🧠 Kennischeck

  1. Waarvoor gebruiken we useState in deze les?
  2. Wat doet onChange?
  3. Wat bevat event.target.value?
  4. Wat doet filter()?
  5. Waarom gebruiken we includes()?
  6. Waarom gebruiken we toLowerCase()?
  7. Waarom maken we een nieuwe variabele filteredGames?
  8. Wat gebeurt er wanneer geen enkele game wordt gevonden?

📤 Inleveren

Lever de volgende onderdelen in:

Les 8 – Games laden uit een JSON-bestand

🎯 Leerdoelen

Na deze les kun je:

📖 Wat ga je vandaag maken?

Tot nu toe stonden alle games in de broncode.

const games = [
   ...
]


Dat werkt prima.

Maar stel dat je straks 100 games hebt.

Of 1000.

Dan wordt je code steeds groter.

Daarom gaan we de gegevens verplaatsen naar een apart bestand.

Vanaf vandaag haalt React de games automatisch op.

De Game Collection blijft er hetzelfde uitzien.

Alleen de manier waarop de gegevens worden geladen verandert.

[Screenshot eindresultaat]

📖 Waarom een JSON-bestand?

Een applicatie bestaat meestal uit:

Tot nu toe stonden deze door elkaar.

Vanaf vandaag scheiden we deze van elkaar.

De code blijft in React.

De gegevens komen in een JSON-bestand.

Dat maakt je project overzichtelijker.

💡 Wat is JSON?

JSON staat voor:

JavaScript Object Notation

Het is een standaardformaat om gegevens op te slaan.

Bijvoorbeeld:

[
    {
        "id": 1,
        "title": "Minecraft",
        "platform": "PC",
        "genre": "Sandbox"
    }
]


Vrijwel iedere moderne webapplicatie gebruikt JSON.

Later in deze opleiding zal Laravel ook JSON terugsturen.

🛠️ Opdracht 1 – Maak games.json

Open de map:

public


Maak een nieuw bestand:

games.json


Plaats hierin de volgende gegevens.

[
    {
        "id": 1,
        "title": "Minecraft",
        "platform": "PC",
        "genre": "Sandbox"
    },
    {
        "id": 2,
        "title": "Mario Kart",
        "platform": "Nintendo Switch",
        "genre": "Race"
    },
    {
        "id": 3,
        "title": "FIFA 26",
        "platform": "PlayStation 5",
        "genre": "Sport"
    },
    {
        "id": 4,
        "title": "Cyberpunk 2077",
        "platform": "PC",
        "genre": "RPG"
    },
    {
        "id": 5,
        "title": "Zelda: Tears of the Kingdom",
        "platform": "Nintendo Switch",
        "genre": "Adventure"
    }
]


[Screenshot games.json]

📖 Waarom hebben we useEffect nodig?

Stel je voor dat React de gegevens steeds opnieuw zou ophalen.

Bij iedere klik.

Bij iedere wijziging.

Dat zou erg langzaam zijn.

Wij willen de games maar één keer laden.

Namelijk wanneer de pagina wordt geopend.

Daarvoor gebruiken we:

useEffect()


🛠️ Opdracht 2 – useEffect importeren

Open:

GameCollection.jsx


Importeer bovenaan:

import { useEffect, useState } from "react";


🛠️ Opdracht 3 – Nieuwe state

Vervang de oude array.

Maak hiervoor in de plaats:

const [games, setGames] = useState([]);


De lijst is nu nog leeg.

🛠️ Opdracht 4 – Gegevens ophalen

Voeg onder de state toe.

useEffect(() => {

    fetch("/games.json")

        .then(response => response.json())

        .then(data => {

            setGames(data);

        });

}, []);


Sla alles op.

Controleer de browser.

De games verschijnen opnieuw.

Maar nu komen ze uit het JSON-bestand.

[Screenshot browser]

💡 Wat gebeurt hier?

Laten we de code stap voor stap bekijken.

Stap 1

fetch("/games.json")


React haalt het JSON-bestand op.

Stap 2

response.json()


De tekst uit het bestand wordt omgezet naar JavaScript.

Stap 3

setGames(data)


De gegevens worden opgeslagen in de state.

Stap 4

React tekent automatisch alle GameCards opnieuw.

Daar hoef jij niets extra's voor te doen.

📖 Waarom staat er [] achter useEffect?

Onderaan zie je:

}, []);


Deze lege array betekent:

Voer deze code slechts één keer uit.

Namelijk wanneer de pagina wordt geopend.

Dat is precies wat we willen.

🛠️ Opdracht 5 – Test je applicatie

Open:

games.json


Voeg zelf een nieuwe game toe.

Bijvoorbeeld:

{
    "id": 6,
    "title": "Rocket League",
    "platform": "PC",
    "genre": "Sport"
}


Sla het bestand op.

Vernieuw de browser.

De nieuwe game verschijnt automatisch.

Je hoeft niets in React aan te passen.

Dat is de kracht van een externe gegevensbron.

[Screenshot browser]

💡 Wist je dat?

Vrijwel iedere professionele React-app haalt gegevens op via:

Later in deze opleiding vervangen we games.json door een echte Laravel-back-end.

De React-code blijft bijna hetzelfde.

💾 GitHub

Maak een commit.

Les 8 - Games laden vanuit JSON


Synchroniseer daarna met GitHub.

🤖 AI-opdracht

Vraag ChatGPT:

Waarom gebruiken veel webapplicaties JSON in plaats van gegevens direct in de code te plaatsen?

Vraag daarna:

Leg useEffect uit aan een eerstejaars mbo Software Developer.

Vergelijk de antwoorden met deze les.

🧠 Kennischeck

  1. Wat is JSON?
  2. Waarom gebruiken we een JSON-bestand?
  3. Waarvoor gebruiken we fetch()?
  4. Waarom gebruiken we useEffect()?
  5. Waarom gebruiken we setGames()?
  6. Wat betekent de lege array:
[]


  1. Waarom hoeven we na het toevoegen van een nieuwe game de React-code niet meer aan te passen?

📤 Inleveren

Lever de volgende onderdelen in.

Les 9 – React Router: Maak een detailpagina voor een game

🎯 Leerdoelen

Na deze les kun je:

📖 Wat ga je vandaag maken?

Tot nu toe toont jouw Game Collection alleen een overzicht van alle games.

Dat werkt prima.

Maar stel dat een gebruiker meer informatie over een game wil zien.

Dan wil je niet alle informatie op de overzichtspagina zetten.

Daarom maken we vandaag een detailpagina.

Aan het einde van deze les kun je op een game klikken en verschijnt een nieuwe pagina met extra informatie.

Bijvoorbeeld:

🎮 Minecraft

Platform: PC

Genre: Sandbox

Beschrijving:
Minecraft is een sandbox-game waarin je een eigen wereld kunt bouwen.

❤️ Favoriet

[ Terug naar overzicht ]


[Screenshot eindresultaat]

📖 Waarom React Router?

Een gewone website bestaat uit meerdere pagina's.

Bijvoorbeeld:

React werkt meestal als een Single Page Application (SPA).

Dat betekent dat de browser niet steeds een nieuwe pagina laadt.

React wisselt alleen de inhoud van de pagina.

Dat gebeurt met React Router.

💡 Hoe werkt React Router?

Stel dat een gebruiker op Minecraft klikt.

Overzicht

↓

Klik op Minecraft

↓

/game/1

↓

Detailpagina


React Router zorgt ervoor dat de juiste pagina wordt weergegeven.

[Afbeelding Router-principe]

🛠️ Opdracht 1 – React Router installeren

Open een terminal.

Voer het volgende commando uit.

npm install react-router-dom


Controleer of de installatie is voltooid.

🛠️ Opdracht 2 – BrowserRouter toevoegen

Open:

resources/js/app.jsx


Importeer:

import { BrowserRouter } from "react-router-dom";


Plaats vervolgens je applicatie binnen de router.

<BrowserRouter>

    <App />

</BrowserRouter>


[Screenshot app.jsx]

🛠️ Opdracht 3 – Maak een detailpagina

Maak een nieuw bestand.

resources/js/Pages/GameDetail.jsx


Plaats hierin:

export default function GameDetail() {

    return (

        <>

            <h1>Game Detail</h1>

        </>

    );

}


🛠️ Opdracht 4 – Routes maken

Open:

App.jsx


Importeer:

import {

BrowserRouter,

Routes,

Route

} from "react-router-dom";


Maak de routes.

<Routes>

<Route

path="/"

element={<GameCollection />}

/>

<Route

path="/game/:id"

element={<GameDetail />}

/>

</Routes>


Hiermee heb je twee pagina's gemaakt.

URL Pagina
/ Overzicht
/game/:id Detailpagina

📖 Wat betekent :id?

Kijk eens naar deze route.

/game/:id


:id is een routeparameter.

Bijvoorbeeld:

/game/1

/game/2

/game/3


React Router bewaart dit getal.

Later kunnen we hiermee precies de juiste game zoeken.

🛠️ Opdracht 5 – Klikbare GameCards maken

Open:

GameCard.jsx


Importeer:

import { Link } from "react-router-dom";


Vervang de titel door:

<Link to={`/game/${props.id}`}>

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

</Link>


Vergeet niet in GameCollection.jsx ook de id als prop door te geven.

id={game.id}


Nu kun je op iedere game klikken.

🛠️ Opdracht 6 – Routeparameter uitlezen

Open:

GameDetail.jsx


Importeer:

import { useParams } from "react-router-dom";


Maak vervolgens:

const { id } = useParams();


Toon het id.

<h1>Game {id}</h1>


Klik nu op verschillende games.

Controleer of het juiste nummer verschijnt.

[Screenshot browser]

🛠️ Opdracht 7 – Terug naar overzicht

Importeer opnieuw:

Link


Voeg onderaan toe.

<Link to="/">

← Terug naar overzicht

</Link>


Controleer of de knop werkt.

💡 Wist je dat?

Vrijwel iedere moderne webapplicatie gebruikt routing.

Bijvoorbeeld:

Ook zij gebruiken routes om gebruikers tussen pagina's te laten navigeren.

💾 GitHub

Maak een commit.

Les 9 - React Router toegevoegd


Synchroniseer daarna met GitHub.

🤖 AI-opdracht

Vraag ChatGPT:

Leg React Router uit alsof je het uitlegt aan een eerstejaars mbo Software Developer.

Vraag daarna:

Waarom gebruiken webapplicaties routeparameters zoals /game/1?

Vergelijk de uitleg met deze les.

🧠 Kennischeck

  1. Waarom gebruiken we React Router?
  2. Wat is een Single Page Application?
  3. Wat doet BrowserRouter?
  4. Wat doet Routes?
  5. Wat doet Route?
  6. Wat betekent :id?
  7. Waarvoor gebruiken we useParams()?
  8. Waarom gebruiken we Link in plaats van een gewone <a>-tag?

📤 Inleveren

Lever de volgende onderdelen in:

Les 10 – Eindopdracht Game Collection

🎯 Leerdoelen

Na deze les kun je:

  • een complete React-applicatie bouwen;
  • componenten hergebruiken;
  • props toepassen;
  • state gebruiken;
  • zoeken binnen gegevens;
  • gegevens laden uit een JSON-bestand;
  • GitHub gebruiken voor versiebeheer;
  • je eigen code testen en verbeteren.

📖 Wat ga je vandaag maken?

Tijdens de afgelopen lessen heb je stap voor stap een Game Collection gebouwd.

Vandaag rond je deze applicatie af.

Je laat zien dat je alle onderdelen uit deze module beheerst.

De eindopdracht lijkt op een opdracht die je tijdens een stage of bij een softwarebedrijf kunt krijgen.

🎮 Opdracht

Bouw een complete Game Collection.

Gebruik hierbij alle technieken die je tijdens deze module hebt geleerd.

Je docent beoordeelt niet alleen of de applicatie werkt, maar ook of de code overzichtelijk is opgebouwd.

✅ Verplichte onderdelen

De applicatie moet minimaal bevatten:

Pagina

  • Een duidelijke titel.
  • Een nette opmaak.
  • Een overzicht van meerdere games.

Componenten

Gebruik minimaal de volgende componenten:

  • Header
  • Footer
  • GameCard

Je mag uiteraard extra componenten toevoegen.

Props

Gebruik props om gegevens door te geven aan GameCard.

Bijvoorbeeld:

  • titel
  • platform
  • genre

useState

Gebruik state voor minimaal:

  • favorieten
  • zoekterm

Zoekfunctie

Maak een werkende zoekfunctie.

De lijst moet automatisch worden bijgewerkt tijdens het typen.

JSON

De games worden geladen vanuit:

public/games.json


Gebruik hiervoor:

  • fetch()
  • useEffect()

Favorieten

De gebruiker moet games als favoriet kunnen markeren.

Gebruik hiervoor een knop met een hartje.

CSS

Geef de applicatie een nette uitstraling.

Gebruik bijvoorbeeld:

  • kleuren
  • marges
  • afgeronde hoeken
  • hover-effecten

💡 Tips

Werk stap voor stap.

Controleer na iedere wijziging of de applicatie nog werkt.

Maak regelmatig een GitHub-commit.

💾 GitHub

Maak minimaal drie commits.

Bijvoorbeeld:

Les 10 - Layout verbeterd



Les 10 - Zoekfunctie afgerond



Les 10 - Eindopdracht voltooid


Synchroniseer daarna met GitHub.

🤖 AI-opdracht

Gebruik AI als hulpmiddel.

Vraag ChatGPT bijvoorbeeld om:

  • een mooiere layout;
  • een betere GameCard;
  • extra CSS;
  • een donkere modus;
  • iconen.

Belangrijk

Gebruik AI alleen als hulpmiddel.

Je moet kunnen uitleggen wat de code doet.

Beschrijf kort:

  • welke prompt je hebt gebruikt;
  • welke code AI heeft voorgesteld;
  • welke aanpassingen je zelf hebt gedaan.

⭐ Bonusopdracht

Kies één van de onderstaande uitbreidingen.

Bonus 1 – Sorteerfunctie ⭐

Voeg een keuzelijst toe.

De gebruiker kan sorteren op:

  • Titel
  • Platform
  • Genre

Bonus 2 – Donkere modus ⭐⭐

Maak een knop waarmee de gebruiker kan wisselen tussen:

🌞 Light Mode

🌙 Dark Mode

Bonus 3 – React Icons ⭐⭐

Gebruik React Icons.

Bijvoorbeeld:

  • ❤️ Favoriet
  • 🔍 Zoeken
  • 🎮 Games

Bonus 4 – Extra gegevens ⭐⭐

Breid games.json uit met:

  • afbeelding
  • releasejaar
  • uitgever
  • beoordeling

Toon deze informatie ook in de GameCard.

Bonus 5 – Eigen ontwerp ⭐⭐⭐

Maak je eigen Game Collection.

Bijvoorbeeld:

  • Retro Games
  • Nintendo Collection
  • PlayStation Collection
  • Steam Library

Zorg voor een volledig eigen uitstraling.

💡 Wist je dat?

De applicatie die je nu hebt gebouwd vormt de basis voor de volgende module.

Daar ga je de gegevens niet meer uit een JSON-bestand halen, maar uit een Laravel-back-end.

Je hoeft de React-componenten dan nauwelijks aan te passen.

Dat is precies waarom React zoveel wordt gebruikt.

🧠 Kennischeck

Beantwoord de onderstaande vragen.

  1. Waarom gebruiken we componenten?
  2. Wat zijn props?
  3. Wanneer gebruik je useState?
  4. Waarvoor gebruiken we useEffect?
  5. Waarom gebruiken we JSON?
  6. Wat doet fetch()?
  7. Waarom gebruiken we GitHub?
  8. Welke React-onderwerpen vond jij het lastigst?
  9. Waar ben je het meest trots op?
  10. Welke uitbreiding zou jij in de volgende versie van jouw Game Collection willen maken?

📤 Inleveren

Lever de volgende onderdelen in via Canvas.

Applicatie

  • Werkende React-applicatie.

GitHub

  • Link naar de GitHub-repository.

Screenshots

  • Overzichtspagina.
  • Zoekfunctie.
  • Favorieten.
  • JSON-bestand.
  • Minimaal één GitHub-commit.

Document

Een PDF of Word-bestand met:

  • antwoorden op de kennischeck;
  • uitwerking van de AI-opdracht;
  • eventuele toelichting op de bonusopdracht.

🎉 Gefeliciteerd!

Je hebt de module React Basis afgerond.

Je hebt geleerd hoe je:

  • React-componenten bouwt;
  • gegevens doorgeeft met props;
  • state gebruikt;
  • gegevens uit een JSON-bestand leest;
  • interactieve gebruikersinterfaces ontwikkelt;
  • GitHub gebruikt voor versiebeheer.

In de volgende module ga je jouw React-app uitbreiden tot een professionele full-stack applicatie door deze te koppelen aan een Laravel-back-end.

React Basis – Docentenhandleiding

Moduleoverzicht

Doelgroep

Voorkennis

Voorkennis uit eerdere modules

Ontwikkelomgeving

Didactische keuze

Tijdens deze module werken studenten al binnen een Laravel Breeze React-project. Laravel wordt echter nog niet behandeld. Studenten werken uitsluitend in de React-bestanden (resources/js). Hierdoor blijft de focus volledig op React en kan in de vervolgreeks direct worden gestart met de backend.

Inhoudsopgave

Les 1 – Introductie React & Ontwikkelomgeving

Leerdoelen

Na deze les kan de student:

Eindresultaat

Een werkende React-omgeving met een aangepaste startpagina.

Les 2 – JSX: Bouw je eerste Game Collection pagina

Leerdoelen

Na deze les kan de student:

Eindresultaat

Een eenvoudige Game Collection-pagina met een titel en een lijst van games.

Les 3 – Componenten

Leerdoelen

Na deze les kan de student:

Eindresultaat

De Game Collection bestaat uit:

Les 4 – Props

Leerdoelen

Na deze les kan de student:

Eindresultaat

Iedere GameCard toont eigen gegevens zoals:

Les 5 – useState

Leerdoelen

Na deze les kan de student:

Eindresultaat

Gebruikers kunnen een game als favoriet markeren.

Les 6 – Arrays en map()

Leerdoelen

Na deze les kan de student:

Eindresultaat

De Game Collection wordt automatisch opgebouwd vanuit een array.

Les 7 – Formulieren, onChange en filter()

Leerdoelen

Na deze les kan de student:

Eindresultaat

Een werkende zoekfunctie binnen de Game Collection.

Les 8 – JSON, fetch() en useEffect()

Leerdoelen

Na deze les kan de student:

Eindresultaat

De Game Collection haalt gegevens uit een extern JSON-bestand.

Les 9 – Navigeren binnen de applicatie (Inertia)

Leerdoelen

Na deze les kan de student:

Eindresultaat

Een werkende detailpagina voor iedere game.

Opmerking voor de docent

Omdat deze module gebruikmaakt van Laravel Breeze React, wordt de navigatie in de vervolgreeks verder uitgewerkt met Inertia. In deze les ligt de nadruk op het concept van navigeren binnen een React-applicatie.

Les 10 – Eindopdracht Game Collection

Leerdoelen

Na deze les kan de student:

Eindresultaat

Een complete Game Collection waarin alle technieken uit de module zijn verwerkt.

Bonusopdrachten

Studenten kiezen minimaal één bonusopdracht.

⭐ Bonus 1

Sorteerfunctie

⭐ Bonus 2

Dark Mode

⭐⭐ Bonus 3

React Icons

⭐⭐ Bonus 4

Uitbreiden van games.json

⭐⭐⭐ Bonus 5

Eigen Game Collection ontwerpen

Didactische opbouw

Les Nieuwe techniek Toegepast in Game Collection
1 React & installatie Startpagina
2 JSX Eerste Game Collection
3 Componenten Header, Footer, GameCard
4 Props Dynamische GameCards
5 useState Favorieten
6 Arrays & map() Games automatisch tonen
7 Formulieren & filter() Zoekfunctie
8 JSON, fetch(), useEffect() Games uit extern bestand laden
9 Navigatie Detailpagina
10 Integratie Complete React-applicatie
Back to top