React opdrachten

1.1 Maak je project aan

Maak een nieuw React-project met Vite. Verwijder daarna alle demo-inhoud die Vite automatisch aanmaakt, zodat je met een schone lei begint.

Wat moet je zien: een lege pagina met alleen de tekst Student Planner.

Klaar als npm run dev werkt en de browser toont alleen de titel, zonder Vite-voorbeeldcontent.

Theorie Project Setup

1.2 Maak je eerste component: TaskCard

Maak een apart bestand voor een TaskCard component. Dit component toont de informatie van één taak: de naam, het vak, de deadline en de status.

Wat moet je zien: een kaart op de pagina met bijvoorbeeld:

• Naam: React presentatie
• Vak: Frontend
• Deadline: 15 juni
• Status: Nog niet klaar

Klaar als de kaart zichtbaar is op de pagina en de informatie klopt met wat je in het component hebt gezet.

Theorie JSX · Component maken

1.3 Zet de basisstructuur van je app op

Maak nu ook een Header en een Sidebar als aparte componentbestanden. Zorg dat alle drie de componenten samen zichtbaar zijn op de pagina.

Wat moet je zien: een pagina met bovenaan een header met de naam van de app, een sidebar met navigatie-items zoals Dashboard en Login, en de TaskCard uit de vorige opdracht.

Stijl geef je layout een eerste vorm — header bovenaan, sidebar links of rechts, TaskCard met een duidelijke kaart-uitstraling. Netjes is genoeg, mooi hoeft nog niet.

Klaar als je hebt minstens drie aparte componentbestanden en de pagina toont alle drie de onderdelen tegelijk met een herkenbare layout.

Theorie Denken in componenten · Component gebruiken · Styling in React

2.1 Breid je componentenstructuur uit

Voeg twee nieuwe componenten toe aan je project: een FilterBar en een TaskList. Gebruik ze allebei op je dashboardpagina.

Wat moet er in de componenten komen:

• FilterBar: een rij met drie knoppen — Alles, Frontend en Backend. De knoppen hoeven nog niets te doen, ze moeten alleen zichtbaar zijn.
• TaskList: een container die één of meerdere TaskCard-componenten in zich heeft. Zet er voorlopig twee of drie TaskCard's in met vaste inhoud.

Wat moet je zien: onder je Header verschijnt de FilterBar met drie knoppen, en daaronder de TaskList met meerdere TaskCard's erin.

Klaar als FilterBar en TaskList staan elk in een eigen bestand en worden geïmporteerd in je dashboard.

Theorie Component maken · Component gebruiken

2.2 Werk met props

Pas TaskCard aan zodat hij de taakgegevens ontvangt via props in plaats van dat de gegevens hardcoded in het component staan. Gebruik meteen destructuring in de parameters van de functie, zodat je velden zoals titel en status direct kunt gebruiken zonder props.titel of props.status. Render daarna minstens drie verschillende taken met hetzelfde component.

Wat moet je zien: drie taakkaarten met elk andere inhoud, allemaal gemaakt met hetzelfde TaskCard component. Bijvoorbeeld:

• Kaart 1: React presentatie — Frontend — 15 juni — Nog niet klaar
• Kaart 2: Database ontwerp — Backend — 20 juni — Afgerond
• Kaart 3: UI prototype — Design — 22 juni — Nog niet klaar

Stijl geef TaskCard een duidelijke opmaak met padding, een rand of schaduw, en zorg dat de velden leesbaar gestructureerd zijn — bijvoorbeeld de titel dikker en groter dan de rest.

Klaar als de gegevens van elke taak worden doorgegeven via props, het woord props. komt nergens voor in je TaskCard, en er staat niets meer hardcoded in het component.

Theorie Props gebruiken · Meerdere props · Props destructuren

2.3 Gebruik children

Maak een herbruikbare Panel component met een titel en een ruimte voor willekeurige inhoud via children. Gebruik dit component op minstens drie plekken met steeds andere inhoud.

Wat moet je zien: drie panelen op de pagina, elk met een andere titel en andere binneninhoud. Bijvoorbeeld een profielblok, een melding over deadlines en een tip van de dag — allemaal gebouwd met hetzelfde Panel component.

Klaar als je hebt één Panel component dat je minstens drie keer gebruikt met verschillende inhoud erin.

Theorie Children

2.4 Bouw een eerste takenoverzicht

Maak een array met taakobjecten en render voor elk object een TaskCard. De gegevens geef je door via props. Je hoeft in deze stap nog geen unieke key toe te voegen — een console-waarschuwing over keys mag er nog zijn. In niveau 4 lossen we dat op.

Wat moet je zien: een lijst van minstens drie taakkaarten die automatisch gegenereerd worden vanuit de array. Je hebt de kaarten dus niet drie keer handmatig in JSX geschreven.

Klaar als als je een extra object aan je array toevoegt, verschijnt er automatisch een extra kaart op de pagina.

Theorie map() · Props

3.1 Maak een status-toggle

Voeg bij elke taakkaart een knop toe waarmee je de status van de taak wisselt tussen afgerond en niet afgerond.

Wat moet je zien: als je op de knop klikt, verandert de tekst of stijl van de taak direct. Bijvoorbeeld van Nog niet klaar naar Afgerond en weer terug. Je hoeft de pagina niet te refreshen.

Tip voor nu mag elke TaskCard z'n eigen lokale status-state hebben. In niveau 4 tillen we dit omhoog naar de lijst, zodat je ook kunt filteren op status.

Klaar als elke taakkaart heeft een eigen knop die de status van die kaart wisselt zonder andere kaarten te beïnvloeden.

Theorie useState · onClick

3.2 Toggle een detailpaneel

Voeg aan elke taakkaart een knop Toon details toe. Als je erop klikt, verschijnt extra informatie over die taak in de kaart zelf. Klik je nog een keer, dan verdwijnt de informatie weer.

Wat moet je zien: bij een klik klapt er binnen de kaart een klein stukje extra informatie open, zoals een korte omschrijving of een tip. Een tweede klik sluit het weer.

Let op dit is een simpele inline-toggle binnen de kaart — geen aparte detailpagina. In niveau 6 bouw je pas een echte detailpagina met een eigen URL en alle gegevens van de taak.

Klaar als de extra informatie is standaard verborgen en wordt zichtbaar na een klik, zonder dat de pagina ververst.

Theorie Toggle met state · Conditional rendering

3.3 Kies een actieve filterknop

Maak drie knoppen: Alles, Te doen en Afgerond. De knop die je aanklikt moet er visueel anders uitzien dan de andere twee.

Wat moet je zien: de actieve knop heeft een andere kleur of stijl. Als je op een andere knop klikt, wisselt de actieve stijl mee.

Let op de takenlijst hoeft in deze stap nog niet echt gefilterd te worden. We oefenen hier alleen met state en conditionele styling — het échte filteren komt in niveau 4.

Stijl zorg dat het verschil tussen actieve en inactieve knoppen duidelijk zichtbaar is — een andere kleur, rand of dikkere tekst.

Klaar als er is altijd precies één knop actief en de styling wisselt correct mee bij elke klik.

Theorie Events · State updaten · Ternary

3.4 Live input preview

Maak een invoerveld waarin een gebruiker de naam van een nieuwe taak kan typen. Onder het veld verschijnt meteen een preview van wat er getypt wordt.

Wat moet je zien: terwijl je typt verschijnt er onder het veld bijvoorbeeld: Nieuwe taak: React opdracht afmaken. De preview past zich aan bij elke toetsaanslag.

Klaar als de preview onder het invoerveld verandert live mee terwijl je typt, zonder dat je op een knop hoeft te klikken.

Theorie onChange · Input met state

3.5 Bouw een uitklapbaar zijpaneel

Maak een zijpaneel met extra informatie, zoals profielinfo, statistieken of een tip. Het paneel moet open en dicht kunnen via een knop.

Wat moet je zien: een knop waarmee het zijpaneel zichtbaar en onzichtbaar wordt. Het paneel is standaard gesloten.

Klaar als het zijpaneel opent en sluit via één knop, zonder dat de pagina ververst.

Theorie Wat is state? · Klik-events · Conditional rendering

4.1 Render een lijst met keys

Maak een array met taakobjecten en render ze als een lijst of grid op de pagina. Elk item in de lijst heeft een unieke id die je gebruikt als key.

Wat moet je zien: minstens vier taakkaarten die automatisch uit de array worden gegenereerd.

Klaar als er staan geen waarschuwingen over ontbrekende keys in de console.

Theorie Lijsten renderen · Keys

4.2 Filter op categorie

Voeg filterknoppen toe boven je takenlijst, bijvoorbeeld Alles, Frontend en Backend. Als je op een knop klikt, zie je alleen de taken uit die categorie.

Wat moet je zien: klik je op Frontend, dan verdwijnen de backend-taken uit de lijst. Klik je op Alles, dan zijn alle taken weer zichtbaar.

Klaar als elke filterknop toont alleen de bijbehorende taken en de actieve knop heeft een andere stijl.

Theorie Voorbeelden conditionals · State aanpassen · Arrays met objecten

4.3 Maak een controlled form

Bouw een formulier waarmee een student een nieuwe taak kan toevoegen. Na het invullen en versturen verschijnt de nieuwe taak meteen in de lijst.

Wat moet je zien: een formulier met minimaal een invoerveld voor de taaknaam en een knop Toevoegen. Na het klikken op de knop verschijnt de nieuwe taak onderaan de lijst en is het invoerveld weer leeg.

Let op de pagina mag niet refreshen bij het versturen van het formulier.

Klaar als nieuwe taken verschijnen direct in de lijst na het versturen, zonder paginarefresh.

Theorie Basis form · Event syntax

4.4 Werk met meerdere formvelden in één object

Breid je taakformulier uit met extra velden: titel, vak, deadline en prioriteit. Sla alle velden op in één state-object in plaats van losse state-variabelen.

Wat moet je zien: een formulier met vier invulvelden. Na het versturen bevat de nieuwe taakkaart al deze gegevens.

Klaar als alle formuliervelden worden bijgehouden in één state-object en de nieuwe taakkaart toont alle ingevulde gegevens.

Theorie Form met object state

4.5 Voeg validatie toe

Zorg dat het formulier een foutmelding toont in drie situaties:

• Een verplicht veld (zoals de taaknaam) is leeg.
• De deadline is geen geldige datum.
• De deadline ligt in het verleden.

De taak mag pas worden toegevoegd als alle invoer correct is.

Wat moet je zien:

• Laat je het titelveld leeg en klik je op Toevoegen, dan verschijnt er een duidelijke foutmelding zoals Vul een taaknaam in.
• Vul je een datum in die in het verleden ligt, dan verschijnt er een melding zoals Deadline mag niet in het verleden liggen.
• Laat je het deadlineveld leeg of vul je iets ongeldigs in, dan verschijnt er een melding zoals Vul een geldige deadline in.

In alle drie de gevallen wordt de taak niet toegevoegd.

Klaar als elke ongeldige situatie geeft een eigen zichtbare foutmelding en blokkeert het toevoegen van de taak.

Theorie Validatie · Voorwaardelijk tonen met &&

4.6 Combineer alles in één takenmodule

Breng je takenlijst, filterknoppen, formulier en statustoggle samen op één scherm. Voeg ook een melding toe die verschijnt als er nog geen taken zijn.

Wat moet je zien: één werkend scherm waarop een student taken kan toevoegen, de lijst kan zien, kan filteren op categorie, en taken kan afvinken. Als de lijst leeg is staat er een melding zoals Nog geen taken toegevoegd.

Stijl zorg dat afgeronde taken visueel anders ogen dan open taken. Bijvoorbeeld een doorgestreepte titel, een groene rand, of een lichtere achtergrondkleur. Zo zie je in één oogopslag wat klaar is.

Klaar als de drie interactieve functies (filteren, toevoegen, statustoggle) werken samen met de takenlijst op één scherm, zonder dat ze elkaar verstoren.

Theorie Lijsten met componenten · Form input · Conditional rendering

5.1 Bewaar taken in localStorage

Zorg dat de takenlijst bewaard blijft als de gebruiker de pagina refresht of de browser sluit.

Wat moet je zien: voeg een taak toe, refresh de browser, en de taak staat er nog steeds.

Klaar als taken verdwijnen niet meer na een paginarefresh.

Theorie localStorage in React · Dependencies

5.2 Fetch quotes van een API

Voeg een nieuw component QuotesSection toe aan je dashboard. In dit blok toon je motiverende quotes voor studenten, opgehaald van de DummyJSON API. Het blok staat naast of onder je eigen takenlijst.

API https://dummyjson.com/quotes?limit=10 — het antwoord is een object met een quotes-array. Elke quote heeft een id, quote (de tekst) en author.

Let op dit blok staat volledig los van je eigen takenlijst. De quotes worden puur opgehaald en getoond — je kunt ze niet bewerken, afvinken of koppelen aan taken. Het doel is dat je leert hoe je data ophaalt uit een API en toont.

Wat moet je zien: op het dashboard verschijnt een apart blok met minstens tien quotes, elk met de tekst en de auteur eronder. De data wordt opgehaald bij het laden van het dashboard.

Stijl geef het quotes-blok een eigen uitstraling zodat het duidelijk losstaat van je takenlijst — andere achtergrondkleur of rand, quote zelf prominent met de auteur kleiner eronder.

Klaar als het quotes-blok staat op het dashboard, haalt bij het laden minstens tien quotes op, en toont ze met tekst en auteur.

Theorie Data fetchen · useEffect voorbeelden

5.3 Voeg loading en error states toe

Breid opdracht 5.2 uit met drie extra situaties in het quotes-blok: een laadmelding terwijl de data wordt opgehaald, een foutmelding als het ophalen mislukt, en een melding als er geen quotes zijn.

Wat moet je zien:

• Tijdens het laden: Laden...
• Bij een fout: een foutmelding
• Als er geen quotes zijn: Geen quotes gevonden

Tip voor het testen om een foutmelding te zien, kun je tijdelijk de URL in je fetch-aanroep kapot maken (bijvoorbeeld dummyjson.com/quotez). Vergeet niet om hem daarna weer terug te zetten.

Klaar als alle drie de situaties een eigen zichtbare melding tonen in het quotes-blok.

Theorie Basis loading/error · UX patterns