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.