React 1 – Basis

Les 1 – Introductie React & Ontwikkelomgeving 

 

 🎯 Leerdoelen 

 Na deze les kun je: 

 

 uitleggen wat React is; 

 uitleggen waarom React wordt gebruikt; 

 het verschil beschrijven tussen Front-end en Back-end; 

 een nieuw React-project maken met Vite; 

 de belangrijkste React-bestanden herkennen; 

 je eerste React-pagina aanpassen; 

 je project opslaan in GitHub. 

 

 

 🎮 Wat ga je bouwen? 

 Tijdens deze module werk je aan één project: 

 🎮 Game Collection 

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

 Aan het einde van deze module kun je onder andere: 

 

 🎮 Games weergeven 

 🔍 Games zoeken 

 ❤️ Favorieten toevoegen 

 📄 Detailpagina's maken 

 🧩 Componenten bouwen 

 ⚡ Dynamische React-applicaties ontwikkelen 

 

 

 

 

 

 📖 Waarom React? 

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

 Voor iedere game zou je opnieuw moeten schrijven: 

 

 titel; 

 afbeelding; 

 platform; 

 knop; 

 beschrijving. 

 

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

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

 React maakt gebruik van componenten . 

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

 

 💡 Wat is React? 

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

 React is ontwikkeld door Meta (Facebook) . 

 React wordt gebruikt door onder andere: 

 

 Facebook 

 Instagram 

 Netflix 

 Discord 

 Airbnb 

 

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

 

 🛠️ Benodigdheden 

 Voor deze module heb je nodig: 

 

 Visual Studio Code 

 Node.js (LTS-versie) 

 Git 

 GitHub-account 

 

 Controleer of alles correct is geïnstalleerd. 

 Open een terminal en voer uit: 

 node -v 

npm -v 

git --version 

 

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

 

 📖 Componenten 

 Een React-applicatie bestaat uit kleine bouwstenen. 

 Deze noemen we componenten. 

 Onze Game Collection zou er bijvoorbeeld zo uit kunnen zien. 

 App 

 

├── Header 

 

├── SearchBar 

 

├── GameList 

 

│ ├── GameCard 

 

│ ├── GameCard 

 

│ ├── GameCard 

 

│ └── GameCard 

 

└── Footer 

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

 

 

 

 

 📖 Front-end versus Back-end 

 Een webapplicatie bestaat meestal uit twee delen. 

 

 

 

 Front-end 

 Back-end 

 

 

 

 

 Alles wat de gebruiker ziet 

 Verwerking achter de schermen 

 

 

 HTML 

 Database 

 

 

 CSS 

 API 

 

 

 JavaScript 

 Server 

 

 

 React 

 Laravel (behandelen we in deel 2) 

 

 

 

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

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

 

 

 

 

 🛠️ Opdracht 1 – React installeren 

 Tijdens deze module gebruiken we Vite . 

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

 Stap 1 

 Maak een nieuw React-project. 

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

 

 

 

 Which linter to use? 

 ✅ ESLint 

 

 

 

 

 💡 Waarom ESLint? 

 ESLint is de meest gebruikte codecontrole voor React-projecten. Het helpt je om fouten sneller te ontdekken en zorgt ervoor dat je code volgens de gangbare React-standaarden wordt geschreven. 

 

 💡 Waarom gebruiken we Vite? 

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

 Vite is: Sneller, moderner, eenvoudiger, de standaard binnen nieuwe React-projecten. 

 Daarom gebruiken wij Vite tijdens deze module. 

 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. 

 Stap 2 

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

 Ga naar de projectmap. 

 cd game-collection 

 Stap 3 

 Installeer alle packages. 

 npm install 

 Stap 4 

 Start de ontwikkelomgeving in dien je het niet is gestart. 

 Terminal in VScode 

 npm run dev 

 Je ziet nu ongeveer: 

 > npx 

> create-vite game-collection --template react 

 

│ 

◇ Which linter to use? 

│ ESLint 

│ 

◇ Install with npm and start now? 

│ Yes 

│ 

◇ Scaffolding project in C:\REACT-1\game-collection... 

│ 

◇ Installing dependencies with npm... 

 

added 135 packages, and audited 136 packages in 8s 

 

31 packages are looking for funding 

 run `npm fund` for details 

 

found 0 vulnerabilities 

│ 

◇ Starting dev server... 

 

> game-collection@0.0.0 dev 

> vite

 VITE v8.1.4 ready in 428 ms 

 

 ➜ Local: http://localhost:5173/ 

 ➜ Network: use --host to expose 

 ➜ press h + enter to show help 

 

 Als alles goed is zie je via de link http://localhost:5173/  de standaard React pagina 

 

 

 

 

 🛠️ Opdracht 2 – Verken de projectstructuur 

 React-projecten bestaan uit verschillende mappen. 

 Zoek onderstaande bestanden en mappen op in je verkenner. 

 | Bestand | Functie | 

| -------------- | ------------------------------------------ | 

| `src` | Hier staat bijna alle React-code | 

| `App.jsx` | De hoofdcomponent van de applicatie | 

| `main.jsx` | Startpunt van de React-app | 

| `public` | Afbeeldingen en andere statische bestanden | 

| `package.json` | Overzicht van alle packages | 

 

 In deze module ga je vooral hieraan werken. 

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

 Open: 

 src/App.jsx 

 Vervang de bestaande inhoud door: Vul je eigen naam, studentennummer en klas in. 

 import "./App.css";

function App() { 

 return ( 

 <> 

 <h1>🎮 Game Collection</h1> 

 

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

 

 <p>Naam: Jouw naam</p> 

 

 <p>Studentnummer: Jouw studentnummer</p> 

 

 <p>Klas: Jouw klas</p> 

 </> 

 ); 

} 

 

export default App; 

 Sla het bestand op. De browser wordt automatisch bijgewerkt. 

 

 💡 Wist je dat? 

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

 Dit heet Hot Reloading . 

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

 

 💾 GitHub 

 Nu de applicatie werkt is het tijd om de eerste werkende versie op te slaan. 

 Open Source Control in Visual Studio Code. 

 Maak een commit met het bericht: 

 Les 1 - React omgeving gereed 

 Synchroniseer daarna met GitHub. Vanaf nu maak je na iedere werkende opdracht een nieuwe commit. 

 

 🤖 AI-opdracht 

 Gebruik ChatGPT. 

 Prompt: 

 

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

 

 Vergelijk de uitleg met deze les. 

 Beschrijf in maximaal 100 woorden welke uitleg jij duidelijker vond. 

 

 🧠 Kennischeck 

 

 Wat is React? 

 Waarom gebruiken veel bedrijven React? 

 Wat is het verschil tussen Front-end en Back-end? 

 Waarom gebruiken we Vite? 

 Wat is de functie van App.jsx ? 

 Wat is de functie van main.jsx ? 

 Waarom gebruiken we GitHub tijdens deze module? 

 

 

 📤 Inleveren 

 Lever de volgende onderdelen in via Canvas. 

 

 📷 Screenshot van de draaiende React-applicatie. 

 📷 Screenshot van App.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 en de eerste eigen opmaak 

 

 🎯 Leerdoelen 

 Na deze les kun je: 

 

 uitleggen wat JSX is; 

 het verschil beschrijven tussen HTML en JSX; 

 de standaard Vite-opmaak vervangen; 

 een eenvoudige eigen CSS-opmaak maken; 

 className gebruiken in React. 

 

 

 📖 Wat ga je vandaag maken? 

 In de vorige les heb je jouw eerste React-applicatie gemaakt met Vite. 

 Vandaag ga je de applicatie verder uitbreiden. 

 Je leert wat JSX is en vervangt de standaard Vite-opmaak door een eigen eenvoudige vormgeving. 

 Vanaf deze les werken alle studenten met dezelfde basis voor de rest van de module. 

 

 📖 Wat is JSX? 

 React gebruikt JSX . 

 JSX lijkt heel erg op HTML, maar het is geen HTML. 

 Eigenlijk is JSX gewone JavaScript waarin je HTML mag schrijven. 

 React zet deze code tijdens het uitvoeren automatisch om naar JavaScript. 

 Bijvoorbeeld: 

 <h1>🎮 Game Collection</h1>

 

 Dit ziet eruit als HTML, maar is JSX. 

 

 💡 JSX lijkt op HTML, maar... 

 Er zijn een paar kleine verschillen. 

 

 

 

 HTML 

 JSX 

 

 

 

 

 class 

 className 

 

 

 for 

 htmlFor 

 

 

 onclick 

 onClick 

 

 

 

 Tijdens deze module gebruiken we vooral: 

 className

 

 

 🛠️ Opdracht 1 – De standaard Vite-opmaak vervangen 

 Vite maakt automatisch een voorbeeldopmaak. 

 Deze is handig voor de standaard React-pagina, maar voor onze eigen applicatie willen we een eenvoudige en overzichtelijke basis. 

 Open: 

 src/index.css

 

 Vervang de volledige inhoud door: 

 * {

 margin: 0;

 padding: 0;

 box-sizing: border-box;

}

body {

 font-family: Arial, Helvetica, sans-serif;

 background-color: #f5f5f5;

}

 

 Sla het bestand op. 

 Open daarna: 

 src/App.css

 

 Vervang ook hier de volledige inhoud door: 

 .container {

 max-width: 800px;

 margin: 40px auto;

 background: white;

 padding: 30px;

 border-radius: 10px;

 box-shadow: 0 0 10px rgba(0,0,0,.1);

}

.title {

 color: #6e25eb;

}

.games {

 margin-top: 30px;

}

ul {

 padding-left: 20px;

}

li {

 margin-bottom: 8px;

}

 

 Sla ook dit bestand op. 

 

 💡 Waarom doen we dit? 

 Zo werken alle studenten met dezelfde eenvoudige CSS. Dat maakt de voorbeelden uit deze cursus overzichtelijk en voorkomt verwarring met de standaard Vite-opmaak. 

 

 

 🛠️ Opdracht 2 – Gebruik de CSS in React 

 Open: 

 src/App.jsx

 

 Controleer of bovenaan het bestand staat: 

 import "./App.css";

 

 Pas daarna de JSX aan. 

 Plaats de bestaande inhoud van je pagina binnen onderstaande structuur. 

 <div className="container">

 <h1 className="title">

 🎮 Game Collection

 </h1>

 <div className="games">

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

 <p>Naam: Jouw naam</p>

 <p>Studentnummer: Jouw studentnummer</p>

 <p>Klas: Jouw klas</p>

 </div>

</div>

 

 Sla het bestand op. 

 Controleer of de pagina nu een witte achtergrond heeft en de titel paars is geworden. 

 

 

 💡 Experimenteer met CSS 

 CSS bepaalt hoe jouw website eruitziet. 

 Probeer de onderstaande eigenschappen eens aan te passen. 

 

 Verander de kleur van de titel. 

 Pas de breedte van de container aan. 

 Geef de pagina een andere achtergrondkleur. 

 Maak de ruimte tussen de onderdelen groter of kleiner. 

 

 Sla iedere wijziging op. 

 Door Hot Reloading zie je direct het resultaat in de browser. 

 

 💡 Wist je dat? 

 React vernieuwt de browser automatisch zodra je een bestand opslaat. 

 Dit noemen we Hot Reloading . 

 Hierdoor kun je snel experimenteren met je code zonder steeds de pagina opnieuw te laden. 

 

 💾 GitHub 

 Maak een commit met het bericht: 

 Les 2 - Eigen CSS toegepast

 

 Synchroniseer daarna met GitHub. 

 

 🤖 AI-opdracht 

 Gebruik ChatGPT. 

 Prompt: 

 

 Leg uit wat JSX is en waarom React hiervoor kiest in plaats van gewone HTML. 

 

 Beschrijf daarna in maximaal 100 woorden wat volgens jou het belangrijkste voordeel van JSX is. 

 

 🧠 Kennischeck 

 

 Wat is JSX? 

 Waarom is JSX geen gewone HTML? 

 Waarom gebruiken we className in plaats van class ? 

 Waarom vervangen we de standaard Vite CSS? 

 Wat is de functie van App.css ? 

 Wat is de functie van index.css ? 

 Wat is Hot Reloading? 

 

 

 📤 Inleveren 

 Lever de volgende onderdelen in via Canvas. 

 

 📷 Screenshot van de aangepaste Game Collection. 

 📷 Screenshot van App.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 3 – Componenten: Bouwstenen van React 

 

 🎯 Leerdoelen 

 Na deze les kun je: 

 

 uitleggen wat een component is; 

 uitleggen waarom React componenten gebruikt; 

 een component maken; 

 een component importeren; 

 een component hergebruiken. 

 

 

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

 

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

 

 Header 

 GameList 

 GameCard 

 Footer 

 

 Iedere GameCard wordt slechts één keer gemaakt. 

 React gebruikt deze daarna zo vaak als nodig. 

 

 [Afbeelding Component Tree] 

 

 

 💡 Waarom gebruiken we componenten? 

 Stel dat jouw website uit twintig pagina's bestaat. 

 Iedere pagina heeft dezelfde header. 

 Zonder componenten moet je die header twintig keer aanpassen. 

 Met React maak je de header één keer. 

 Daarna gebruik je dezelfde component overal opnieuw. 

 Dat bespaart veel tijd en zorgt ervoor dat je code overzichtelijk blijft. 

 

 🛠️ Opdracht 1 – Maak een map voor componenten 

 Open de map: 

 src

 

 Maak hierin een nieuwe map. 

 components

 

 De projectstructuur ziet er daarna ongeveer zo uit. 

 src

├── components

├── App.css

├── App.jsx

├── index.css

└── main.jsx

 

 In deze map plaatsen we straks al onze React-componenten. 

 

 

 

 

 🛠️ Opdracht 2 – Maak de eerste component 

 Maak in de map components een nieuw bestand. 

 Header.jsx

 

 Voeg onderstaande code toe. 

 function Header() {

 return (

 <h1>🎮 Game Collection</h1>

 );

}

export default Header;

 

 Sla het bestand op. 

 Je hebt nu jouw eerste React-component gemaakt. 

 

 📖 Wat betekent export default ? 

 Een component staat in een apart bestand. 

 Om deze component in een ander bestand te kunnen gebruiken, moet je hem exporteren. 

 Dat doe je met: 

 export default Header;

 

 Hierdoor kan App.jsx deze component straks importeren en gebruiken. 

 

 🛠️ Opdracht 3 – Gebruik de Header-component 

 Open: 

 src/App.jsx

 

 Importeer de nieuwe component bovenaan het bestand. 

 import "./App.css";

import Header from "./components/Header";

 

 Vervang daarna de bestaande titel door de nieuwe component. 

 <Header />

 

 Je App.jsx ziet er nu ongeveer zo uit. 

 import "./App.css";

import Header from "./components/Header";

function App() {

 return (

 <div className="container">

 <Header />

 <div className="games">

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

 <p>Naam: Jouw naam</p>

 <p>Studentnummer: Jouw studentnummer</p>

 <p>Klas: Jouw klas</p>

 </div>

 </div>

 );

}

export default App;

 

 Sla het bestand op. 

 De browser ziet er nog precies hetzelfde uit. 

 Het verschil is dat de titel nu uit een apart bestand wordt geladen. 

 

 📖 Wat betekent import ? 

 Met import haal je een component uit een ander bestand. 

 React weet hierdoor waar de component staat. 

 Daarna kun je deze gebruiken alsof het een HTML-element is. 

 Bijvoorbeeld: 

 <Header />

 

 React voert vervolgens automatisch de code uit die in Header.jsx staat. 

 

 🛠️ Opdracht 4 – Maak een Footer-component 

 Maak in de map components een nieuw bestand. 

 Footer.jsx

 

 Voeg onderstaande code toe. 

 function Footer() {

 return (

 <footer>

 © 2026 Game Collection

 </footer>

 );

}

export default Footer;

 

 Open daarna opnieuw: 

 src/App.jsx

 

 Importeer de Footer-component. 

 import Footer from "./components/Footer";

 

 Voeg de component onderaan de pagina toe. 

 <Footer />

 

 Controleer of de footer zichtbaar is. 

 

 

   

 

 

 💡 Wist je dat? 

 Grote React-projecten bestaan vaak uit honderden componenten. 

 Iedere component heeft één duidelijke taak. 

 Daardoor blijft de code overzichtelijk en kunnen meerdere programmeurs tegelijk aan dezelfde applicatie werken. 

 

 💾 GitHub 

 Maak een commit met het bericht: 

 Les 3 - Eerste componenten gemaakt

 

 Synchroniseer daarna met GitHub. 

 

 🤖 AI-opdracht 

 Gebruik ChatGPT. 

 Prompt: 

 

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

 

 Beschrijf daarna in maximaal 100 woorden waarom componenten belangrijk zijn. 

 

 🧠 Kennischeck 

 

 Wat is een component? 

 Waarom gebruiken we componenten? 

 Waarom maken we een map components ? 

 Wat doet export default ? 

 Wat doet import ? 

 Waarom gebruiken we <Header /> in plaats van een gewone <h1> ? 

 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 Footer.jsx . 

 📷 Screenshot van de GitHub-commit. 

 📄 PDF of TXT met de antwoorden op de kennischeck. 

 📄 De uitwerking van de AI-opdracht. 

 

 Les 4 – Props: Gegevens doorgeven aan componenten 

 

 🎯 Leerdoelen 

 Na deze les kun je: 

 

 uitleggen wat Props zijn; 

 gegevens doorgeven aan een component; 

 Props gebruiken binnen een component; 

 meerdere GameCards maken met dezelfde component; 

 het voordeel van herbruikbare componenten uitleggen. 

 

 

 🎮 Wat ga je vandaag maken? 

 In de vorige les heb je geleerd hoe je componenten maakt. 

 Maar iedere component toont nu steeds dezelfde informatie. 

 Dat is natuurlijk niet handig. 

 Een Game Collection bestaat uit verschillende games. 

 Iedere game heeft bijvoorbeeld een: 

 

 🎮 Titel 

 🖥️ Platform 

 ⭐ Beoordeling 

 

 Vandaag leer je hoe je gegevens kunt doorgeven aan een component. 

 Dit doen we met Props . 

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

 

 

 

 

 📖 Wat zijn Props? 

 Props is een afkorting van Properties . 

 Met Props geef je gegevens door aan een component. 

 Hierdoor kun je dezelfde component meerdere keren gebruiken met verschillende gegevens. 

 Bijvoorbeeld: 

 <Header title="🎮 Game Collection" />

 

 De waarde "🎮 Game Collection" wordt nu doorgegeven aan de component. 

 

 💡 Waarom gebruiken we Props? 

 Stel dat je honderd games wilt tonen. 

 Zonder Props moet je honderd verschillende componenten maken. 

 Met Props maak je slechts één component. 

 Daarna geef je telkens andere gegevens door. 

 Dat bespaart veel tijd en zorgt ervoor dat jouw code overzichtelijk blijft. 

 

 🛠️ Opdracht 1 – Header uitbreiden met Props 

 Open: 

 src/components/Header.jsx

 

 Vervang de bestaande code door: 

 function Header(props) {

 return (

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

 );

}

export default Header;

 

 Sla het bestand op. 

 

 🛠️ Opdracht 2 – Geef gegevens door 

 Open: 

 src/App.jsx

 

 Pas de Header-component aan. 

 <Header title="🎮 Game Collection" />

 

 Sla het bestand op. 

 De pagina ziet er hetzelfde uit. 

 Toch is er iets veranderd. 

 De titel staat niet langer vast in Header.jsx , maar wordt nu vanuit App.jsx doorgegeven. 

 

 📖 Hoe werken Props? 

 Wanneer React de onderstaande component tegenkomt: 

 <Header title="🎮 Game Collection" />

 

 wordt de waarde automatisch opgeslagen in het object props . 

 Je kunt deze vervolgens gebruiken met: 

 props.title

 

 Hierdoor verschijnt de titel op de juiste plaats in de browser. 

 

 🛠️ Opdracht 3 – Maak de eerste GameCard 

 Maak in de map components een nieuw bestand. 

 GameCard.jsx

 

 Voeg onderstaande code toe. 

 function GameCard(props) {

 return (

 <div>

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

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

 </div>

 );

}

export default GameCard;

 

 Sla het bestand op. 

 

 🛠️ Opdracht 4 – Gebruik de GameCard 

 Open: 

 src/App.jsx

 

 Importeer de nieuwe component. 

 import GameCard from "./components/GameCard";

 

 Voeg onder de welkomsttekst de onderstaande componenten toe. 

 <GameCard

 title="Minecraft"

 platform="PC"

/>

<GameCard

 title="Mario Kart"

 platform="Nintendo Switch"

/>

<GameCard

 title="Rocket League"

 platform="PlayStation 5"

/>

 

 Sla het bestand op. 

 Controleer of de drie GameCards zichtbaar zijn. 

 

 🛠️ Opdracht 5 – Geef de Game Collection een professionele uitstraling 

 De Game Collection werkt nu goed, maar ziet er nog eenvoudig uit. 

 Met een paar kleine CSS-aanpassingen maken we de applicatie overzichtelijker en professioneler. 

 Open: 

 src/App.css

 

 Vervang de bestaande inhoud door: 

 body {

 background-color: #f5f5f5;

 font-family: Arial, Helvetica, sans-serif;

}

.container {

 max-width: 900px;

 margin: 40px auto;

 background: white;

 padding: 35px;

 border-radius: 12px;

 box-shadow: 0 8px 18px rgba(0, 0, 0, 0.1);

}

.app-title {

 color: #6e25eb;

 border-bottom: 3px solid #6e25eb;

 padding-bottom: 12px;

 margin-bottom: 30px;

}

.game-list {

 margin-top: 30px;

}

.game-card {

 background-color: #fafafa;

 border: 1px solid #dddddd;

 border-radius: 10px;

 padding: 15px;

 margin-bottom: 15px;

 transition: 0.2s ease;

}

.game-card:hover {

 box-shadow: 0 4px 12px rgba(0,0,0,.08);

}

.game-card h2 {

 margin-bottom: 8px;

 color: #333;

}

.game-card p {

 color: #666;

}

footer {

 margin-top: 35px;

 padding-top: 20px;

 border-top: 1px solid #dddddd;

 color: #777;

 font-size: 14px;

}

 

 Open daarna: 

 src/components/Header.jsx

 

 Pas de component aan. 

 function Header(props) {

 return (

 <h1 className="app-title">

 {props.title}

 </h1>

 );

}

export default Header;

 

 Open vervolgens: 

 src/App.jsx

 

 Wijzig de CSS-klasse van de lijst. 

 <div className="game-list">

 

 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 (

 <h1 className="app-title">

 {props.title}

 </h1>

 );

}

export default Header;

 

 Open daarna: 

 src/components/GameCard.jsx

 

 Controleer of de component de juiste CSS-klasse gebruikt. 

 function GameCard(props) {

 return (

 <div className="game-card">

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

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

 </div>

 );

}

export default GameCard;

 

 Open vervolgens: 

 src/App.jsx

 

 Pas de CSS-klasse van de lijst aan. 

 <div className="game-list">

 

 Sla alle bestanden op. 

 Controleer of de Game Collection er nu overzichtelijker uitziet. 

 

 

 

 

 💡 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 

 

 Waar staat Props voor? 

 Waarom gebruiken we Props? 

 Hoe geef je gegevens door aan een component? 

 Hoe lees je Props uit binnen een component? 

 Waarom is een GameCard met Props beter dan drie losse GameCards? 

 Wat gebeurt er als je een andere titel doorgeeft? 

 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] 

 

 

 

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

 

 

 

 

 Onderdeel 

 Betekenis 

 

 

 

 

 favorite 

 De huidige waarde. 

 

 

 setFavorite 

 Wijzigt de waarde. 

 

 

 

 React onthoudt deze waarde zolang de applicatie actief is. 

 

 🛠️ Opdracht 3 – Voeg een knop toe 

 Voeg onder de platformtekst de onderstaande knop toe. 

 <button>

 🤍 Favoriet

</button>

 

 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. 

 <button

 className="favorite-button"

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

>

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

</button>

 

 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 

 

 Wat is State? 

 Waarom gebruiken we useState() ? 

 Wat doet setFavorite() ? 

 Wat doet onClick ? 

 Waarom verandert de tekst op de knop? 

 Waarom bouwt React de component opnieuw op? 

 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] 

 

 

 

 📖 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 <GameCard /> -componenten. 

 De pagina bevat nu nog geen games. 

 Dat is de bedoeling 

 

 🛠️ Opdracht 3 – Gebruik map() 

 Nu gaan we de array gebruiken om automatisch GameCards te maken. 

 Open: 

 src/App.jsx

 

 Voeg op de plaats waar de drie losse GameCards stonden de onderstaande code toe. 

 {games.map((game) => (

 <GameCard

 key={game.id}

 title={game.title}

 platform={game.platform}

 />

))}

 

 Sla het bestand op. 

 Controleer de browser. 

 De drie GameCards zijn weer terug. 

 Het grote verschil is dat React ze nu automatisch maakt. 

 

 📖 Hoe werkt map()? 

 De functie map() doorloopt één voor één alle onderdelen van de array. 

 Voor iedere game maakt React een nieuwe GameCard . 

 Eigenlijk gebeurt dit: 

 Game 1

↓

GameCard

Game 2

↓

GameCard

Game 3

↓

GameCard

 

 Daardoor hoef je zelf geen componenten meer te kopiëren. 

 

 📖 Waarom gebruiken we een key? 

 Iedere GameCard krijgt een unieke key . 

 key={game.id}

 

 Hiermee kan React iedere component uit elkaar houden. 

 Dat maakt de applicatie sneller en voorkomt fouten. 

 Gebruik daarom altijd een unieke waarde als key . 

 

 🛠️ Opdracht 4 – Voeg zelf een game toe 

 Voeg zelf een vierde game toe aan de array. 

 Bijvoorbeeld: 

 {

 id: 4,

 title: "Vul zelf een game in of plaats je favorite game",

 platform: " Vul zelf in... "

}

 

 Sla het bestand op. 

 Er verschijnt automatisch een vierde GameCard. 

 Je hoeft nergens anders iets aan te passen. 

 

 

 

 

 💡 Waarom is dit zo krachtig? 

 Stel dat jouw Game Collection straks uit 1.000 games bestaat. 

 Je hoeft alleen de array uit te breiden. 

 React maakt daarna automatisch alle GameCards. 

 Daarom gebruiken vrijwel alle React-applicaties map() . 

 

 💡 Wist je dat? 

 Later in deze module halen we de games niet meer uit een array die we zelf hebben gemaakt. 

 De gegevens komen dan uit een database of een API. 

 De code met map() blijft precies hetzelfde. 

 

 💾 GitHub 

 Maak een commit met het bericht: 

 Les 6 - Arrays en map toegepast

 

 Synchroniseer daarna met GitHub. 

 

 🤖 AI-opdracht 

 Gebruik ChatGPT. 

 Prompt: 

 

 Leg uit waarom React de functie map() gebruikt en niet meerdere keren dezelfde component laat kopiëren. 

 

 Beschrijf daarna in maximaal 100 woorden waarom map() belangrijk is voor grote React-applicaties. 

 

 🧠 Kennischeck 

 

 Wat is een array? 

 Waarom gebruiken we een array in React? 

 Wat doet de functie map() ? 

 Waarom gebruiken we een key ? 

 Waarom hoeft de component GameCard maar één keer gemaakt te worden? 

 Wat gebeurt er als je een nieuwe game toevoegt aan de array? 

 Waarom wordt map() in vrijwel iedere React-applicatie gebruikt? 

 

 

 📤 Inleveren 

 Lever de volgende onderdelen in via Canvas. 

 

 📷 Screenshot van de browser. 

 📷 Screenshot van App.jsx . 

 📷 Screenshot van de array met games. 

 📷 Screenshot van de GitHub-commit. 

 📄 PDF of TXT met de antwoorden op de kennischeck. 

 📄 De uitwerking van de AI-opdracht. 

 

 Les 7 – Zoeken in de Game Collection 

 

 🎯 Leerdoelen 

 Na deze les kun je: 

 

 een invoerveld maken; 

 werken met onChange ; 

 de ingevoerde tekst opslaan met useState() ; 

 gegevens filteren met filter() ; 

 een zoekfunctie bouwen. 

 

 

 🎮 Wat ga je vandaag maken? 

 Je Game Collection groeit steeds verder. 

 Wanneer een gebruiker tientallen of honderden games heeft, wordt zoeken belangrijk. 

 Vandaag bouw je een zoekfunctie. 

 Terwijl de gebruiker typt, worden alleen de passende games weergegeven. 

 

 [Afbeelding eindresultaat] 

 

 

 

 📖 Waarom zoeken? 

 Stel dat jouw Game Collection straks uit honderden games bestaat. 

 Dan wil je niet eindeloos hoeven scrollen. 

 Daarom gebruiken bijna alle websites een zoekfunctie. 

 Denk bijvoorbeeld aan: 

 

 🎮 Steam 

 🎬 Netflix 

 🎵 Spotify 

 🛒 Bol.com 

 

 Vandaag bouwen we onze eigen zoekfunctie. 

 

 📖 Wat is filter()? 

 Met filter() kun je een gedeelte van een array selecteren. 

 Alle onderdelen die voldoen aan een bepaalde voorwaarde blijven over. 

 Bijvoorbeeld: 

 ["Minecraft", "Mario Kart", "Rocket League"]

 

 Zoek je op Mario ? 

 Dan blijft alleen over: 

 ["Mario Kart"]

 

 

 🛠️ Opdracht 1 – Maak een zoekveld 

 Open: 

 src/App.jsx

 

 Importeer bovenaan: 

 import { useState } from "react";

 

 Maak daarna de onderstaande State. 

 const [search, setSearch] = useState("");

 

 Sla het bestand op. 

 

 🛠️ Opdracht 2 – Voeg een invoerveld toe 

 Plaats boven de GameCards. 

 <input

 type="text"

 placeholder="Zoek een game..."

 value={search}

 onChange={(e) => setSearch(e.target.value)}

/>

 

 Sla het bestand op. 

 Controleer of je kunt typen in het zoekveld. 

 

 

 

 

 📖 Wat doet onChange? 

 Iedere keer wanneer de gebruiker een letter typt, wordt onChange uitgevoerd. 

 De tekst wordt opgeslagen in de State: 

 search

 

 React weet daardoor altijd wat de gebruiker heeft ingevuld. 

 

 🛠️ Opdracht 3 – Filter de Game Collection 

 Nu gaan we de lijst met games filteren. 

 Open: 

 src/App.jsx

 

 Zoek de onderstaande code op. 

 {games.map((game) => (

 <GameCard

 key={game.id}

 title={game.title}

 platform={game.platform}

 />

))}

 

 Vervang deze door: 

 {games

.filter((game) =>

 game.title.toLowerCase().includes(search.toLowerCase())

)

.map((game) => (

 <GameCard

 key={game.id}

 title={game.title}

 platform={game.platform}

 />

))}

 

 Sla het bestand op. 

 Typ nu een gedeelte van een gamenaam in het zoekveld. 

 Alleen de games die overeenkomen blijven zichtbaar. 

 

 📖 Hoe werkt filter()? 

 React bekijkt iedere game uit de array. 

 Daarna controleert de functie: 

 game.title.includes(...)

 

 Bevat de titel de zoektekst? 

 

 ✅ Ja → de game blijft zichtbaar. 

 ❌ Nee → de game wordt niet weergegeven. 

 

 Daarna gebruikt React opnieuw map() om alleen de overgebleven games als GameCards te tonen. 

 

 🛠️ Opdracht 4 – Voeg extra games toe 

 Breid de array uit met minimaal drie extra games. 

 Bijvoorbeeld: 

 {

 id: 5,

 title: "The Legend of Zelda",

 platform: "Nintendo Switch"

},

{

 id: 6,

 title: "Fortnite",

 platform: "PC"

},

{

 id: 7,

 title: "EA Sports FC 26",

 platform: "PlayStation 5"

}

 

 Controleer of de zoekfunctie ook werkt voor deze nieuwe games. 

 

 🛠️ Opdracht 5 – Geef het zoekveld een eigen stijl 

 Open: 

 src/App.css

 

 Voeg de onderstaande CSS toe. 

 .search-input {

 width: 100%;

 padding: 12px;

 margin-bottom: 25px;

 border: 1px solid #cccccc;

 border-radius: 8px;

 font-size: 16px;

}

 

 Open daarna: 

 src/App.jsx

 

 Pas het invoerveld aan. 

 <input

 className="search-input"

 type="text"

 placeholder="Zoek een game..."

 value={search}

 onChange={(e) => setSearch(e.target.value)}

/>

 

 Sla het bestand op. 

 Controleer of het zoekveld een nette opmaak heeft gekregen. 

 

 💡 Wist je dat? 

 Zoekfuncties zoals deze worden dagelijks miljoenen keren gebruikt. 

 Websites zoals Netflix, Steam, Spotify en Bol.com gebruiken hetzelfde principe. 

 Vaak worden de gegevens later niet meer uit een array gehaald, maar uit een database of een API. 

 

 💾 GitHub 

 Maak een commit met het bericht: 

 Les 7 - Zoekfunctie toegevoegd

 

 Synchroniseer daarna met GitHub. 

 

 🤖 AI-opdracht 

 Gebruik ChatGPT. 

 Prompt: 

 

 Leg uit hoe filter() werkt in React alsof je het uitlegt aan een eerstejaars mbo Software Developer. 

 

 Beschrijf daarna in maximaal 100 woorden waarom een zoekfunctie belangrijk is voor een webapplicatie. 

 

 🧠 Kennischeck 

 

 Waarvoor gebruiken we filter() ? 

 Wat doet onChange ? 

 Waarom gebruiken we useState() bij het zoekveld? 

 Wat doet includes() ? 

 Waarom gebruiken we toLowerCase() ? 

 Wat gebeurt er nadat filter() klaar is? 

 Noem drie websites waarop een vergelijkbare zoekfunctie wordt gebruikt. 

 

 

 📤 Inleveren 

 Lever de volgende onderdelen in via Canvas. 

 

 📷 Screenshot van de werkende zoekfunctie. 

 📷 Screenshot van App.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 8 – Werken met JSON: Scheid data en presentatie 

 

 🎯 Leerdoelen 

 Na deze les kun je: 

 

 uitleggen wat een JSON-bestand is; 

 een JSON-bestand importeren in React; 

 gegevens buiten App.jsx opslaan; 

 een GameCard uitbreiden met extra informatie; 

 uitleggen waarom het scheiden van data en presentatie belangrijk is. 

 

 

 🎮 Wat ga je vandaag maken? 

 Tot nu toe stond alle informatie over de games in App.jsx . 

 Dat werkt prima wanneer je drie of vier games hebt. 

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

 Dan wordt App.jsx erg groot en onoverzichtelijk. 

 Vandaag ga je de gegevens verplaatsen naar een apart JSON-bestand. 

 Daarna breid je iedere GameCard uit met extra informatie. 

 

 [Afbeelding eindresultaat] 

 

 

 

 📖 Wat is JSON? 

 JSON staat voor JavaScript Object Notation . 

 Het is één van de meest gebruikte bestandsformaten voor het opslaan en uitwisselen van gegevens. 

 Vrijwel iedere website en webapplicatie gebruikt JSON. 

 Ook Laravel stuurt straks JSON terug naar React. 

 

 💡 Waarom gebruiken we JSON? 

 Door gegevens in een apart bestand op te slaan blijft je React-code overzichtelijk. 

 De componenten bepalen hoe iets wordt weergegeven. 

 Het JSON-bestand bepaalt welke gegevens worden weergegeven. 

 Dit noemen we het scheiden van data en presentatie . 

 

 🛠️ Opdracht 1 – Maak een map voor de gegevens 

 Maak in de map src een nieuwe map aan. 

 src

├── components

├── data

│ games.json

 

 In dit bestand gaan we alle games opslaan. 

 

 🛠️ Opdracht 2 – Maak het JSON-bestand 

 Open games.json . 

 Voeg de onderstaande gegevens toe. 

 [

 {

 "id": 1,

 "title": "⛏️ Minecraft",

 "platform": "PC",

 "genre": "Sandbox",

 "rating": 9.5,

 "year": 2011

 },

 {

 "id": 2,

 "title": "🏎️ Mario Kart World",

 "platform": "Nintendo Switch 2",

 "genre": "Race",

 "rating": 9.3,

 "year": 2025

 },

 {

 "id": 3,

 "title": "🚗 Rocket League",

 "platform": "PlayStation 5",

 "genre": "Sport",

 "rating": 8.9,

 "year": 2015

 },

 {

 "id": 4,

 "title": "⚽ EA Sports FC 26",

 "platform": "PlayStation 5",

 "genre": "Sport",

 "rating": 8.6,

 "year": 2025

 },

 {

 "id": 5,

 "title": "🗡️ The Legend of Zelda",

 "platform": "Nintendo Switch",

 "genre": "Adventure",

 "rating": 9.8,

 "year": 2023

 },

 {

 "id": 6,

 "title": "🚌 Fortnite",

 "platform": "PC",

 "genre": "Battle Royale",

 "rating": 8.7,

 "year": 2017

 },

 {

 "id": 7,

 "title": "🤖 Cyberpunk 2077",

 "platform": "PC",

 "genre": "RPG",

 "rating": 8.8,

 "year": 2020

 },

 {

 "id": 8,

 "title": "🤠 Red Dead Redemption 2",

 "platform": "PC",

 "genre": "Adventure",

 "rating": 9.9,

 "year": 2018

 },

 {

 "id": 9,

 "title": "🚔 GTA V",

 "platform": "PC",

 "genre": "Action",

 "rating": 9.8,

 "year": 2013

 },

 {

 "id": 10,

 "title": "👑 Elden Ring",

 "platform": "PlayStation 5",

 "genre": "RPG",

 "rating": 9.7,

 "year": 2022

 },

 {

 "id": 11,

 "title": "🚀 ROC Amstelland Dev Challenge",

 "platform": "ESP32 / Raspberry Pi / Arduino",

 "genre": "Developer Event",

 "rating": 10.0,

 "year": 2027

 }

]

 

 Sla het bestand op. 

 Er verandert nog niets in de browser. 

 Dat is de bedoeling. 

 

 🛠️ Opdracht 3 – Importeer het JSON-bestand 

 Open: 

 src/App.jsx

 

 Importeer het JSON-bestand. 

 import games from "./data/games.json";

 

 Verwijder daarna de bestaande array uit App.jsx . 

 De applicatie werkt nog precies hetzelfde. 

 

 🛠️ Opdracht 4 – Breid de GameCard uit 

 Nu de gegevens in een JSON-bestand staan, kunnen we meer informatie tonen. 

 Open: 

 src/App.jsx

 

 Geef de extra gegevens door aan de component. 

 <GameCard

 key={game.id}

 title={game.title}

 platform={game.platform}

 genre={game.genre}

 rating={game.rating}

 year={game.year}

/>

 

 Open daarna: 

 src/components/GameCard.jsx

 

 Breid de component uit. 

 function GameCard(props) {

 return (

 <div className="game-card">

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

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

 <p>Genre: {props.genre}</p>

 <p>Rating: ⭐ {props.rating}</p>

 <p>Jaar: {props.year}</p>

 </div>

 );

}

export default GameCard;

 

 Sla beide bestanden op. 

 Iedere GameCard toont nu meer informatie. 

 

 🛠️ Opdracht 5 – Breid de Game Collection uit 

 Open: 

 src/data/games.json

 

 Voeg minimaal 10 extra games toe. 

 Gebruik bijvoorbeeld: 

 

 Terraria 

 Valorant 

 League of Legends 

 Roblox 

 Animal Crossing 

 The Witcher 3 

 Hogwarts Legacy 

 Assassin's Creed Shadows 

 Call of Duty Black Ops 7 

 Forza Horizon 5 

 

 Vul bij iedere game ook het platform, genre, rating en jaar in. 

 Sla het JSON-bestand op. 

 De nieuwe GameCards verschijnen automatisch in de browser. 

 

 🛠️ Opdracht 6 – Test de zoekfunctie 

 Gebruik de zoekfunctie uit de vorige les. 

 Zoek bijvoorbeeld op: 

 

 Mario 

 Call 

 League 

 Red 

 Minecraft 

 

 Controleer of alleen de juiste GameCards zichtbaar blijven. 

 Je merkt nu goed waarom een zoekfunctie handig is wanneer de collectie groter wordt. 

 

 💡 Waarom scheiden we data en presentatie? 

 Je React-componenten bepalen hoe gegevens worden weergegeven. 

 Het JSON-bestand bepaalt welke gegevens worden weergegeven. 

 Daardoor blijft de code overzichtelijk en kun je eenvoudig nieuwe games toevoegen zonder de React-code aan te passen. 

 Dit is een belangrijk principe binnen professionele softwareontwikkeling. 

 

 💡 Wist je dat? 

 Veel webapplicaties laden hun gegevens vanuit JSON. 

 In de vervolgreeks wordt dit JSON-bestand vervangen door gegevens uit een Laravel-back-end. 

 De React-componenten hoeven daarvoor nauwelijks aangepast te worden. 

 

 💾 GitHub 

 Maak een commit met het bericht: 

 Les 8 - JSON toegepast

 

 Synchroniseer daarna met GitHub. 

 

 🤖 AI-opdracht 

 Gebruik ChatGPT. 

 Prompt: 

 

 Leg uit waarom professionele softwareontwikkelaars gegevens in een JSON-bestand opslaan in plaats van direct in de code. 

 

 Beschrijf daarna in maximaal 100 woorden wat volgens jou de voordelen zijn van het scheiden van data en presentatie. 

 

 🧠 Kennischeck 

 

 Waar staat JSON voor? 

 Waarom gebruiken we een JSON-bestand? 

 Hoe importeer je een JSON-bestand in React? 

 Waarom is het handig om data buiten App.jsx op te slaan? 

 Welke extra gegevens heb je toegevoegd aan de GameCards? 

 Waarom bleef de zoekfunctie werken nadat je de data naar JSON had verplaatst? 

 Wat wordt bedoeld met het scheiden van data en presentatie? 

 

 

 📤 Inleveren 

 Lever de volgende onderdelen in via Canvas. 

 

 📷 Screenshot van de uitgebreide Game Collection. 

 📷 Screenshot van games.json . 

 📷 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 9 – AI-afbeeldingen toevoegen aan je React-applicatie 

 

 🎯 Leerdoelen 

 Na deze les kun je: 

 

 AI gebruiken om een eigen gameposter te maken; 

 een goede prompt schrijven; 

 een AI-afbeelding toevoegen aan een React-applicatie; 

 afbeeldingen koppelen via een JSON-bestand; 

 uitleggen waarom verantwoord gebruik van AI belangrijk is. 

 

 

 🎮 Wat ga je vandaag maken? 

 Jouw Game Collection bevat inmiddels een mooie verzameling games. 

 Maar een echte gamebibliotheek bestaat natuurlijk niet alleen uit tekst. 

 Vandaag ga je jouw applicatie uitbreiden met zelfgemaakte AI-afbeeldingen. 

 Iedere student maakt hierdoor een unieke versie van de Game Collection. 

 Daarnaast leer je hoe je AI op een verantwoorde manier gebruikt tijdens het ontwikkelen van software. 

 

 

   

 

 

 📖 AI als hulpmiddel 

 Steeds meer softwareontwikkelaars gebruiken AI tijdens hun werk. 

 AI kan helpen bij: 

 

 💻 Code schrijven 

 🎨 Afbeeldingen ontwerpen 

 📝 Documentatie maken 

 🐞 Fouten opsporen 

 💡 Nieuwe ideeën bedenken 

 

 Een goede softwareontwikkelaar neemt AI niet blindelings over. 

 Je controleert altijd of de uitkomst correct, bruikbaar en verantwoord is. 

 

 💡 Waarom gebruiken we AI in deze les? 

 Je leert hoe je AI kunt inzetten als hulpmiddel. 

 Niet om het programmeerwerk over te nemen, maar om jouw applicatie aantrekkelijker te maken. 

 Iedere student maakt daardoor een eigen Game Collection met unieke afbeeldingen. 

 

 🛠️ Opdracht 1 – Kies een game 

 Kies één game uit jouw Game Collection. 

 Bijvoorbeeld: 

 

 Minecraft 

 Rocket League 

 Fortnite 

 The Legend of Zelda 

 EA Sports FC 26 

 

 Voor deze game ga je een eigen poster maken. 

 

 🛠️ Opdracht 2 – Schrijf een goede prompt 

 Een AI maakt alleen een goede afbeelding wanneer jij een duidelijke opdracht geeft. 

 Een goede prompt beschrijft onder andere: 

 

 de sfeer; 

 de kleuren; 

 de stijl; 

 het onderwerp; 

 het gewenste formaat. 

 

 Voorbeeldprompt: 

 

 Maak een kleurrijke digitale gameposter van een blokkerige sandboxwereld met bergen, bossen en een avonturier. Verticale illustratie. Moderne game-art. Hoge kwaliteit. Geen tekst of logo's. 

 

 Gebruik deze prompt als inspiratie en schrijf daarna jouw eigen versie. 

 

 💡 Prompt Engineering 

 Het schrijven van een goede AI-prompt noemen we Prompt Engineering . 

 Hoe duidelijker jouw opdracht is, hoe beter het resultaat meestal wordt. 

 Professionele softwareontwikkelaars besteden daarom veel aandacht aan het schrijven van goede prompts. 

 

 🛠️ Opdracht 3 – Genereer een afbeelding 

 Gebruik een AI-tool, bijvoorbeeld ChatGPT. 

 Genereer een poster voor jouw gekozen game. 

 Belangrijk: 

 

 Maak een eigen interpretatie. 

 Gebruik geen officiële gamecovers. 

 Gebruik geen bestaande logo's. 

 Gebruik geen bestaande personages. 

 

 Sla de afbeelding op als een .jpg -bestand. 

 Bijvoorbeeld: 

 minecraft.jpg

 

 

 🛠️ Opdracht 4 – Plaats de afbeelding 

 Maak (indien nodig) de onderstaande map. 

 public

└── images

 

 Plaats jouw afbeelding in deze map. 

 Controleer of het bestand de juiste naam heeft gekregen. 

 

 🛠️ Opdracht 5 – Koppel de afbeelding aan je JSON-bestand 

 Open: 

 src/data/games.json

 

 Voeg bij jouw game een nieuw veld toe. 

 {

 "id": 1,

 "title": "Minecraft",

 "platform": "PC",

 "genre": "Sandbox",

 "rating": 9.5,

 "year": 2011,

 "image": "minecraft.jpg"

}

 

 Controleer of de bestandsnaam exact overeenkomt met de afbeelding die je hebt opgeslagen in de map public/images . 

 

 🛠️ Opdracht 6 – Toon de afbeelding in React 

 Open: 

 src/App.jsx

 

 Geef de afbeelding door aan de component. 

 <GameCard

 key={game.id}

 title={game.title}

 platform={game.platform}

 genre={game.genre}

 rating={game.rating}

 year={game.year}

 image={game.image}

/>

 

 Open daarna: 

 src/components/GameCard.jsx

 

 Voeg boven de titel de afbeelding toe. 

 <img

 src={`/images/${props.image}`}

 alt={props.title}

 className="game-image"

/>

 

 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. 

 

 Welke AI-tool heb je gebruikt? 

 Welke prompt heb je geschreven? 

 Heb je de prompt aangepast? Waarom? 

 Waarom heb je juist deze afbeelding gekozen? 

 Welke ethische aandachtspunten heb je meegenomen? 

 

 

 🧠 Kennischeck 

 

 Waarom slaan we de bestandsnaam van een afbeelding op in games.json ? 

 Waarom plaatsen we afbeeldingen in de map public/images ? 

 Hoe geef je een afbeelding door aan een React-component? 

 Waarvoor gebruiken we de alt -eigenschap? 

 Wat is Prompt Engineering? 

 Noem twee ethische aandachtspunten bij het gebruik van AI-afbeeldingen. 

 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 

 

 Wat is volgens jou het grootste voordeel van React? 

 Waarom gebruiken we componenten? 

 Wanneer gebruik je Props? 

 Wanneer gebruik je State? 

 Waarvoor gebruiken we map() ? 

 Waarvoor gebruiken we filter() ? 

 Waarom slaan we gegevens op in een JSON-bestand? 

 Waarom gebruiken we GitHub tijdens softwareontwikkeling? 

 Hoe kan AI een softwareontwikkelaar ondersteunen? 

 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! 🚀