REACT | Basis

Les 1 - Introductie React 

 🎯 Leerdoelen 

 

 Je weet wat React is. 

 Je kunt Node.js installeren. 

 Je kunt een React-project starten. 

 Je begrijpt de projectstructuur. 

 

 💡 Uitleg 

 

 Front-end versus Back-end 

 Waarom React? 

 npm 

 package.json 

 src 

 public 

 App.jsx 

 

 🛠️ Opdracht 

 Maak een nieuwe React-app. 

 Pas App.jsx aan zodat deze laat zien: 

 Welkom bij mijn eerste React applicatie!

Naam:

Studentnummer:

Klas: 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 🧠 Reflectie 

 

 Waarom gebruiken we React? 

 Welke map bevat jouw code? 

 

 📤 Inleveren 

 Screenshot van draaiende applicatie. 

 

 Les 2 - JSX en Componenten 

 🎯 Leerdoelen 

 

 JSX begrijpen 

 Eerste component maken 

 Props gebruiken 

 

 💡 Uitleg 

 

 JSX 

 className 

 Componenten 

 Props 

 

 🛠️ Opdracht 

 Maak: 

 Header.jsx

Footer.jsx

GameCard.jsx 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 Gebruik vervolgens: 

 <GameCard

 title="Minecraft"

 platform="PC"

/> 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 🧠 Reflectie 

 Wat is het voordeel van componenten? 

 📤 Inleveren 

 Screenshot + code. 

 

 Les 3 - useState 

 🎯 Leerdoelen 

 

 useState gebruiken 

 State wijzigen 

 Events afhandelen 

 

 💡 Uitleg 

 

 useState 

 onClick 

 Rendering 

 

 🛠️ Opdracht 

 Maak: 

 ✔ Teller 

 Aantal games:

0

[ + ]

[ - ] 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 Daarna: 

 Favoriet aan/uit 

 ❤️ 

 🤍 

 🧠 Reflectie 

 Waarom gebruiken we state? 

 

 Les 4 - Lijsten met map() 

 🎯 Leerdoelen 

 

 Arrays tonen 

 map() 

 key 

 

 💡 Uitleg 

 Array → 

 [

{

title:"Minecraft"

}

] 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 → GameCards 

 🛠️ Opdracht 

 Toon vijf games. 

 Extra: 

 voeg afbeelding toe. 

 

 Les 5 - Formulieren 

 🎯 Leerdoelen 

 

 Input 

 onChange 

 Zoeken 

 

 🛠️ Opdracht 

 Maak een zoekveld. 

 Zoeken:

Minecraft 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 Alleen passende games blijven zichtbaar. 

 

 Les 6 - JSON laden 

 🎯 Leerdoelen 

 

 JSON begrijpen 

 fetch() 

 useEffect() 

 

 💡 Uitleg 

 games.json 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 in 

 public/ 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 Inladen met 

 fetch() 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 🛠️ Opdracht 

 Laad: 

 games.json 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 Toon alle games. 

 

 Les 7 - Details tonen 

 🎯 Leerdoelen 

 

 State combineren 

 Eén geselecteerde game tonen 

 

 🛠️ Opdracht 

 Klik op een game. 

 Rechts verschijnt 

 Naam

Platform

Genre

Beschrijving 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 Les 8 - Favorieten 

 🎯 Leerdoelen 

 

 Arrays aanpassen 

 State uitbreiden 

 

 🛠️ Opdracht 

 Maak 

 ⭐ Favoriet 

 Filter: 

 Alle

Favorieten 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 Les 9 - AI Challenge 

 🎯 Leerdoelen 

 AI gebruiken. 

 🛠️ Opdracht 

 Laat ChatGPT een React-component maken. 

 Bijvoorbeeld: 

 Rating sterren

of

Dark Mode

of

Sorteerfunctie 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 Verbeter de code zelf. 

 Lever ook je prompt in. 

 

 Les 10 - Eindopdracht 

 Maak jouw eigen Game Collection. 

 Verplicht: 

 ✅ Header 

 ✅ Footer 

 ✅ Componenten 

 ✅ JSON 

 ✅ useState 

 ✅ useEffect 

 ✅ Zoekfunctie 

 ✅ Favorieten 

 Keuze: 

 ⭐ Dark Mode 

 ⭐ Eigen styling 

 ⭐ React Icons 

 ⭐ Categorieën 

 ⭐ Eigen JSON 

 

 Bonuslessen 

 Les 11 

 React Router 

 /

Games

/game/3 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 Les 12 

 Externe API 

 Bijvoorbeeld: 

 https://dummyjson.com/products 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 of 

 RAWG Game API 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 Studenten leren echte API's gebruiken. 

 

 AI-opdracht in iedere les 

 Net als bij SQL. 

 Bijvoorbeeld: 

 🤖 AI-opdracht 

 Vraag ChatGPT: 

 

 Leg uit wat useState doet alsof je het uitlegt aan een eerstejaars mbo-student. 

 

 Controleer daarna zelf of de uitleg klopt.