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

` (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 1. Wat is een component? 2. Waarom gebruiken we componenten? 3. Wat doet `import`? 4. Waarom schrijven we `

`? 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. ``` ```

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

{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 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. # 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 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: - 📷 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. 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. ``` 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 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: - 📷 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 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: ``` [] ```

7. 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. ```

Game {id}

```

Klik nu op verschillende games. Controleer of het juiste nummer verschijnt. > **\[Screenshot browser\]** --- # 🛠️ Opdracht 7 – Terug naar overzicht Importeer opnieuw: ``` Link ```

Voeg onderaan toe. ``` ← Terug naar overzicht ```

Controleer of de knop werkt. --- # 💡 Wist je dat? Vrijwel iedere moderne webapplicatie gebruikt routing. Bijvoorbeeld: - Netflix - Spotify - YouTube - Bol.com 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 ``-tag? --- # 📤 Inleveren Lever de volgende onderdelen in: - 📷 Screenshot van de overzichtspagina. - 📷 Screenshot van de detailpagina. - 📷 Screenshot van `GameDetail.jsx`. - 📷 Screenshot van de GitHub-commit. - 📄 PDF of TXT met de antwoorden op de kennischeck. - 📄 De uitwerking van de AI-opdracht.

# 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.

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

🎮 Game Collection

Welkom bij mijn eerste React-applicatie!

Game Collection

Game Collection

🎮 Game Collection

Mijn favoriete games

🎮 Game Collection

{props.title}

{props.title}

Game Detail

{props.title}

Game {id}