Januari 2020 - 2021
Op deze pagina kan je het examen React van januari 2021 vinden.
Waarschuwing
Let op, in dit examen is geen sprake van hooks, context, of recoil. Toch moet je zaken kennen voor het examen van >= 2020 - 2021. Probeer de oefeningen op verschillende manieren op te lossen, een keer met hooks, met recoil en met class components, zo ben je goed voorbereid op je examen.
Ondanks de verschillen in leerstof geeft dit voorbeeldexamen wel een goed idee van de omvang en complexiteit van toekomstige examens.
De oplossingen en startbestanden zijn niet geüpdatet voor nieuwe React versies en kunnen dus out-of-date of deprecated features bevatten. Deze worden as-is aangeboden, ouderwetste of niet langer werkende code zal niet aangepast worden.
De oplossingen voor dit examen zijn onderaan de pagina te downloaden, probeer elke oefening zelf uit te werken. Voor elke opgave is een video beschikbaar waarin de oefening besproken wordt en de meest gemaakte fouten toegelicht worden.
Voor elke opgave worden de meest voorkomende fouten (in de inzendingen van januari 2021) besproken.
Algemene aandachtspunten
Het examen was open-boek, dit betekent echter niet dat je React zelf niet moet beheersen. Je kan kleine dingen gaan opzoeken als je problemen ondervindt of iets concreet niet meer weet tijdens het examen.
Het is niet de bedoeling om volledige stukken code te kopiëren. In de ingestuurde antwoorden waren verbazingwekkend veel kopieën van voorbeelden en opgeloste oefeningen te zien. Niet enkel relevante delen waren gekopieerd, maar ook variabelen, functienamen en import statements die verwezen naar niet bestaande zaken, waren alomtegenwoordig.
Een groot deel van de inzendingen bevatte Bootstrap code. Op de screenshots was duidelijk geen Bootstrap code te zien. Niemand kent alle Bootstrap componenten vanbuiten en je verliest veel tijd met telkens op te zoeken welke componentenstructuur je voor een bepaalde UI component nodig hebt. Zorg dat je eenvoudige, klassieke, HTML gebruikt op de examens, de focus licht hier op React, niet op opmaak.
De container-presentational structuur was eveneens in verschillende inzendingen te vinden. In de opgave staat duidelijk dat dit niet moest, behalve als het uitdrukkelijk gevraagd werd. Dit laatste was enkel het geval bij de opgave over de poll lijst. Om de container-presentational structuur correct te gebruiken moet je telkens een extra component aanmaken en verlies je dus tijd.
Als je Bootstrap en/of de container-presentational structuur wel gebruikt in je examen, verlies je hier natuurlijk geen punten door. Maar onthoud dat het examen niet voorzien is op de extra tijd die je hiervoor nodig hebt.
Tenslotte mag je niet vergeten dat je de voorbeelden, presentaties en oefeningen moet studeren. Op het examen is niets gevraagd dat niet in de lessen gezien is, maar de leerstof die gezien is in de presentaties kan verder uitgebouwd worden in de oefeningen. Vergeet ook niet dat de oplossingen er zijn om je te ondersteunen, maar als je de code in de oplossingen begrijpt wil dit niet zeggen dat je deze ook kan reproduceren. Zorg er dus voor dat je de oefeningen zelf kan maken.
Richtlijnen & project aanmaken
Maak een nieuw React project aan, zorg er voor dat alle standaard bestanden in de src map verwijderd worden en je vanaf nul begint. Download vervolgens de startbestanden en plaats deze in je nieuwe project.
In de startbestanden kan je een CSS bestand vinden, zorg dat dit voor je volledige project gebruikt wordt.
Daarnaast zijn er in de startbestanden ook 2 API klassen te vinden, deze pas je niet aan. Deze API klassen bevatten documentatie over de verschillende methodes mocht er iets onduidelijk zijn. Daarnaast moet ook deuuid bibliotheek geïnstalleerd worden via het volgende commando.
npm install uuid --save
Het examen bestaat uit het opbouwen van een site waarmee gebruikers polls kunnen aanmaken en op polls kunnen stemmen.
Hou volgende punten in acht tijdens het maken van je examen:
- Tenzij expliciet vermeld moet je geen rekening houden met container en presentational componenten en mogen API's rechtstreeks aangesproken worden.
- Tenzij expliciet vermeld kies je zelf of je een klasse component of een functie component gebruikt
- Indien je problemen hebt met de routing voeg je de componenten onder elkaar toe aan de home page.
- Zoek NIET naar CSS problemen, als de website er niet exact uitziet zoals in het screenshot is dit geen probleem.
- Zit je echt vast op een probleem, dan ga je beter voort naar de volgende opgave in de plaats van te blijven zoeken. Ook als je code niet 100% werkt kan je punten verdienen.
- Je hebt 195 minuten om dit examen op te lossen.
Aandachtspunten
Het grootste probleem met deze (kleine) opgave was de CSS. Veel inzendingen hadden de CSS gekopieerd naar de public map maar hadden geen <link> tag toegevoegd aan de HTML code. Anderen hadden de CSS in de src map laten staan maar hadden geen of een foutief import statement toegevoegd. Er waren ook verschillende inzendingen waar er wel een import statement was, maar dat in verschillende componenten gebruikt werd terwijl één import in index.js voldoende is.
Een tweede probleem was de routing, veel voorkomende fouten waren:
- Geen <BrowserRouter> component rond de volledige applicatie.
- Een <BrowserRouter> op verschillende plaatsen in je applicatie.
- Een ontbrekend exact attribuut.
Home Page
Begin met routing toe te voegen aan je project. Hieronder zie je de paden die je (voorlopig) nodig hebt.
- '/' Opent een component PollPagina (maak deze aan).
- '/login' Opent een component LoginPagina (maak deze aan).
Login Page
De login pagina ziet er als volgt uit:
Bouw deze lay-out na in de LoginPagina component en voeg een container toe rond het loginformulier met de CSS klasse "loginpage".
Zorg dat de gebruikersnaam en het wachtwoord in de state van de pagina bewaard worden en aanpasbaar zijn, hiervoor gebruik je slechts één change handler. Lukt dit niet zorg dan dat enkel de Username werkt.
Als de gebruiker op "Inloggen" drukt wordt hij ingelogd via de UserAPI klasse (merk op dat het wachtwoord niet van belang is en elke gebruikersnaam goedgekeurd wordt). Nadat de gebruiker ingelogd is wordt hij doorverwezen naar het pad '/';
Aandachtspunten
Veel voorkomende fouten waren:
- Geen koppeling tussen de state en formulierelementen (value={this.state.username}).
- Foute HTML code. Dit zou echt geen probleem mogen zijn. Hieronder enkele fouten:
- <textarea> tags in de plaats van <input type="text"> <password> in de plaats van <input type="password">
- Attributen gebruikt die niet bestaan
- Aanhalingstekens (") die niet afgesloten waren
- Gekopieerde code uit de Robots oefening waar de login afgehandeld werd door middel van asynchrone functie. De functie in de UserAPI klasse was synchroon.
- Foutief gebruik van de UserAPI.login(username: string) methode.
- Zowel username als wachtwoord meegegeven. In de opgave stond duidelijk dat het wachtwoord er niet toe deed.
- Proberen om een instantie te maken van de statische UserAPI klasse. Als je de klasse opent zou het meteen duidelijk moeten zijn dat dit geen goed idee was. :::
Poll pagina
De PollPagina wordt enkel getoond als de gebruiker ingelogd is, zorg er voor dat je herleid wordt naar de login pagina als je niet ingelogd bent.
Verder bestaat de PollPagina component uit 2 delen.
Het eerste deel toont altijd de component NavBar, ongeacht het pad dat de gebruiker opgeroepen heeft.
Het tweede deel kan verschillende componenten tonen, voorlopig moet het pad '/' de component PollCreationForm tonen.
Bouw deze structuur uit, details over de componenten volgen verder in de opgave.
Aandachtspunten
Hier waren de inzendingen algemeen goed of compleet fout. Aandachtspunten zijn:
- Vergeet het exact attribuut niet.
- Een tweede <BrowserRouter> component is niet nodig.
- De NavBar component moest binnen de PollPagina opgeroepen worden, niet in index.js.
- De NavBar component moest altijd zichtbaar zijn, wat betekent dat deze buiten de switch moest staan.
NavBar
De NavBar component is een unordered list met drie list items.
De link "Create Poll" brengt de gebruiker naar het pad '/', de tweede link "View Polls" brengt de gebruiker naar het pad '/polls/view'.
Verder wordt de naam van de ingelogde gebruiker weergegeven (op te halen via de UserAPI klasse). Achter deze naam wordt een "Log out" knop getoond. Als de gebruiker hierop klikt wordt hij uitgelogd. Dit betekent zoals hierboven vermeld dat hij herleid wordt naar de login pagina.
De NavBar roept de UserAPI niet rechtstreeks aan, bijgevolg worden de gebruikersnaam en de logout handler vanaf de bovenliggende component doorgegeven via properties.
Zorg dat hierop ook controles uitgevoerd worden via de Proptypes bibliotheek.
Aandachtspunten
De veelgemaakte fouten:
- Geen onClick handler gekoppeld.
- Geen controle op de properties met de prop-types bibliotheek.
- Geen properties doorgegeven vanuit de PollPagina component maar deze gedefinieerd in de NavBar component zelf.
- Geen aanpassing aan de state. De logoutHandler is gedefinieerd in de PollPagina component, deze component bevat in zijn render methode een check die de gebruiker doorstuurt naar de LoginPagina component als hij niet ingelogd is. De state moet aangepast worden zodat de render methode opnieuw uitgevoerd wordt en je doorverwezen wordt na uitloggen.
Poll Creation Form
Voor deze component beslis je zelf of je een onderverdeling maakt in kleinere componenten. Doe dit waar je denkt dat het voordelig is.
Titel
De titel van het formulier moet onderstaande CSS gebruiken. Zet dit om naar React code, je mag het css bestand niet gebruiken.
.titel {
width: 100%;
text-align: center;
margin: 5em;
}
2
3
4
5
Formulier
Als je de pagina opent zie je standaard 3 mogelijke antwoorden. Met de "-" en "+ Add answer" knoppen kan je antwoorden toevoegen en verwijderen. Gegeven dat de antwoorden in een div staan kan je de CSS klasse 'answer-style' gebruiken om deze div eenzelfde lay-out als in de screenshots te geven.
Poll aanmaken
Als de gebruiker op "Create Poll" drukt wordt de nieuwe poll weggeschreven via de PollAPI klasse, worden alle input velden terug leeg gemaakt en worden er terug drie (lege) antwoorden getoond.
Aandachtspunten
Zeer veel inzendingen hebben voor deze opgave geen array gebruikt, als je deze opgave leest zou je onmiddellijk moeten weten dat de antwoorden in een array en in de state bewaard moeten zijn. Diegenen die een array gebruikt hebben, hebben bijna allemaal ook fouten gemaakt tegen het verwijderen van elementen. De splice methode geeft de verwijderde elementen terug en niet de originele lijst zonder het verwijderde element.
Poll List
Voeg een nieuwe pad '/polls/view' toe aan je PollPagina component. Dit pad toont een nieuwe component die een overzicht van alle polls bevat. Bouw dit overzicht volgens het container-presentational patroon.
Merk op dat de NavBar component nog steeds zichtbaar is. Elke poll bevat de vraag, de naam van de gebruiker die de poll aangemaakt heeft en het aantal stemmen dat er voor deze poll gebeurd zijn.
Tenslotte is er ook een link "Vote" die de gebruiker naar een detailpagina over de poll brengt. Om de detailpagina te tonen maak je gebruik van een parameter in de url.
Om exact dezelfde opmaak te krijgen als in het screenshot kan je de css klasse 'poll-list-item' gebruiken.
Detail View
De detailpagina toont de vraag en de mogelijke opties en biedt de mogelijkheid om te stemmen.
Indien er minstens één keer gestemd is wordt ook het percentage getoond dat er voor elke optie gekozen is (elke gebruiker mag zoveel stemmen als hij wil):
