{props.title}
); } export default Header; ``` Sla het bestand op. --- ### ๐ ๏ธ Opdracht 2 โ Geef gegevens door Open: ``` src/App.jsx ``` Pas de Header-component aan. ```{props.title}
Platform: {props.platform}
{props.title}
); } export default Header; ``` Open vervolgens: ``` src/App.jsx ``` Wijzig de CSS-klasse van de lijst. ```
```
Sla alle bestanden op.
De Game Collection heeft nu een moderne en overzichtelijke uitstraling.
---
### ๐ก Waarom gebruiken we duidelijke CSS-klassen?
In grotere React-projecten bestaan vaak tientallen componenten.
Door duidelijke namen te gebruiken, zoals `app-title`, `game-list` en `game-card`, blijft de code overzichtelijk.
Dit maakt het eenvoudiger om je project later uit te breiden.
---
---
### ๐ ๏ธ Opdracht 6 โ Gebruik de nieuwe CSS-klassen
Nu de nieuwe CSS klaar is, gaan we deze gebruiken in de verschillende componenten.
Open:
```
src/components/Header.jsx
```
Pas de component aan.
```
function Header(props) {
return (
);
}
export default GameCard;
```
Open vervolgens:
```
src/App.jsx
```
Pas de CSS-klasse van de lijst aan.
```
{props.title}
); } export default Header; ``` Open daarna: ``` src/components/GameCard.jsx ``` Controleer of de component de juiste CSS-klasse gebruikt. ``` function GameCard(props) { return ({props.title}
Platform: {props.platform}
```
Sla alle bestanden op.
Controleer of de Game Collection er nu overzichtelijker uitziet.
> [](https://www.roc.ovh/uploads/images/gallery/2026-07/9hgafbeelding.png)
---
### ๐ก Waarom is dit handig?
Je hebt slechts รฉรฉn `GameCard` gemaakt.
Toch kun je deze component meerdere keren gebruiken.
Iedere keer geef je andere gegevens mee via Props.
Later in deze module gaan we tientallen GameCards automatisch maken vanuit een lijst met gegevens.
---
### ๐ก Wist je dat?
Vrijwel iedere React-applicatie maakt gebruik van Props.
Props zorgen ervoor dat componenten herbruikbaar zijn.
Daardoor hoef je dezelfde code niet steeds opnieuw te schrijven.
---
### ๐พ GitHub
Maak een commit met het bericht:
```
Les 4 - Props toegepast
```
Synchroniseer daarna met GitHub.
---
### ๐ค AI-opdracht
Gebruik ChatGPT.
Prompt:
> Leg uit wat Props zijn in React alsof je het uitlegt aan een eerstejaars mbo Software Developer.
Beschrijf daarna in maximaal **100 woorden** waarom Props belangrijk zijn.
---
### ๐ง Kennischeck
1. Waar staat Props voor?
2. Waarom gebruiken we Props?
3. Hoe geef je gegevens door aan een component?
4. Hoe lees je Props uit binnen een component?
5. Waarom is een GameCard met Props beter dan drie losse GameCards?
6. Wat gebeurt er als je een andere titel doorgeeft?
7. Wat is het voordeel van herbruikbare componenten?
---
### ๐ค Inleveren
Lever de volgende onderdelen in via Canvas.
- ๐ท Screenshot van de browser.
- ๐ท Screenshot van `App.jsx`.
- ๐ท Screenshot van `Header.jsx`.
- ๐ท 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 5 โ State: Maak je eerste interactieve React-component
---
### ๐ฏ Leerdoelen
Na deze les kun je:
- uitleggen wat State is;
- `useState()` gebruiken;
- reageren op een klik;
- gegevens wijzigen met State;
- een interactieve GameCard maken.
---
### ๐ฎ Wat ga je vandaag maken?
Tot nu toe laat jouw Game Collection alleen informatie zien.
Maar een echte webapplicatie reageert op de gebruiker.
Vandaag ga je jouw eerste interactieve React-component bouwen.
Gebruikers kunnen een game als favoriet markeren.
Aan het einde van deze les kun je op een knop klikken om een game toe te voegen aan je favorieten.
> **\[Afbeelding eindresultaat\]**
>
> [](https://www.roc.ovh/uploads/images/gallery/2026-07/07Cafbeelding.png)
---
### ๐ Wat is State?
Tot nu toe veranderde er niets op de pagina.
Iedere keer zag je dezelfde informatie.
Soms wil je dat gegevens veranderen wanneer een gebruiker iets doet.
Denk bijvoorbeeld aan:
- โค๏ธ Een favoriet markeren
- ๐ Een product toevoegen aan een winkelwagen
- ๐ Een like geven
- ๐ Zoeken in een lijst
Daarvoor gebruikt React **State**.
State is informatie die tijdens het gebruik van de applicatie kan veranderen.
---
### ๐ก Waarom gebruiken we State?
Stel dat een gebruiker op een knop klikt.
De pagina moet dan automatisch veranderen.
Bijvoorbeeld:
```
๐ค Favoriet
โ
โค๏ธ Favoriet
```
Zonder State weet React niet dat de pagina opnieuw moet worden opgebouwd.
Met State gebeurt dit automatisch.
---
### ๐ ๏ธ Opdracht 1 โ useState importeren
Open:
```
src/components/GameCard.jsx
```
Voeg bovenaan het bestand de onderstaande regel toe.
```
import { useState } from "react";
```
Sla het bestand op.
---
### ๐ ๏ธ Opdracht 2 โ Maak de eerste State
Maak boven de `return` de onderstaande State.
```
const [favorite, setFavorite] = useState(false);
```
De waarde `false` betekent dat een game nog geen favoriet is.
Sla het bestand op.
---
### ๐ Hoe werkt useState()?
De functie `useState()` bestaat uit twee onderdelen.
```
const [favorite, setFavorite] = useState(false);
```
React onthoudt deze waarde zolang de applicatie actief is.
---
### ๐ ๏ธ Opdracht 3 โ Voeg een knop toe
Voeg onder de platformtekst de onderstaande knop toe.
```
```
Sla het bestand op.
Controleer of iedere GameCard nu een knop bevat.
---
### ๐ ๏ธ Opdracht 4 โ Maak de knop interactief
Een knop die niets doet is natuurlijk niet erg spannend.
We gaan de knop laten reageren op een klik.
Vervang de knop door onderstaande code.
```
```
Sla het bestand op.
Klik meerdere keren op de knop.
De tekst verandert nu automatisch van **๐ค Favoriet** naar **โค๏ธ Favoriet**.
> **\[Screenshot browser\]**
---
### ๐ Wat gebeurt er?
Wanneer je op de knop klikt, wordt de onderstaande functie uitgevoerd.
```
setFavorite(!favorite)
```
De waarde van `favorite` wordt omgedraaid.
```
false
โ
true
โ
false
โ
true
```
React ziet dat de State is veranderd.
Daarna wordt alleen deze component opnieuw opgebouwd.
Daardoor zie je direct het resultaat in de browser.
---
### ๐ ๏ธ Opdracht 5 โ Geef de knop een eigen opmaak
Open:
```
src/App.css
```
Voeg de onderstaande CSS toe.
```
.favorite-button {
margin-top: 12px;
padding: 8px 14px;
background-color: #6e25eb;
color: white;
border: none;
border-radius: 6px;
cursor: pointer;
transition: background-color .2s;
}
.favorite-button:hover {
background-color: #5b1fd0;
}
```
Sla het bestand op.
De knop krijgt nu een eigen stijl.
> **\[Screenshot browser\]**
---
### ๐ก Wist je dat?
`useState()` is รฉรฉn van de meest gebruikte functies binnen React.
Vrijwel iedere moderne React-applicatie gebruikt State.
Denk bijvoorbeeld aan:
- โค๏ธ Favorieten
- ๐ Winkelwagens
- ๐ Zoekvelden
- ๐ Formulieren
- ๐ฌ Chatberichten
---
### ๐พ GitHub
Maak een commit met het bericht:
```
Les 5 - useState toegepast
```
Synchroniseer daarna met GitHub.
---
### ๐ค AI-opdracht
Gebruik ChatGPT.
Prompt:
> Leg uit wat `useState()` doet alsof je het uitlegt aan een eerstejaars mbo Software Developer.
Beschrijf daarna in maximaal **100 woorden** wanneer jij State zou gebruiken.
---
### ๐ง Kennischeck
1. Wat is State?
2. Waarom gebruiken we `useState()`?
3. Wat doet `setFavorite()`?
4. Wat doet `onClick`?
5. Waarom verandert de tekst op de knop?
6. Waarom bouwt React de component opnieuw op?
7. Noem drie voorbeelden waarbij State handig is.
---
### ๐ค Inleveren
Lever de volgende onderdelen in via Canvas.
- ๐ท Screenshot van de browser.
- ๐ท Screenshot van `GameCard.jsx`.
- ๐ท Screenshot van `App.css`.
- ๐ท 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(): Automatisch GameCards maken
---
### ๐ฏ Leerdoelen
Na deze les kun je:
- uitleggen wat een array is;
- een array gebruiken in React;
- de functie `map()` gebruiken;
- meerdere componenten automatisch genereren;
- uitleggen waarom `map()` zo belangrijk is binnen React.
---
### ๐ฎ Wat ga je vandaag maken?
Tot nu toe heb je iedere **GameCard** zelf op de pagina geplaatst.
Dat werkt prima met drie games.
Maar stel je eens voor dat jouw Game Collection straks uit **500 games** bestaat.
Moet je dan 500 keer dezelfde component typen?
Natuurlijk niet.
React kan dit automatisch voor je doen.
Vandaag leer je hoe je vanuit een lijst met gegevens automatisch meerdere GameCards maakt.
> **\[Afbeelding eindresultaat\]**
>
> [](https://www.roc.ovh/uploads/images/gallery/2026-07/lYAafbeelding.png)
---
### ๐ Wat is een array?
Een array is een verzameling van gegevens.
Bijvoorbeeld een lijst met games.
```
const games = [
"Minecraft",
"Mario Kart",
"Rocket League"
];
```
In plaats van drie losse variabelen staan alle games nu in รฉรฉn lijst.
Dat maakt je code overzichtelijker.
---
### ๐ก Waarom gebruiken we arrays?
Stel dat jouw Game Collection straks uit honderden games bestaat.
Met een array hoef je alleen de lijst uit te breiden.
React kan daarna automatisch alle GameCards maken.
Je hoeft de component dus niet steeds opnieuw te schrijven.
---
### ๐ ๏ธ Opdracht 1 โ Maak een array met games
Open:
```
src/App.jsx
```
Maak boven de functie `return` de onderstaande array.
```
const games = [
{
id: 1,
title: "Minecraft",
platform: "PC"
},
{
id: 2,
title: "Mario Kart",
platform: "Nintendo Switch"
},
{
id: 3,
title: "Rocket League",
platform: "PlayStation 5"
}
];
```
Sla het bestand op.
Er verandert nog niets in de browser.
Dat is helemaal goed.
---
### ๐ Waarom zien we nog niets?
De gegevens staan nu wel in een array.
Maar React weet nog niet dat deze gegevens op de pagina moeten worden weergegeven.
Daarvoor gebruiken we in React de functie **map()**.
Deze functie doorloopt automatisch alle onderdelen van de array.
Voor ieder onderdeel maakt React straks een nieuwe `GameCard`.
---
### ๐ ๏ธ Opdracht 2 โ Verwijder de losse GameCards
Open:
```
src/App.jsx
```
Verwijder de drie losse `
```
Sla het bestand op.
De afbeelding wordt nu automatisch weergegeven op de GameCard.
---
### ๐ ๏ธ Opdracht 7 โ Geef de afbeelding een mooie opmaak
Open:
```
src/App.css
```
Voeg onderstaande CSS toe.
```
.game-image {
width: 100%;
height: 220px;
object-fit: cover;
border-radius: 8px;
margin-bottom: 15px;
}
```
Sla het bestand op.
Controleer of alle GameCards een nette afbeelding tonen.
---
### ๐ AI en ethiek
AI is een krachtig hulpmiddel, maar brengt ook verantwoordelijkheid met zich mee.
Als softwareontwikkelaar moet je kritisch blijven kijken naar wat AI maakt.
Denk bijvoorbeeld na over de volgende vragen:
- Heb je de prompt zelf geschreven?
- Is de afbeelding origineel of lijkt deze sterk op een bestaande gamecover?
- Bevat de afbeelding officiรซle logo's of personages?
- Is de afbeelding geschikt om openbaar te gebruiken?
- Is duidelijk dat de afbeelding door AI is gemaakt?
Een professionele softwareontwikkelaar gebruikt AI op een verantwoorde manier en respecteert auteursrecht en intellectueel eigendom.
---
### ๐ค AI-uitdaging
Verbeter jouw afbeelding door de prompt minimaal twee keer aan te passen.
Vergelijk de resultaten.
Kies uiteindelijk de afbeelding die het beste past bij jouw Game Collection.
Beschrijf kort waarom je juist deze afbeelding hebt gekozen.
---
### ๐พ GitHub
Maak een commit met het bericht:
```
Les 9 - AI afbeeldingen toegevoegd
```
Synchroniseer daarna met GitHub.
---
### ๐ค AI-opdracht
Beantwoord de volgende vragen in maximaal 200 woorden.
1. Welke AI-tool heb je gebruikt?
2. Welke prompt heb je geschreven?
3. Heb je de prompt aangepast? Waarom?
4. Waarom heb je juist deze afbeelding gekozen?
5. Welke ethische aandachtspunten heb je meegenomen?
---
### ๐ง Kennischeck
1. Waarom slaan we de bestandsnaam van een afbeelding op in `games.json`?
2. Waarom plaatsen we afbeeldingen in de map `public/images`?
3. Hoe geef je een afbeelding door aan een React-component?
4. Waarvoor gebruiken we de `alt`-eigenschap?
5. Wat is Prompt Engineering?
6. Noem twee ethische aandachtspunten bij het gebruik van AI-afbeeldingen.
7. Waarom is het belangrijk om AI-uitvoer altijd zelf te controleren?
---
### ๐ค Inleveren
Lever de volgende onderdelen in via Canvas.
- ๐ท Screenshot van de Game Collection met AI-afbeelding.
- ๐ท Screenshot van `games.json`.
- ๐ท Screenshot van `GameCard.jsx`.
- ๐ท Screenshot van `App.css`.
- ๐ท Screenshot van de GitHub-commit.
- ๐ PDF of TXT met de antwoorden op de kennischeck.
- ๐ De uitwerking van de AI-opdracht.
## Les 10 โ Eindopdracht: Bouw jouw Ultimate Game Collection
---
### ๐ฏ Leerdoelen
Na deze les kun je:
- zelfstandig een React-applicatie uitbreiden;
- eerdere React-technieken combineren;
- je Game Collection verder verbeteren;
- je eigen keuzes onderbouwen;
- terugkijken op wat je tijdens deze module hebt geleerd.
---
### ๐ฎ Wat ga je vandaag maken?
Gefeliciteerd!
Je hebt de basis van React geleerd.
Tijdens deze module heb je stap voor stap jouw eigen Game Collection gebouwd.
Vandaag ga je de applicatie verder verbeteren en er jouw eigen versie van maken.
Je gebruikt hierbij alles wat je tijdens de afgelopen lessen hebt geleerd.
---
### ๐ Van beginner naar React Developer
Toen je aan deze module begon, kende je React nog niet.
Inmiddels kun je werken met:
- โ๏ธ React
- ๐งฉ Componenten
- ๐ฆ Props
- ๐ State
- ๐ Arrays
- ๐๏ธ JSON
- ๐ Zoeken met `filter()`
- ๐ผ๏ธ AI-afbeeldingen
Vandaag laat je zien dat je deze technieken kunt combineren in รฉรฉn applicatie.
---
### ๐ ๏ธ Eindopdracht
Werk jouw Game Collection verder uit.
Voer minimaal **vier** van de onderstaande uitbreidingen uit.
---
### โญ Uitbreiding 1 โ Verbeter de GameCards
Maak de GameCards aantrekkelijker.
Denk bijvoorbeeld aan:
- grotere afbeeldingen;
- mooie afgeronde hoeken;
- schaduw;
- hover-effecten;
- betere lettertypes.
---
### โญ Uitbreiding 2 โ Breid de informatie uit
Voeg minimaal twee nieuwe eigenschappen toe aan `games.json`.
Bijvoorbeeld:
- ๐ฎ Developer
- ๐ฅ Multiplayer
- โฑ๏ธ Speelduur
- ๐ Leeftijd
- ๐ Uitgever
Toon deze gegevens ook op de GameCard.
---
### โญ Uitbreiding 3 โ Verbeter de zoekfunctie
De zoekfunctie zoekt nu alleen op de titel.
Breid deze uit zodat ook gezocht kan worden op:
- genre;
- platform;
- developer (indien toegevoegd).
Controleer of de zoekfunctie goed blijft werken.
---
### โญ Uitbreiding 4 โ Geef jouw website een eigen uitstraling
Maak jouw Game Collection persoonlijk.
Je mag bijvoorbeeld:
- een eigen kleurenthema kiezen;
- een mooie header maken;
- een footer toevoegen;
- de titel van de website aanpassen;
- een eigen slogan bedenken.
> **\[Screenshot voorbeeld\]**
---
### ๐ Terugblik op deze module
Tijdens deze module heb je jouw eerste complete React-applicatie gebouwd.
Je hebt geleerd hoe je een moderne webapplicatie stap voor stap opbouwt.
Je hebt gewerkt met:
- โ๏ธ React
- ๐งฉ Componenten
- ๐ฆ Props
- ๐ State
- ๐ Arrays
- ๐ map()
- ๐ filter()
- ๐๏ธ JSON
- ๐ค AI-afbeeldingen
- ๐พ GitHub
Deze technieken vormen de basis van vrijwel iedere moderne React-applicatie.
---
### ๐ Bonusopdracht (2 bonuspunten)
Wil je jouw Game Collection nรณg mooier maken?
Voeg รฉรฉn eigen uitbreiding toe aan jouw applicatie.
Je mag bijvoorbeeld kiezen uit:
- ๐ Een Dark Mode toevoegen.
- ๐ Een Top 3 van jouw favoriete games tonen.
- ๐จ Een eigen AI-logo ontwerpen.
- โญ Games sorteren op rating of jaar.
- โค๏ธ Alleen favoriete games tonen.
- ๐ก Of bedenk zelf een creatieve uitbreiding (in overleg met de docent).
Beschrijf kort waarom je voor deze uitbreiding hebt gekozen.
---
### ๐พ GitHub
Maak een laatste commit met het bericht:
```
Les 10 - Eindopdracht afgerond
```
Synchroniseer daarna met GitHub.
Je hebt nu een complete versiegeschiedenis van jouw React-project opgebouwd.
---
### ๐ค AI-opdracht
Kijk terug op jouw ontwikkeling tijdens deze module.
Gebruik ChatGPT.
Prompt:
> Beschrijf de ontwikkeling van een eerstejaars mbo Software Developer die voor het eerst met React heeft gewerkt. Welke vaardigheden zijn tijdens deze module geleerd?
Schrijf daarna een korte reflectie van maximaal **200 woorden**.
Beantwoord daarin de volgende vragen:
- Waar ben je het meest trots op?
- Welke opdracht vond je het moeilijkst?
- Welke React-techniek ga je waarschijnlijk het meest gebruiken?
- Wat wil je in de vervolgreeks React & Laravel graag leren?
---
### ๐ง Kennischeck
1. Wat is volgens jou het grootste voordeel van React?
2. Waarom gebruiken we componenten?
3. Wanneer gebruik je Props?
4. Wanneer gebruik je State?
5. Waarvoor gebruiken we `map()`?
6. Waarvoor gebruiken we `filter()`?
7. Waarom slaan we gegevens op in een JSON-bestand?
8. Waarom gebruiken we GitHub tijdens softwareontwikkeling?
9. Hoe kan AI een softwareontwikkelaar ondersteunen?
10. Waarom blijft kritisch nadenken belangrijk wanneer je AI gebruikt?
---
### ๐ค Inleveren
Lever de volgende onderdelen in via Canvas.
- ๐ท Screenshot van jouw definitieve Game Collection.
- ๐ท Screenshot van jouw mooiste GameCard.
- ๐ท Screenshot van de laatste GitHub-commit.
- ๐ PDF of TXT met de antwoorden op de kennischeck.
- ๐ De uitwerking van de AI-opdracht.
- ๐ (Optioneel) De uitwerking van de bonusopdracht.
---
### ๐ Gefeliciteerd!
Je hebt de basismodule React succesvol afgerond.
Je hebt geleerd hoe je een moderne front-end applicatie bouwt met React.
In de vervolgreeks ga je jouw React-applicatie koppelen aan een **Laravel-back-end**.
Daarin leer je onder andere werken met:
- ๐ API's
- ๐๏ธ Databases
- ๐จ Formulieren
- โ๏ธ CRUD-functionaliteit
- ๐ Authenticatie
Jouw huidige Game Collection vormt daarbij de basis. In plaats van gegevens uit een JSON-bestand te lezen, haal je de gegevens straks op uit een Laravel-database.
**Veel succes met de vervolgreeks React & Laravel!** ๐
| Onderdeel | Betekenis |
|---|---|
| `favorite` | De huidige waarde. |
| `setFavorite` | Wijzigt de waarde. |
{props.title}
Platform: {props.platform}
Genre: {props.genre}
Rating: โญ {props.rating}
Jaar: {props.year}
```
Sla het bestand op.
De afbeelding wordt nu automatisch weergegeven op de GameCard.
---
### ๐ ๏ธ Opdracht 7 โ Geef de afbeelding een mooie opmaak
Open:
```
src/App.css
```
Voeg onderstaande CSS toe.
```
.game-image {
width: 100%;
height: 220px;
object-fit: cover;
border-radius: 8px;
margin-bottom: 15px;
}
```
Sla het bestand op.
Controleer of alle GameCards een nette afbeelding tonen.
---
### ๐ AI en ethiek
AI is een krachtig hulpmiddel, maar brengt ook verantwoordelijkheid met zich mee.
Als softwareontwikkelaar moet je kritisch blijven kijken naar wat AI maakt.
Denk bijvoorbeeld na over de volgende vragen:
- Heb je de prompt zelf geschreven?
- Is de afbeelding origineel of lijkt deze sterk op een bestaande gamecover?
- Bevat de afbeelding officiรซle logo's of personages?
- Is de afbeelding geschikt om openbaar te gebruiken?
- Is duidelijk dat de afbeelding door AI is gemaakt?
Een professionele softwareontwikkelaar gebruikt AI op een verantwoorde manier en respecteert auteursrecht en intellectueel eigendom.
---
### ๐ค AI-uitdaging
Verbeter jouw afbeelding door de prompt minimaal twee keer aan te passen.
Vergelijk de resultaten.
Kies uiteindelijk de afbeelding die het beste past bij jouw Game Collection.
Beschrijf kort waarom je juist deze afbeelding hebt gekozen.
---
### ๐พ GitHub
Maak een commit met het bericht:
```
Les 9 - AI afbeeldingen toegevoegd
```
Synchroniseer daarna met GitHub.
---
### ๐ค AI-opdracht
Beantwoord de volgende vragen in maximaal 200 woorden.
1. Welke AI-tool heb je gebruikt?
2. Welke prompt heb je geschreven?
3. Heb je de prompt aangepast? Waarom?
4. Waarom heb je juist deze afbeelding gekozen?
5. Welke ethische aandachtspunten heb je meegenomen?
---
### ๐ง Kennischeck
1. Waarom slaan we de bestandsnaam van een afbeelding op in `games.json`?
2. Waarom plaatsen we afbeeldingen in de map `public/images`?
3. Hoe geef je een afbeelding door aan een React-component?
4. Waarvoor gebruiken we de `alt`-eigenschap?
5. Wat is Prompt Engineering?
6. Noem twee ethische aandachtspunten bij het gebruik van AI-afbeeldingen.
7. Waarom is het belangrijk om AI-uitvoer altijd zelf te controleren?
---
### ๐ค Inleveren
Lever de volgende onderdelen in via Canvas.
- ๐ท Screenshot van de Game Collection met AI-afbeelding.
- ๐ท Screenshot van `games.json`.
- ๐ท Screenshot van `GameCard.jsx`.
- ๐ท Screenshot van `App.css`.
- ๐ท Screenshot van de GitHub-commit.
- ๐ PDF of TXT met de antwoorden op de kennischeck.
- ๐ De uitwerking van de AI-opdracht.
## Les 10 โ Eindopdracht: Bouw jouw Ultimate Game Collection
---
### ๐ฏ Leerdoelen
Na deze les kun je:
- zelfstandig een React-applicatie uitbreiden;
- eerdere React-technieken combineren;
- je Game Collection verder verbeteren;
- je eigen keuzes onderbouwen;
- terugkijken op wat je tijdens deze module hebt geleerd.
---
### ๐ฎ Wat ga je vandaag maken?
Gefeliciteerd!
Je hebt de basis van React geleerd.
Tijdens deze module heb je stap voor stap jouw eigen Game Collection gebouwd.
Vandaag ga je de applicatie verder verbeteren en er jouw eigen versie van maken.
Je gebruikt hierbij alles wat je tijdens de afgelopen lessen hebt geleerd.
---
### ๐ Van beginner naar React Developer
Toen je aan deze module begon, kende je React nog niet.
Inmiddels kun je werken met:
- โ๏ธ React
- ๐งฉ Componenten
- ๐ฆ Props
- ๐ State
- ๐ Arrays
- ๐๏ธ JSON
- ๐ Zoeken met `filter()`
- ๐ผ๏ธ AI-afbeeldingen
Vandaag laat je zien dat je deze technieken kunt combineren in รฉรฉn applicatie.
---
### ๐ ๏ธ Eindopdracht
Werk jouw Game Collection verder uit.
Voer minimaal **vier** van de onderstaande uitbreidingen uit.
---
### โญ Uitbreiding 1 โ Verbeter de GameCards
Maak de GameCards aantrekkelijker.
Denk bijvoorbeeld aan:
- grotere afbeeldingen;
- mooie afgeronde hoeken;
- schaduw;
- hover-effecten;
- betere lettertypes.
---
### โญ Uitbreiding 2 โ Breid de informatie uit
Voeg minimaal twee nieuwe eigenschappen toe aan `games.json`.
Bijvoorbeeld:
- ๐ฎ Developer
- ๐ฅ Multiplayer
- โฑ๏ธ Speelduur
- ๐ Leeftijd
- ๐ Uitgever
Toon deze gegevens ook op de GameCard.
---
### โญ Uitbreiding 3 โ Verbeter de zoekfunctie
De zoekfunctie zoekt nu alleen op de titel.
Breid deze uit zodat ook gezocht kan worden op:
- genre;
- platform;
- developer (indien toegevoegd).
Controleer of de zoekfunctie goed blijft werken.
---
### โญ Uitbreiding 4 โ Geef jouw website een eigen uitstraling
Maak jouw Game Collection persoonlijk.
Je mag bijvoorbeeld:
- een eigen kleurenthema kiezen;
- een mooie header maken;
- een footer toevoegen;
- de titel van de website aanpassen;
- een eigen slogan bedenken.
> **\[Screenshot voorbeeld\]**
---
### ๐ Terugblik op deze module
Tijdens deze module heb je jouw eerste complete React-applicatie gebouwd.
Je hebt geleerd hoe je een moderne webapplicatie stap voor stap opbouwt.
Je hebt gewerkt met:
- โ๏ธ React
- ๐งฉ Componenten
- ๐ฆ Props
- ๐ State
- ๐ Arrays
- ๐ map()
- ๐ filter()
- ๐๏ธ JSON
- ๐ค AI-afbeeldingen
- ๐พ GitHub
Deze technieken vormen de basis van vrijwel iedere moderne React-applicatie.
---
### ๐ Bonusopdracht (2 bonuspunten)
Wil je jouw Game Collection nรณg mooier maken?
Voeg รฉรฉn eigen uitbreiding toe aan jouw applicatie.
Je mag bijvoorbeeld kiezen uit:
- ๐ Een Dark Mode toevoegen.
- ๐ Een Top 3 van jouw favoriete games tonen.
- ๐จ Een eigen AI-logo ontwerpen.
- โญ Games sorteren op rating of jaar.
- โค๏ธ Alleen favoriete games tonen.
- ๐ก Of bedenk zelf een creatieve uitbreiding (in overleg met de docent).
Beschrijf kort waarom je voor deze uitbreiding hebt gekozen.
---
### ๐พ GitHub
Maak een laatste commit met het bericht:
```
Les 10 - Eindopdracht afgerond
```
Synchroniseer daarna met GitHub.
Je hebt nu een complete versiegeschiedenis van jouw React-project opgebouwd.
---
### ๐ค AI-opdracht
Kijk terug op jouw ontwikkeling tijdens deze module.
Gebruik ChatGPT.
Prompt:
> Beschrijf de ontwikkeling van een eerstejaars mbo Software Developer die voor het eerst met React heeft gewerkt. Welke vaardigheden zijn tijdens deze module geleerd?
Schrijf daarna een korte reflectie van maximaal **200 woorden**.
Beantwoord daarin de volgende vragen:
- Waar ben je het meest trots op?
- Welke opdracht vond je het moeilijkst?
- Welke React-techniek ga je waarschijnlijk het meest gebruiken?
- Wat wil je in de vervolgreeks React & Laravel graag leren?
---
### ๐ง Kennischeck
1. Wat is volgens jou het grootste voordeel van React?
2. Waarom gebruiken we componenten?
3. Wanneer gebruik je Props?
4. Wanneer gebruik je State?
5. Waarvoor gebruiken we `map()`?
6. Waarvoor gebruiken we `filter()`?
7. Waarom slaan we gegevens op in een JSON-bestand?
8. Waarom gebruiken we GitHub tijdens softwareontwikkeling?
9. Hoe kan AI een softwareontwikkelaar ondersteunen?
10. Waarom blijft kritisch nadenken belangrijk wanneer je AI gebruikt?
---
### ๐ค Inleveren
Lever de volgende onderdelen in via Canvas.
- ๐ท Screenshot van jouw definitieve Game Collection.
- ๐ท Screenshot van jouw mooiste GameCard.
- ๐ท Screenshot van de laatste GitHub-commit.
- ๐ PDF of TXT met de antwoorden op de kennischeck.
- ๐ De uitwerking van de AI-opdracht.
- ๐ (Optioneel) De uitwerking van de bonusopdracht.
---
### ๐ Gefeliciteerd!
Je hebt de basismodule React succesvol afgerond.
Je hebt geleerd hoe je een moderne front-end applicatie bouwt met React.
In de vervolgreeks ga je jouw React-applicatie koppelen aan een **Laravel-back-end**.
Daarin leer je onder andere werken met:
- ๐ API's
- ๐๏ธ Databases
- ๐จ Formulieren
- โ๏ธ CRUD-functionaliteit
- ๐ Authenticatie
Jouw huidige Game Collection vormt daarbij de basis. In plaats van gegevens uit een JSON-bestand te lezen, haal je de gegevens straks op uit een Laravel-database.
**Veel succes met de vervolgreeks React & Laravel!** ๐