REACT | Basis

App

├── Header

├── SearchBar

├── GameList

│ ├── GameCard

│ ├── GameCard

│ ├── GameCard

│ └── GameCard

└── Footer

laravel new game-collection

php artisan breeze:install react

npm install

php artisan serve

npm run dev

http://127.0.0.1:8000

resources/js/Pages/Welcome.jsx

<h1>🎮 Game Collection</h1>

<h2>Welkom bij mijn eerste React-applicatie!</h2>

<p>Naam: Jouw naam</p>

<p>Studentnummer: 123456</p>

<p>Klas: SD4A</p>

Les 1 - React ontwikkelomgeving gereed

Les 2 -– JSXJSX: enBouw Componentenje eerste Game Collection pagina

🎯 Leerdoelen

Na deze les:les kun je:

• Je begrijptuitleggen wat JSX is.is;
• JeHTML weetschrijven waaromin React componenten gebruikt.React;
• JeJSX kunt zelf een component maken.aanpassen;
• JeCSS kuntclasses gegevens doorgevengebruiken met props.className;
• een eenvoudige React-pagina bouwen;
• wijzigingen automatisch bekijken in de browser.

💡📖 Uitleg

Terugblik

In de vorige les hebga je eenvandaag React-project gemaakt en gestart.

Vandaag gaanmaak weje voorde heteerste eerstversie zelfvan React-codejouw schrijven.Game Collection.

JeDe pagina bevat straks:

🎮 Game Collection

Welkom...

Mijn favoriete games

Minecraft

FIFA

Mario Kart

Elden Ring

Dat lijkt nog eenvoudig, maar je leert drievandaag belangrijkede onderdelenbelangrijkste basis van React:React.

• JSX
• Componenten
• Props

Deze[Screenshot onderdeleneindresultaat]

gebruik je straks in bijna iedere React-applicatie.

📖 Wat is JSX?

WanneerNormaal schrijf je React-codeHTML ziet, lijkt deze vaak op HTML.

Bijvoorbeeld:zo:

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

TochReact is dit geen HTML.

Dit noemen wegebruikt JSX.

JSX staatlijkt voor:heel erg op HTML.

JavaScriptToch XMLis het geen HTML.

Je kunt JSX zienis als een combinatie vaneigenlijk JavaScript enwaarin HTML.HTML geschreven mag worden.

React zet deze codeJSX later automatisch om naar gewone HTML die de browser begrijpt.JavaScript-code.

💡 Waarom gebruikt React JSX?

Met alleenJSX JavaScript zoukun je veel makkelijker een pagina alsopbouwen.

Vergelijk moeteneens.

Gewone JavaScript:

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:JSX:

<h1>WelkomGame bij React!Collection</h1>

DatWelke leest veelprettiger?

Vrijwel iedere React-programmeur kiest daarom voor JSX.

📖 Welcome.jsx

In de vorige les heb je gewerkt in:

resources/js/Pages/Welcome.jsx

Open dit bestand opnieuw.

Je ziet iets dat lijkt op HTML.

Dat is JSX.

💡 Let op

JSX lijkt op HTML.

Maar er zijn kleine verschillen.

HTML

class

React

className

HTML

for

React

htmlFor

Hier gaan we later verder op in.

🛠️ Opdracht 1

VeelVerander HTML-tagsde werkenpagina precieszodat hetzelfde.

Bijvoorbeeld:er ongeveer zo uitziet.

<h1>Welkom🎮 Game Collection</h1>

<ph2>DitMijn isfavoriete een paragraaf.games</ph2>

<ul>

<li>ReactMinecraft</li>

<li>JavaScriptFIFA</li>

<li>Mario Kart</li>

<li>Elden Ring</li>

</ul>

JeControleer kuntof dusde bijnabrowser alleautomatisch HTMLwordt gebruikenbijgewerkt.

[Screenshot browser]

📖 Waarom verandert de browser automatisch?

Misschien is het je al kent.opgevallen.

Je hoeft de browser niet opnieuw te laden.

Na het opslaan zie je direct het resultaat.

Dit noemen we Hot Reloading.

Dat maakt React erg prettig om mee te werken.

Er🛠️ zijnOpdracht wel2

Maak onder de lijst een paar verschillen

Verschil 1 – class wordt className

In HTML schrijf je:tekst.

<Aantal games:

4

Het aantal hoeft nog niet automatisch te worden berekend.

Dat leren we later.

🛠️ Opdracht 3

Maak een nette opmaak.

Gebruik hiervoor:

• h1
class=
• h2
• ul
• li
• p

Voeg daarna een eenvoudige CSS-class toe.

className="title">

InMaak Reactvervolgens schrijfzelf je:de CSS.

[Screenshot resultaat]

💾 GitHub

Maak een commit.

<h1Les className="title">2 - Eerste JSX pagina

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

ElkSynchroniseer onderdeeldaarna heeftmet zijnGitHub.

🤖 AI-opdracht

Vraag ChatGPT:

Waarom gebruikt React JSX in plaats van gewone HTML?

Vergelijk de uitleg met deze les.

Noem vervolgens twee voordelen van JSX.

🧠 Kennischeck

1. Wat is JSX?
2. Is JSX hetzelfde als HTML?
3. Waarom gebruikt React JSX?
4. Waarom gebruiken we className?
5. Wat doet Hot Reloading?

📤 Inleveren

• Screenshot van de browser.
• Screenshot van Welcome.jsx.
• Screenshot van GitHub commit.
• PDF met de antwoorden.

Les 3 – Componenten: Bouw je eerste React-componenten

🎯 Leerdoelen

Na deze les kun je:

• uitleggen wat een React-component is;
• componenten maken;
• componenten importeren;
• componenten gebruiken in een pagina;
• de React-projectstructuur begrijpen;
• een pagina opbouwen uit meerdere componenten.

📖 Wat ga je vandaag maken?

Tot nu toe stond alle code in één bestand.

Dat maaktwerkt eenprima applicatievoor overzichtelijk.kleine projecten.

Maar

Waaromstel componenten?

Steleens voor dat jouw Game Collection straks bestaat uit:

• Header
• Footer
• Zoekbalk
• Favorieten
• GameCards
• Detailpagina
• Navigatie

Alles in één bestand zetten?

Dat wordt al snel honderden regels code.

Daarom gebruiken React-programmeurs componenten.

Vandaag ga je op iederejouw pagina hetzelfdeopdelen menuin gebruikt.losse bouwstenen.

ZonderAan componentenhet moeteinde je dezelfde code steeds opnieuw schrijven.

Met React maak je één Menu-component.

Daarna gebruik jevan deze overal.les ziet jouw project er ongeveer zo uit.

<Menuresources
/>└── js
    ├── Components
    │      Header.jsx
    │      Footer.jsx
    │      GameCard.jsx
    │
    └── Pages
           GameCollection.jsx

[Afbeelding projectstructuur]

📖 Wat is een component?

Een component is een herbruikbaar onderdeel van een website.

Je kunt het vergelijken met LEGO.

Van losse LEGO-blokken bouw je een compleet huis.

React werkt precies hetzelfde.

Onze website bestaat straks uit kleine onderdelen.

Bijvoorbeeld:

Game Collection

│

├── Header

├── Zoekbalk

├── GameList

│      ├── GameCard

│      ├── GameCard

│      ├── GameCard

│      └── GameCard

└── Footer

PasIedere jeGameCard hetwordt menuslechts aan?één keer gemaakt.

DanReact verandertgebruikt hetdeze automatischdaarna opzo vaak als nodig.

[Afbeelding Component Tree]

💡 Waarom gebruiken we componenten?

Componenten hebben veel voordelen.

✅ Je schrijft minder code.

✅ Je kunt onderdelen hergebruiken.

✅ Je project blijft overzichtelijk.

✅ Je kunt eenvoudiger samenwerken.

Daarom bestaat vrijwel iedere pagina.professionele React-applicatie uit componenten.

Je📖 eersteEen componentprofessionele projectstructuur

MaakTot innu detoe mapwerkte srcje een nieuwe map.in:

src

componentsWelcome.jsx

Vanaf vandaag gaan we werken zoals professionele React-projecten zijn opgebouwd.

Maak daarinin eende bestand:map:

resources/js

de volgende mappen aan.

Components

Pages

[Screenshot mappenstructuur]

🛠️ Opdracht 1 – Maak de eerste component

Maak een nieuw bestand.

resources/js/Components/Header.jsx

Plaats hierin de volgende code.

export default function Header() {
    return (
        <header>
            <h1>🎮 Game Collection</h1>
        </header>
    );
}

export default Header;

DezeSla componenthet laatbestand alleen een titel zien.op.

Een🛠️ componentOpdracht gebruiken2 – Footer maken

OpenMaak nu App.jsx.

Importeer de component.vervolgens:

import Header from "./components/Header";Footer.jsx

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"
/footer>

            <GameCardp>ROC title="Mariovan Kart"
    platform="Nintendo Switch"
Amsterdam</p>

        <GameCard/footer>
    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:

✔een Tellerderde component.

Aantal games:
0

[ + ]

[ - ]GameCard.jsx

export default function GameCard() {
    return (
        <div>

            Minecraft

        </div>
    );
}

Nog even geduld.

In de volgende lessen gaan we deze component veel slimmer maken.

🛠️ Opdracht 4 – Nieuwe pagina maken

Maak nu:

resources/js/Pages/GameCollection.jsx

Daarna:

Favoriethierin aan/uit

❤️

🤍

🧠 Reflectie

Waarom gebruiken we state?

Les 4 - Lijsten met map()

🎯 Leerdoelen

• Arrays tonen
• map()
• key

💡 Uitleg

Array →code.

[import Header from "../Components/Header";
import Footer from "../Components/Footer";
import GameCard from "../Components/GameCard";

export default function GameCollection() {

    title:"Minecraft"return (

        <>

            <Header />

            <GameCard />

            <GameCard />

            <GameCard />

            <Footer />

        </>

    );

}
]

💡 Wat gebeurt hier?

Bovenaan zie je drie imports.

import Header from "../Components/Header";

Hiermee vertel je React:

Gebruik de component Header uit de map Components.

Daarna kun je de component gebruiken alsof het een HTML-tag is.

<Header />

Dat is één van de sterke punten van React.

🛠️ Opdracht 5 – GameCollection tonen

Open nu:

resources/js/Pages/Welcome.jsx

→Vervang GameCards

🛠️inhoud Opdracht

Toon<main> vijf(of games.

Extra:

voegcontent) afbeeldingdoor toe.

Les 5 - Formulieren

🎯 Leerdoelen

• Input
• onChange
• Zoeken

🛠️ Opdracht

Maak een zoekveld.component:

Zoeken:<GameCollection Minecraft/>

Voeg bovenaan ook de import toe:

import GameCollection from "./GameCollection";

Controleer of de pagina er ongeveer zo uitziet:

🎮 Game Collection

Minecraft

Minecraft

Minecraft

ROC van Amsterdam

[Screenshot browser]

💡 Wist je dat?

Sommige React-applicaties bestaan uit meer dan 500 componenten.

Juist daarom is een goede mappenstructuur zo belangrijk.

💾 GitHub

Maak een commit.

Les 3 - Eerste componenten gemaakt

AlleenSynchroniseer passendedaarna gamesmet blijven zichtbaar.GitHub.

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:

LegWaarom uitzijn watcomponenten useStateéén doetvan alsofde jebelangrijkste hetonderdelen uitlegtvan aan een eerstejaars mbo-student.React?

ControleerVraag daarnadaarna:

Noem drie voordelen van componenten ten opzichte van één groot bestand.

Vergelijk de antwoorden met de theorie uit deze les.

🧠 Kennischeck

1. Wat is een component?
2. Waarom gebruiken we componenten?
3. Wat doet import?
4. Waarom schrijven we <Header />?
5. Waarom maken we een map Components?
6. Waarom maken we een map Pages?
7. Waarom is deze structuur beter dan alles in één bestand?

📤 Inleveren

Lever de volgende onderdelen in:

• 📷 Screenshot van de browser.
• 📷 Screenshot van de map Components.
• 📷 Screenshot van GameCollection.jsx.
• 📷 Screenshot van de GitHub-commit.
• 📄 PDF of TXT met de uitlegantwoorden klopt.op de kennischeck.
• 📄 De uitwerking van de AI-opdracht.