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
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 LisaWat is een component?
Een React-app bestaat uit kleine onderdelen.
Deze onderdelen noemen we componenten.
Bijvoorbeeld een webshop.
Website
├── Header
├── Menu
├── Productlijst
├── Winkelwagen
└── FooterElk 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 />Dan verandert het automatisch op iedere pagina.
Je eerste component
Maak in de map src een nieuwe map.
src
componentsMaak daarin een bestand:
Header.jsxPlaats 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: PCZo kun je dezelfde component steeds opnieuw gebruiken.
🛠️ Opdracht
Maak een map:
src/componentsMaak daarin twee componenten.
Header.jsx
Footer.jsxGebruik beide componenten in App.jsx.
Opdracht 2
Maak een component:
GameCard.jsxDe 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.
- Wat is JSX?
- Waarom gebruikt React componenten?
- Waarom schrijf je
classNamein plaats vanclass? - Wat zijn props?
- Wat is het voordeel van props ten opzichte van vaste tekst?
📤 Inleveren
Lever in:
- Een screenshot van jouw React-app.
- De bestanden:
Header.jsxFooter.jsxGameCard.jsxApp.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:
MinecraftAlleen passende games blijven zichtbaar.
Les 6 - JSON laden
🎯 Leerdoelen
- JSON begrijpen
- fetch()
- useEffect()
💡 Uitleg
games.jsonin
public/Inladen met
fetch()🛠️ Opdracht
Laad:
games.jsonToon alle games.
Les 7 - Details tonen
🎯 Leerdoelen
- State combineren
- Eén geselecteerde game tonen
🛠️ Opdracht
Klik op een game.
Rechts verschijnt
Naam
Platform
Genre
BeschrijvingLes 8 - Favorieten
🎯 Leerdoelen
- Arrays aanpassen
- State uitbreiden
🛠️ Opdracht
Maak
⭐ Favoriet
Filter:
Alle
FavorietenLes 9 - AI Challenge
🎯 Leerdoelen
AI gebruiken.
🛠️ Opdracht
Laat ChatGPT een React-component maken.
Bijvoorbeeld:
Rating sterren
of
Dark Mode
of
SorteerfunctieVerbeter 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/3Les 12
Externe API
Bijvoorbeeld:
https://dummyjson.com/productsof
RAWG Game APIStudenten 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.