React Fundamentals โ Game Collection
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 Laravel Breeze React-project installeren;
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.
In iedere les breid je dezelfde applicatie verder uit.
Aan het einde van deze module kun je onder andere:
๐ฎ Games weergeven
๐ Games zoeken
โค๏ธ Favorieten markeren
๐ Detailpagina's maken
๐งฉ Werken met componenten
โก Dynamische React-applicaties bouwen
[Afbeelding eindresultaat Game Collection]
๐ 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.
[Afbeelding React logo]
๐ 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]
๐ 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
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]
๐ก 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 โ Ontwikkelomgeving installeren
Tijdens deze module gebruiken we een Laravel Breeze React-project .
Waarom?
Omdat we in de volgende module zonder opnieuw te beginnen verder kunnen werken.
Let op: Tijdens deze module hoef je niets van Laravel te kennen. We gebruiken Laravel alleen als basis waarop React draait.
Stap 1
Maak een nieuw Laravel-project.
laravel new game-collection
Stap 2
Open het project in Visual Studio Code.
Stap 3
Installeer React.
php artisan breeze:install react
Kies steeds de standaardopties.
Stap 4
Installeer alle packages.
npm install
Stap 5
Start de ontwikkelomgeving.
Terminal 1
php artisan serve
Terminal 2
npm run dev
Open vervolgens:
http://127.0.0.1:8000
Als alles goed is zie je de standaard Laravel Breeze React-pagina.
[Screenshot Laravel Breeze React startpagina]
๐ ๏ธ Opdracht 2 โ Eerste React-pagina aanpassen
Open het bestand:
resources/js/Pages/Welcome.jsx
Pas de pagina aan zodat deze er ongeveer zo uitziet.
๐ฎ Game Collection
Welkom bij mijn eerste React-applicatie!
Naam: Jouw naam
Studentnummer: 123456
Klas: SD4A
Sla het bestand op.
Controleer of de browser automatisch wordt bijgewerkt.
[Screenshot aangepaste Welcome.jsx]
๐พ GitHub
Nu de applicatie werkt, slaan we de eerste werkende versie op.
Open Source Control in Visual Studio Code.
Maak een commit met het bericht:
Les 1 - React ontwikkelomgeving gereed
Voer daarna een Sync uit zodat je project ook op GitHub staat.
Vanaf nu maak je na iedere werkende opdracht een commit.
๐ค AI-opdracht
Gebruik ChatGPT.
Geef de volgende prompt:
Leg uit wat React is alsof je het uitlegt aan een eerstejaars mbo Software Developer.
Vergelijk de uitleg van ChatGPT met deze les.
Beantwoord daarna de volgende vraag:
Welke uitleg vond jij het duidelijkst en waarom?
Maximaal 100 woorden .
๐ง Kennischeck
Beantwoord de onderstaande vragen.
Wat is React?
Waarom gebruiken veel bedrijven React?
Wat is een component?
Waarom zijn componenten handig?
Wat is het verschil tussen Front-end en Back-end?
Waarom gebruiken wij een Laravel Breeze React-project?
In welke map ga je tijdens deze module het meeste werken?
๐ค Inleveren
Lever de volgende onderdelen in:
๐ท Screenshot van de draaiende applicatie.
๐ท Screenshot van de aangepaste Welcome.jsx .
๐ท Screenshot van de eerste GitHub-commit.
๐ PDF of TXT met de antwoorden op de kennischeck.
๐ De uitwerking van de AI-opdracht.
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:
Game Collection
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:
Game Collection
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.
๐ฎ Game Collection
Mijn favoriete games
Minecraft
FIFA
Mario Kart
Elden Ring
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
Wat is JSX?
Is JSX hetzelfde als HTML?
Waarom gebruikt React JSX?
Waarom gebruiken we className ?
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 (
๐ฎ Game Collection
);
}
Sla het bestand op.
๐ ๏ธ Opdracht 2 โ Footer maken
Maak vervolgens:
Footer.jsx
export default function Footer() {
return (
);
}
๐ ๏ธ Opdracht 3 โ GameCard maken
Maak een derde component.
GameCard.jsx
export default function GameCard() {
return (
Minecraft
);
}
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 (
<>
);
}
๐ก 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.
Dat is รฉรฉn van de sterke punten van React.
๐ ๏ธ Opdracht 5 โ GameCollection tonen
Open nu:
resources/js/Pages/Welcome.jsx
Vervang de inhoud van (of de centrale content) door je nieuwe component:
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
Wat is een component?
Waarom gebruiken we componenten?
Wat doet import ?
Waarom schrijven we ?
Waarom maken we een map Components ?
Waarom maken we een map Pages ?
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.
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 (
Minecraft
);
}
Dat gaan we aanpassen.
๐ ๏ธ Opdracht 1 โ Props ontvangen
Vervang de code door:
export default function GameCard(props) {
return (
{props.title}
);
}
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.
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 (
{props.title}
{props.platform}
);
}
Gebruik daarna:
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
Wat zijn props?
Waarom gebruiken we props?
Wat betekent:
props.title
Waarom maken we niet voor iedere game een nieuwe component?
Welke drie props heb je vandaag gebruikt?
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:
{favorite ? "โค๏ธ Favoriet" : "๐ค Geen favoriet"}
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.
๐ Reageren op een klik
React gebruikt hiervoor:
onClick
Pas de knop aan.
๐ก 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.
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
Wat is state?
Waarom gebruiken we state?
Waarvoor gebruik je useState ?
Wat betekent:
const [favorite, setFavorite] = useState(false);
Wat doet:
setFavorite(!favorite)
Waarom onthoudt iedere GameCard zijn eigen favoriete status?
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.
Les 6 โ Arrays en map(): Toon automatisch alle games
๐ฏ Leerdoelen
Na deze les kun je:
uitleggen wat een array is;
uitleggen waarvoor map() wordt gebruikt;
meerdere objecten opslaan in een array;
met map() automatisch componenten maken;
uitleggen waarom iedere component een key nodig heeft.
๐ Wat ga je vandaag maken?
Tot nu toe voeg je iedere game handmatig toe.
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:
producten
klanten
berichten
foto's
games
๐ก 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 => (
))
}
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 => (
))
}
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 => (
))
}
De waarschuwing is nu verdwenen.
๐ก Waarom is een key belangrijk?
Stel dat je later een game verwijdert.
React moet precies weten:
welke GameCard weg moet;
welke moeten blijven.
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:
Zelda
Cyberpunk 2077
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
Wat is een array?
Waarom gebruiken we objecten in een array?
Wat doet map() ?
Waarom gebruiken we map() in React?
Waarom heeft iedere GameCard een key nodig?
Waarom gebruiken we een id als key ?
Wat gebeurt er als je een extra game toevoegt aan de array?
๐ค Inleveren
Lever de volgende onderdelen in:
๐ท Screenshot van de browser waarop minimaal vijf games zichtbaar zijn.
๐ท 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 7 โ Zoeken met formulieren en filter()
๐ฏ Leerdoelen
Na deze les kun je:
een invoerveld ( input ) maken;
onChange gebruiken;
een zoekterm opslaan met useState ;
een array filteren met filter() ;
alleen de gevonden games tonen.
๐ 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:
Netflix
Spotify
Bol.com
Steam
YouTube
Ook onze Game Collection krijgt vandaag een zoekfunctie.
๐ก Hoe werkt zoeken?
Zoeken bestaat uit drie stappen.
De gebruiker typt iets.
React bewaart deze tekst.
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.
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?
filter() bekijkt iedere game.
includes() controleert of de titel de zoekterm bevat.
toLowerCase() zorgt ervoor dat hoofdletters geen verschil maken.
๐ ๏ธ Opdracht 4 โ Gebruik de gefilterde lijst
Zoek deze code.
games.map(...)
Vervang deze door:
filteredGames.map(game => (
))
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 &&
Geen games gevonden.
}
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:
gegevens vergelijken;
passende resultaten tonen.
๐พ 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
Waarvoor gebruiken we useState in deze les?
Wat doet onChange ?
Wat bevat event.target.value ?
Wat doet filter() ?
Waarom gebruiken we includes() ?
Waarom gebruiken we toLowerCase() ?
Waarom maken we een nieuwe variabele filteredGames ?
Wat gebeurt er wanneer geen enkele game wordt gevonden?
๐ค Inleveren
Lever de volgende onderdelen in:
๐ท Screenshot van de browser met een zoekopdracht.
๐ท Screenshot waarop "Geen games gevonden." zichtbaar is.
๐ท 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 8 โ Games laden uit een JSON-bestand
๐ฏ Leerdoelen
Na deze les kun je:
uitleggen waarom gegevens buiten de code worden opgeslagen;
een JSON-bestand maken;
gegevens laden met fetch() ;
useEffect() gebruiken;
gegevens opslaan in een state-variabele;
de bestaande Game Collection laten werken met externe data.
๐ 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:
de code;
de gegevens.
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:
JSON
REST API's
GraphQL
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
Wat is JSON?
Waarom gebruiken we een JSON-bestand?
Waarvoor gebruiken we fetch() ?
Waarom gebruiken we useEffect() ?
Waarom gebruiken we setGames() ?
Wat betekent de lege array:
[]
Waarom hoeven we na het toevoegen van een nieuwe game de React-code niet meer aan te passen?
๐ค Inleveren
Lever de volgende onderdelen in.
๐ท Screenshot van de browser met minimaal zes games .
๐ท Screenshot van games.json .
๐ท 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 9 โ React Router: Maak een detailpagina voor een game
๐ฏ Leerdoelen
Na deze les kun je:
uitleggen waarom React Router wordt gebruikt;
React Router installeren;
routes maken;
navigeren tussen pagina's;
routeparameters gebruiken;
een detailpagina tonen voor รฉรฉn game.
๐ 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:
Home
Contact
Producten
Winkelwagen
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.
[Screenshot app.jsx]
๐ ๏ธ Opdracht 3 โ Maak een detailpagina
Maak een nieuw bestand.
resources/js/Pages/GameDetail.jsx
Plaats hierin:
export default function GameDetail() {
return (
<>
Game Detail
);
}
๐ ๏ธ Opdracht 4 โ Routes maken
Open:
App.jsx
Importeer:
import {
BrowserRouter,
Routes,
Route
} from "react-router-dom";
Maak de 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:
{props.title}
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.