React 1 – Basis

Les 1 – Introductie React & Ontwikkelomgeving

🎯 Leerdoelen

Na deze les kun je:

🎮 Wat ga je bouwen?

Tijdens deze module werk je aan één project:

🎮 Game Collection

Je bouwt stap voor stap een moderne webapplicatie waarin gebruikers games kunnen bekijken, zoeken en beheren.

Aan het einde van deze module kun je onder andere:

afbeelding.png

📖 Waarom React?

Stel je voor dat je de Game Collection maakt met alleen HTML.

Voor iedere game zou je opnieuw moeten schrijven:

Heb je 200 games? Dan schrijf je dezelfde code 200 keer.

Dat is natuurlijk niet handig. React lost dit probleem op.

React maakt gebruik van componenten.

Een component maak je één keer. Daarna gebruik je hem zo vaak als je wilt.

💡 Wat is React?

React is een JavaScript-library waarmee je moderne gebruikersinterfaces bouwt.

React is ontwikkeld door Meta (Facebook).

React wordt gebruikt door onder andere:

React is tegenwoordig één van de meest gebruikte technieken voor Front-end ontwikkeling.

🛠️ Benodigdheden

Voor deze module heb je nodig:

Controleer of alles correct is geïnstalleerd.

Open een terminal en voer uit:

node -v 
npm -v 
git --version

Wanneer alle versies zichtbaar zijn, ben je klaar om te beginnen.

📖 Componenten

Een React-applicatie bestaat uit kleine bouwstenen.

Deze noemen we componenten.

Onze Game Collection zou er bijvoorbeeld zo uit kunnen zien.

App 
 
├── Header 
 
├── SearchBar 
 
├── GameList 
 
│ ├── GameCard 
 
│ ├── GameCard 
 
│ ├── GameCard 
 
│ └── GameCard 
 
└── Footer

Iedere GameCard wordt slechts één keer gemaakt.
React hergebruikt deze component daarna automatisch. Dat scheelt enorm veel programmeerwerk.

afbeelding.png

📖 Front-end versus Back-end

Een webapplicatie bestaat meestal uit twee delen.

Front-end Back-end
Alles wat de gebruiker ziet Verwerking achter de schermen
HTML Database
CSS API
JavaScript Server
React Laravel (behandelen we in deel 2)

Tijdens deze module richten we ons uitsluitend op de Front-end.

In de vervolgreeks koppelen we React aan een Back-end.

afbeelding.png

🛠️ Opdracht 1 – React installeren

Tijdens deze module gebruiken we Vite.

Vite is de officiële manier om een nieuw React-project te maken.

Stap 1

Maak een nieuw React-project.

npm create vite@latest game-collection -- --template react
Which linter to use? ✅ ESLint

💡 Waarom ESLint?

ESLint is de meest gebruikte codecontrole voor React-projecten. Het helpt je om fouten sneller te ontdekken en zorgt ervoor dat je code volgens de gangbare React-standaarden wordt geschreven.

💡 Waarom gebruiken we Vite?

Om met React te kunnen werken hebben we een ontwikkelomgeving nodig.
Tegenwoordig wordt bijna altijd Vite gebruikt.

Vite is: Sneller, moderner, eenvoudiger, de standaard binnen nieuwe React-projecten.

Daarom gebruiken wij Vite tijdens deze module.

React gebruikt een techniek die Virtual DOM heet. Hierdoor wordt niet de hele pagina opnieuw opgebouwd.

Alleen het onderdeel dat verandert wordt opnieuw weergegeven. Daardoor voelt een React-applicatie snel en soepel aan.

Stap 2

Open het project in Visual Studio Code. Zorg ervoor dat je de juiste directory hebt geopend.

Ga naar de projectmap.

cd game-collection

Stap 3

Installeer alle packages.

npm install

Stap 4

Start de ontwikkelomgeving in dien je het niet is gestart.

Terminal in VScode

npm run dev

Je ziet nu ongeveer:

> npx 
> create-vite game-collection --template react 
 
│ 
◇ Which linter to use? 
│ ESLint 
│ 
◇ Install with npm and start now? 
│ Yes 
│ 
◇ Scaffolding project in C:\REACT-1\game-collection... 
│ 
◇ Installing dependencies with npm... 
 
added 135 packages, and audited 136 packages in 8s 
 
31 packages are looking for funding 
 run `npm fund` for details 
 
found 0 vulnerabilities 
│ 
◇ Starting dev server... 
 
> game-collection@0.0.0 dev 
> vite

 VITE v8.1.4 ready in 428 ms 
 
 ➜ Local: http://localhost:5173/ 
 ➜ Network: use --host to expose 
 ➜ press h + enter to show help

Als alles goed is zie je via de link http://localhost:5173/  de standaard React pagina

afbeelding.png

🛠️ Opdracht 2 – Verken de projectstructuur

React-projecten bestaan uit verschillende mappen.

Zoek onderstaande bestanden en mappen op in je verkenner.

| Bestand | Functie | 
| -------------- | ------------------------------------------ | 
| `src` | Hier staat bijna alle React-code | 
| `App.jsx` | De hoofdcomponent van de applicatie | 
| `main.jsx` | Startpunt van de React-app | 
| `public` | Afbeeldingen en andere statische bestanden | 
| `package.json` | Overzicht van alle packages |

In deze module ga je vooral hieraan werken.

🛠️ Opdracht 3 – Pas de eerste React-pagina aan

Open:

src/App.jsx

Vervang de bestaande inhoud door:
Vul je eigen naam, studentennummer en klas in.

import "./App.css";

function App() { 
 return ( 
 <> 
 <h1>🎮 Game Collection</h1> 
 
 <h2>Welkom bij mijn eerste React-applicatie!</h2> 
 
 <p>Naam: Jouw naam</p> 
 
 <p>Studentnummer: Jouw studentnummer</p> 
 
 <p>Klas: Jouw klas</p> 
 </> 
 ); 
} 
 
export default App;

Sla het bestand op.
De browser wordt automatisch bijgewerkt.

afbeelding.png

💡 Wist je dat?

React past de browser automatisch aan zodra je een bestand opslaat.

Dit heet Hot Reloading.

Daardoor zie je direct het resultaat van je wijzigingen, zonder de pagina handmatig te verversen.

💾 GitHub

Nu de applicatie werkt is het tijd om de eerste werkende versie op te slaan.

Open Source Control in Visual Studio Code.

Maak een commit met het bericht:

Les 1 - React omgeving gereed

Synchroniseer daarna met GitHub.
Vanaf nu maak je na iedere werkende opdracht een nieuwe commit.

🤖 AI-opdracht

Gebruik ChatGPT.

Prompt:

Leg uit wat React is alsof je het uitlegt aan een eerstejaars mbo Software Developer.

Vergelijk de uitleg met deze les.

Beschrijf in maximaal 100 woorden welke uitleg jij duidelijker vond.

🧠 Kennischeck

  1. Wat is React?
  2. Waarom gebruiken veel bedrijven React?
  3. Wat is het verschil tussen Front-end en Back-end?
  4. Waarom gebruiken we Vite?
  5. Wat is de functie van App.jsx?
  6. Wat is de functie van main.jsx?
  7. Waarom gebruiken we GitHub tijdens deze module?

📤 Inleveren

Lever de volgende onderdelen in via Canvas.

Les 2 – JSX en de eerste eigen opmaak

🎯 Leerdoelen

Na deze les kun je:

📖 Wat ga je vandaag maken?

In de vorige les heb je jouw eerste React-applicatie gemaakt met Vite.

Vandaag ga je de applicatie verder uitbreiden.

Je leert wat JSX is en vervangt de standaard Vite-opmaak door een eigen eenvoudige vormgeving.

Vanaf deze les werken alle studenten met dezelfde basis voor de rest van de module.

📖 Wat is JSX?

React gebruikt JSX.

JSX lijkt heel erg op HTML, maar het is geen HTML.

Eigenlijk is JSX gewone JavaScript waarin je HTML mag schrijven.

React zet deze code tijdens het uitvoeren automatisch om naar JavaScript.

Bijvoorbeeld:

<h1>🎮 Game Collection</h1>

Dit ziet eruit als HTML, maar is JSX.

💡 JSX lijkt op HTML, maar...

Er zijn een paar kleine verschillen.

HTML JSX
class className
for htmlFor
onclick onClick

Tijdens deze module gebruiken we vooral:

className

🛠️ Opdracht 1 – De standaard Vite-opmaak vervangen

Vite maakt automatisch een voorbeeldopmaak.

Deze is handig voor de standaard React-pagina, maar voor onze eigen applicatie willen we een eenvoudige en overzichtelijke basis.

Open:

src/index.css

Vervang de volledige inhoud door:

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, Helvetica, sans-serif;
    background-color: #f5f5f5;
}

Sla het bestand op.

Open daarna:

src/App.css

Vervang ook hier de volledige inhoud door:

.container {
    max-width: 800px;
    margin: 40px auto;
    background: white;
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0,0,0,.1);
}

.title {
    color: #6e25eb;
}

.games {
    margin-top: 30px;
}

ul {
    padding-left: 20px;
}

li {
    margin-bottom: 8px;
}

Sla ook dit bestand op.

💡 Waarom doen we dit?

Zo werken alle studenten met dezelfde eenvoudige CSS. Dat maakt de voorbeelden uit deze cursus overzichtelijk en voorkomt verwarring met de standaard Vite-opmaak.

🛠️ Opdracht 2 – Gebruik de CSS in React

Open:

src/App.jsx

Controleer of bovenaan het bestand staat:

import "./App.css";

Pas daarna de JSX aan.

Plaats de bestaande inhoud van je pagina binnen onderstaande structuur.

<div className="container">

    <h1 className="title">
        🎮 Game Collection
    </h1>

    <div className="games">

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

        <p>Naam: Jouw naam</p>

        <p>Studentnummer: Jouw studentnummer</p>

        <p>Klas: Jouw klas</p>

    </div>

</div>

Sla het bestand op.

Controleer of de pagina nu een witte achtergrond heeft en de titel paars is geworden.

afbeelding.png

💡 Experimenteer met CSS

CSS bepaalt hoe jouw website eruitziet.

Probeer de onderstaande eigenschappen eens aan te passen.

Sla iedere wijziging op.

Door Hot Reloading zie je direct het resultaat in de browser.

💡 Wist je dat?

React vernieuwt de browser automatisch zodra je een bestand opslaat.

Dit noemen we Hot Reloading.

Hierdoor kun je snel experimenteren met je code zonder steeds de pagina opnieuw te laden.

💾 GitHub

Maak een commit met het bericht:

Les 2 - Eigen CSS toegepast

Synchroniseer daarna met GitHub.

🤖 AI-opdracht

Gebruik ChatGPT.

Prompt:

Leg uit wat JSX is en waarom React hiervoor kiest in plaats van gewone HTML.

Beschrijf daarna in maximaal 100 woorden wat volgens jou het belangrijkste voordeel van JSX is.

🧠 Kennischeck

  1. Wat is JSX?
  2. Waarom is JSX geen gewone HTML?
  3. Waarom gebruiken we className in plaats van class?
  4. Waarom vervangen we de standaard Vite CSS?
  5. Wat is de functie van App.css?
  6. Wat is de functie van index.css?
  7. Wat is Hot Reloading?

📤 Inleveren

Lever de volgende onderdelen in via Canvas.

Les 3 – Componenten: Bouwstenen van React

🎯 Leerdoelen

Na deze les kun je:

🎮 Wat ga je vandaag maken?

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

Dat werkt prima voor kleine projecten.

Maar stel je eens voor dat jouw Game Collection straks bestaat uit:

Alles in één bestand zetten?

Dat wordt al snel honderden regels code.

Daarom gebruiken React-programmeurs componenten.

Vandaag ga je jouw pagina opdelen in losse bouwstenen.

Aan het einde van deze les ziet jouw project er ongeveer zo uit.

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

Iedere GameCard wordt slechts één keer gemaakt.

React gebruikt deze daarna zo vaak als nodig.

[Afbeelding Component Tree]

💡 Waarom gebruiken we componenten?

Stel dat jouw website uit twintig pagina's bestaat.

Iedere pagina heeft dezelfde header.

Zonder componenten moet je die header twintig keer aanpassen.

Met React maak je de header één keer.

Daarna gebruik je dezelfde component overal opnieuw.

Dat bespaart veel tijd en zorgt ervoor dat je code overzichtelijk blijft.

🛠️ Opdracht 1 – Maak een map voor componenten

Open de map:

src

Maak hierin een nieuwe map.

components

De projectstructuur ziet er daarna ongeveer zo uit.

src

├── components

├── App.css

├── App.jsx

├── index.css

└── main.jsx

In deze map plaatsen we straks al onze React-componenten.

afbeelding.png

🛠️ Opdracht 2 – Maak de eerste component

Maak in de map components een nieuw bestand.

Header.jsx

Voeg onderstaande code toe.

function Header() {

    return (

        <h1>🎮 Game Collection</h1>

    );

}

export default Header;

Sla het bestand op.

Je hebt nu jouw eerste React-component gemaakt.

📖 Wat betekent export default?

Een component staat in een apart bestand.

Om deze component in een ander bestand te kunnen gebruiken, moet je hem exporteren.

Dat doe je met:

export default Header;

Hierdoor kan App.jsx deze component straks importeren en gebruiken.

🛠️ Opdracht 3 – Gebruik de Header-component

Open:

src/App.jsx

Importeer de nieuwe component bovenaan het bestand.

import "./App.css";
import Header from "./components/Header";

Vervang daarna de bestaande titel door de nieuwe component.

<Header />

Je App.jsx ziet er nu ongeveer zo uit.

import "./App.css";
import Header from "./components/Header";

function App() {

    return (

        <div className="container">

            <Header />

            <div className="games">

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

                <p>Naam: Jouw naam</p>

                <p>Studentnummer: Jouw studentnummer</p>

                <p>Klas: Jouw klas</p>

            </div>

        </div>

    );

}

export default App;

Sla het bestand op.

De browser ziet er nog precies hetzelfde uit.

Het verschil is dat de titel nu uit een apart bestand wordt geladen.

📖 Wat betekent import?

Met import haal je een component uit een ander bestand.

React weet hierdoor waar de component staat.

Daarna kun je deze gebruiken alsof het een HTML-element is.

Bijvoorbeeld:

<Header />

React voert vervolgens automatisch de code uit die in Header.jsx staat.

🛠️ Opdracht 4 – Maak een Footer-component

Maak in de map components een nieuw bestand.

Footer.jsx

Voeg onderstaande code toe.

function Footer() {

    return (

        <footer>

            © 2026 Game Collection

        </footer>

    );

}

export default Footer;

Open daarna opnieuw:

src/App.jsx

Importeer de Footer-component.

Voeg de component onderaan de pagina toe.

<Footer />

Controleer of de footer zichtbaar is.

afbeelding.png

 

💡 Wist je dat?

Grote React-projecten bestaan vaak uit honderden componenten.

Iedere component heeft één duidelijke taak.

Daardoor blijft de code overzichtelijk en kunnen meerdere programmeurs tegelijk aan dezelfde applicatie werken.

💾 GitHub

Maak een commit met het bericht:

Les 3 - Eerste componenten gemaakt

Synchroniseer daarna met GitHub.

🤖 AI-opdracht

Gebruik ChatGPT.

Prompt:

Leg uit wat een React-component is alsof je het uitlegt aan een eerstejaars mbo Software Developer.

Beschrijf daarna in maximaal 100 woorden waarom componenten belangrijk zijn.

🧠 Kennischeck

  1. Wat is een component?
  2. Waarom gebruiken we componenten?
  3. Waarom maken we een map components?
  4. Wat doet export default?
  5. Wat doet import?
  6. Waarom gebruiken we <Header /> in plaats van een gewone <h1>?
  7. Wat is het voordeel van herbruikbare componenten?

📤 Inleveren

Lever de volgende onderdelen in via Canvas.

Les 4 – Props: Gegevens doorgeven aan componenten

🎯 Leerdoelen

Na deze les kun je:

🎮 Wat ga je vandaag maken?

In de vorige les heb je geleerd hoe je componenten maakt.

Maar iedere component toont nu steeds dezelfde informatie.

Dat is natuurlijk niet handig.

Een Game Collection bestaat uit verschillende games.

Iedere game heeft bijvoorbeeld een:

Vandaag leer je hoe je gegevens kunt doorgeven aan een component.

Dit doen we met Props.

Aan het einde van deze les ziet jouw applicatie er ongeveer zo uit.

afbeelding.png

📖 Wat zijn Props?

Props is een afkorting van Properties.

Met Props geef je gegevens door aan een component.

Hierdoor kun je dezelfde component meerdere keren gebruiken met verschillende gegevens.

Bijvoorbeeld:

<Header title="🎮 Game Collection" />

De waarde "🎮 Game Collection" wordt nu doorgegeven aan de component.

💡 Waarom gebruiken we Props?

Stel dat je honderd games wilt tonen.

Zonder Props moet je honderd verschillende componenten maken.

Met Props maak je slechts één component.

Daarna geef je telkens andere gegevens door.

Dat bespaart veel tijd en zorgt ervoor dat jouw code overzichtelijk blijft.

🛠️ Opdracht 1 – Header uitbreiden met Props

Open:

src/components/Header.jsx

Vervang de bestaande code door:

function Header(props) {

    return (

        <h1>{props.title}</h1>

    );

}

export default Header;

Sla het bestand op.

🛠️ Opdracht 2 – Geef gegevens door

Open:

src/App.jsx

Pas de Header-component aan.

<Header title="🎮 Game Collection" />

Sla het bestand op.

De pagina ziet er hetzelfde uit.

Toch is er iets veranderd.

De titel staat niet langer vast in Header.jsx, maar wordt nu vanuit App.jsx doorgegeven.

📖 Hoe werken Props?

Wanneer React de onderstaande component tegenkomt:

<Header title="🎮 Game Collection" />

wordt de waarde automatisch opgeslagen in het object props.

Je kunt deze vervolgens gebruiken met:

props.title

Hierdoor verschijnt de titel op de juiste plaats in de browser.

🛠️ Opdracht 3 – Maak de eerste GameCard

Maak in de map components een nieuw bestand.

GameCard.jsx

Voeg onderstaande code toe.

function GameCard(props) {

    return (

        <div>

            <h2>{props.title}</h2>

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

        </div>

    );

}

export default GameCard;

Sla het bestand op.

🛠️ Opdracht 4 – Gebruik de GameCard

Open:

src/App.jsx

Importeer de nieuwe component.

import GameCard from "./components/GameCard";

Voeg onder de welkomsttekst de onderstaande componenten toe.

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

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

<GameCard
    title="Rocket League"
    platform="PlayStation 5"
/>

Sla het bestand op.

Controleer of de drie GameCards zichtbaar zijn.

🛠️ Opdracht 5 – Geef de Game Collection een professionele uitstraling

De Game Collection werkt nu goed, maar ziet er nog eenvoudig uit.

Met een paar kleine CSS-aanpassingen maken we de applicatie overzichtelijker en professioneler.

Open:

src/App.css

Vervang de bestaande inhoud door:

body {
    background-color: #f5f5f5;
    font-family: Arial, Helvetica, sans-serif;
}

.container {
    max-width: 900px;
    margin: 40px auto;
    background: white;
    padding: 35px;
    border-radius: 12px;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.1);
}

.app-title {
    color: #6e25eb;
    border-bottom: 3px solid #6e25eb;
    padding-bottom: 12px;
    margin-bottom: 30px;
}

.game-list {
    margin-top: 30px;
}

.game-card {
    background-color: #fafafa;
    border: 1px solid #dddddd;
    border-radius: 10px;
    padding: 15px;
    margin-bottom: 15px;
    transition: 0.2s ease;
}

.game-card:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,.08);
}

.game-card h2 {
    margin-bottom: 8px;
    color: #333;
}

.game-card p {
    color: #666;
}

footer {
    margin-top: 35px;
    padding-top: 20px;
    border-top: 1px solid #dddddd;
    color: #777;
    font-size: 14px;
}

Open daarna:

src/components/Header.jsx

Pas de component aan.

function Header(props) {

    return (

        <h1 className="app-title">

            {props.title}

        </h1>

    );

}

export default Header;

Open vervolgens:

src/App.jsx

Wijzig de CSS-klasse van de lijst.

<div className="game-list">

Sla alle bestanden op.

De Game Collection heeft nu een moderne en overzichtelijke uitstraling.

 

💡 Waarom gebruiken we duidelijke CSS-klassen?

In grotere React-projecten bestaan vaak tientallen componenten.

Door duidelijke namen te gebruiken, zoals app-title, game-list en game-card, blijft de code overzichtelijk.

Dit maakt het eenvoudiger om je project later uit te breiden.

🛠️ Opdracht 6 – Gebruik de nieuwe CSS-klassen

Nu de nieuwe CSS klaar is, gaan we deze gebruiken in de verschillende componenten.

Open:

src/components/Header.jsx

Pas de component aan.

function Header(props) {

    return (

        <h1 className="app-title">

            {props.title}

        </h1>

    );

}

export default Header;

Open daarna:

src/components/GameCard.jsx

Controleer of de component de juiste CSS-klasse gebruikt.

function GameCard(props) {

    return (

        <div className="game-card">

            <h2>{props.title}</h2>

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

        </div>

    );

}

export default GameCard;

Open vervolgens:

src/App.jsx

Pas de CSS-klasse van de lijst aan.

<div className="game-list">

Sla alle bestanden op.

Controleer of de Game Collection er nu overzichtelijker uitziet.

afbeelding.png

💡 Waarom is dit handig?

Je hebt slechts één GameCard gemaakt.

Toch kun je deze component meerdere keren gebruiken.

Iedere keer geef je andere gegevens mee via Props.

Later in deze module gaan we tientallen GameCards automatisch maken vanuit een lijst met gegevens.

💡 Wist je dat?

Vrijwel iedere React-applicatie maakt gebruik van Props.

Props zorgen ervoor dat componenten herbruikbaar zijn.

Daardoor hoef je dezelfde code niet steeds opnieuw te schrijven.

💾 GitHub

Maak een commit met het bericht:

Les 4 - Props toegepast

Synchroniseer daarna met GitHub.

🤖 AI-opdracht

Gebruik ChatGPT.

Prompt:

Leg uit wat Props zijn in React alsof je het uitlegt aan een eerstejaars mbo Software Developer.

Beschrijf daarna in maximaal 100 woorden waarom Props belangrijk zijn.

🧠 Kennischeck

  1. Waar staat Props voor?
  2. Waarom gebruiken we Props?
  3. Hoe geef je gegevens door aan een component?
  4. Hoe lees je Props uit binnen een component?
  5. Waarom is een GameCard met Props beter dan drie losse GameCards?
  6. Wat gebeurt er als je een andere titel doorgeeft?
  7. Wat is het voordeel van herbruikbare componenten?

📤 Inleveren

Lever de volgende onderdelen in via Canvas.

Revision #22
Created 2026-07-10 09:02:27 UTC by yildiz
Updated 2026-07-11 13:41:27 UTC by yildiz