Skip to main content

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

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

Back to top