REACT | Basis

Les 2 - JSX en Componenten

🎯 Leerdoelen

Na deze les:

• Je begrijpt wat JSX is.
• Je weet waarom React componenten gebruikt.
• Je kunt zelf een component maken.
• Je kunt gegevens doorgeven met props.

---

💡 Uitleg

Terugblik

In de vorige les heb je een React-project gemaakt en gestart.

Vandaag gaan we voor het eerst zelf React-code schrijven.

Je leert drie belangrijke onderdelen van React:

• JSX
• Componenten
• Props

Deze onderdelen gebruik je straks in bijna iedere React-applicatie.

---

Wat is JSX?

Wanneer je React-code ziet, lijkt deze vaak op HTML.

Bijvoorbeeld:

function App() {
  return (
    <h1>Welkom bij React!</h1>
  );
}

Toch is dit geen HTML.

Dit noemen we JSX.

JSX staat voor:

JavaScript XML

Je kunt JSX zien als een combinatie van JavaScript en HTML.

React zet deze code automatisch om naar gewone HTML die de browser begrijpt.

---

Waarom gebruikt React JSX?

Met alleen JavaScript zou je een pagina als volgt moeten maken:

const titel = document.createElement("h1");
titel.textContent = "Welkom bij React!";
document.body.appendChild(titel);

Dat werkt prima, maar bij grote websites wordt deze code al snel onoverzichtelijk.

Met JSX schrijf je dezelfde pagina veel eenvoudiger:

<h1>Welkom bij React!</h1>

Dat leest veel prettiger.

---

JSX lijkt op HTML

Veel HTML-tags werken precies hetzelfde.

Bijvoorbeeld:

<h1>Welkom</h1>

<p>Dit is een paragraaf.</p>

<ul>
    <li>React</li>
    <li>JavaScript</li>
</ul>

Je kunt dus bijna alle HTML gebruiken die je al kent.

---

Er zijn wel een paar verschillen

Verschil 1 – class wordt className

In HTML schrijf je:

<h1 class="title">

In React schrijf je:

<h1 className="title">

Waarom?

Omdat class een gereserveerd woord is in JavaScript.

Daarom gebruikt React className.

Dit is één van de meest gemaakte beginnersfouten.

---

Verschil 2 – JavaScript tussen accolades

In JSX kun je JavaScript gebruiken.

Dat doe je tussen:

{ }

Bijvoorbeeld:

function App() {

    const naam = "Lisa";

    return (
        <h1>Welkom {naam}</h1>
    );

}

De browser laat zien:

Welkom Lisa

---

Wat is een component?

Een React-app bestaat uit kleine onderdelen.

Deze onderdelen noemen we componenten.

Bijvoorbeeld een webshop.

Website

├── Header
├── Menu
├── Productlijst
├── Winkelwagen
└── Footer

Elk onderdeel heeft zijn eigen bestand.

Dat maakt een applicatie overzichtelijk.

---

Waarom componenten?

Stel dat je op iedere pagina hetzelfde menu gebruikt.

Zonder componenten moet je dezelfde code steeds opnieuw schrijven.

Met React maak je één Menu-component.

Daarna gebruik je deze overal.

<Menu />

Pas je het menu aan?

Dan verandert het automatisch op iedere pagina.

---

Je eerste component

Maak in de map src een nieuwe map.

src

components

Maak daarin een bestand:

Header.jsx

Plaats hierin de volgende code.

function Header() {

    return (
        <header>
            <h1>🎮 Game Collection</h1>
        </header>
    );

}

export default Header;

Deze component laat alleen een titel zien.

---

Een component gebruiken

Open nu App.jsx.

Importeer de component.

import Header from "./components/Header";

Gebruik de component vervolgens.

function App() {

    return (
        <>
            <Header />
        </>
    );

}

export default App;

De titel verschijnt nu in de browser.

---

Wat zijn props?

Een component is vaak herbruikbaar.

Daarom kunnen we gegevens meegeven.

Deze gegevens noemen we props.

Props kun je vergelijken met de parameters van een functie.

---

Zonder props

function Header() {

    return <h1>Game Collection</h1>;

}

Deze titel verandert nooit.

---

Met props

Pas Header.jsx aan.

function Header(props) {

    return (
        <h1>{props.title}</h1>
    );

}

export default Header;

Gebruik de component nu zo.

<Header title="🎮 Mijn Game Collection" />

Je kunt nu zelf bepalen welke titel wordt weergegeven.

---

Nog een voorbeeld

Je kunt meerdere props gebruiken.

function GameCard(props) {

    return (

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

    );

}

export default GameCard;

Gebruik de component.

<GameCard
    title="Minecraft"
    platform="PC"
/>

De browser toont:

Minecraft

Platform: PC

Zo kun je dezelfde component steeds opnieuw gebruiken.

---

🛠️ Opdracht

Maak een map:

src/components

Maak daarin twee componenten.

Header.jsx

Footer.jsx

Gebruik beide componenten in App.jsx.

---

Opdracht 2

Maak een component:

GameCard.jsx

De component moet twee props gebruiken:

• title
• platform

Gebruik de component drie keer.

Bijvoorbeeld:

<GameCard
    title="Minecraft"
    platform="PC"
/>

<GameCard
    title="Mario Kart"
    platform="Nintendo Switch"
/>

<GameCard
    title="EA FC 26"
    platform="PlayStation 5"
/>

---

🤖 AI-opdracht

Vraag ChatGPT:

Leg uit wat een React component is alsof je het uitlegt aan een mbo-student.

Lees het antwoord.

Schrijf daarna zelf in maximaal 75 woorden uit wat volgens jou een component is.

Gebruik niet letterlijk de tekst van AI.

---

🧠 Reflectie

Beantwoord de vragen.

1. Wat is JSX?
2. Waarom gebruikt React componenten?
3. Waarom schrijf je className in plaats van class?
4. Wat zijn props?
5. Wat is het voordeel van props ten opzichte van vaste tekst?

---

📤 Inleveren

Lever in:

• Een screenshot van jouw React-app.
• De bestanden:
  • Header.jsx
  • Footer.jsx
  • GameCard.jsx
  • App.jsx
• De antwoorden op de reflectievragen (PDF of TXT).

---

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.