Augustus 2020 - 2021
Augustus 2020 - 2021
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.
Project aanmaken
Maak een nieuw React project aan, zorg er voor dat alle standaardbestanden in de src map verwijderd worden en je vanaf nul begint. Download vervolgens de startbestanden en plaats deze in je nieuwe project.
Voer onderstaande commando uit om de bibliotheken die in de startbestanden gebruikt worden te installeren.
npm install --save lorem-ipsum uuid
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, lees deze goed door voor je een methode probeert te gebruiken. Let op, sommige methodes zijn asynchroon andere niet. Tenslotte zijn in de startbestanden ook enkele componenten te vinden die je zult moeten gebruiken of uitbreiden in de laatste opgave.
Het examen bestaat uit het opbouwen van een blog. De eigenaar zal blog posts kunnen plaatsen en bezoekers kunnen deze bekijken en hier commentaar op plaatsen.
Hou volgende punten in acht tijdens het maken van je examen:
Tenzij expliciet vermeld moet je geen rekening houden met container en presentational componenten.
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.
Componenten
Voor dit examen heb je minstens volgende componenten nodig:
HomePage
functiecomponent: NavBar
functiecomponent: LoginForm
BlogList
Home Pagina
De HomePage component bestaat uit een div die ofwel de klasse dark of de klasse light krijgt. De lezer van de blog kan via een checkbox in de NavBar component (zie verder) het thema van de website aanpassen van light naar dark en omgekeerd. Binnen deze div wordt eerst de NavBar component geplaatst, verder bevat de HomePage ook een andere div die de klasse container krijgt.
Bouw bovenstaande structuur uit. Binnen de container div moet routing toegevoegd worden, hieronder zie je de paden die aanwezig moeten zijn.
'/blogs' Opent een component BlogList.
Aan het pad '/blogs' moet ook een parameter id meegegeven kunnen worden, in dat geval wordt de component BlogDetail (start versie te vinden in de startbestanden) getoond.
'/' en elk ander onbekend pad tonen de component Home (te vinden in de startbestanden).
NavBar
De functie component NavBar bestaat uit een aantal links, een checkbox en de LoginForm component. De verschillende items in de NavBar worden in een unordered list geplaatst (<ul>). De opmaak wordt door de bijgevoegde CSS in orde gebracht. Als jouw code niet 100% dezelfde layout produceert, is dit geen probleem.
De eerste link Home brengt de bezoeker naar het pad '/'.
De tweede link Blogs brengt de bezoeker naar het pad '/blogs'.
Het form element geeft aan of het dark of light theme gebruikt wordt, de thema keuze wordt persistent gemaakt via de setPrefersDarkTheme methode uit de UserAPI klasse en kan terug opgehaald worden via de getPrefersDarkTheme methode uit dezelfde klasse. Elke wijziging in het geselecteerde thema moet onmiddellijk zichtbaar zijn op de volledige website (zonder dat de pagina herladen moet worden).
Om het laatste list item te bouwen kunnen de getUser, isLoggedIn, logOut, en logIn methoden uit de UserApi klasse van pas komen. Verder heeft dit item de css klasse 'loginform' en kan het volgende twee zaken bevatten:
Als de gebruiker niet ingelogd is wordt de LoginForm component getoond. Zie de volgende opgave voor meer details.
Als de gebruiker ingelogd is wordt de gebruikersnaam en een logout knop getoond. Na het gebruik van deze knop moet de NavBar component de wijzigingen ook tonen, i.e. de LoginForm component moet opnieuw getoond worden en de logout knop mag niet langer zichtbaar zijn.
De NavBar component is een functie component en heeft dus geen state, dit betekent dat de gebruikersinformatie, de themakeuze en de nodige handlers vanaf de bovenliggende component doorgegeven worden. Zorg dat hierop de nodige controles gebeuren via de prop-types bibliotheek.
LoginForm
De functie component LoginForm bestaat uit een textinput waar de gebruikersnaam ingegeven kan worden, de component bevat bovendien een checkbox die (bij gebrek aan een authenticatieserver) aangeeft of de gebruiker al dan niet de eigenaar is van deze blog. Merk op dat de gebruikersnaam geen belang heeft, elke gebruikersnaam wordt goedgekeurd, zolang deze minstens 1 karakter lang is.
Hou er rekening mee dat het al dan niet ingelogd zijn van de gebruiker invloed zal hebben op de rest van de website en dat deze wijzigingen onmiddellijk zichtbaar moeten zijn zonder de website te herladen.
BlogList
Deze component kan zowel gebruikt worden om de reeds bestaande blogposts te bekijken als om een nieuwe post aan te maken. Het is natuurlijk vanzelfsprekend dat een nieuwe post enkel aangemaakt kan worden door de eigenaar van de blog (zie LoginForm). De eigenaar ziet een knop "New blog post" als hij het pad "/blogs" bekijkt. De createNewBlog methode uit de BlogsAPI klasse genereert een blogpost bestaande uit lorem-ipsum tekst.
De BlogList component toont een overzicht van de verschillende blogposts die de eigenaar van de website geplaatst heeft. De verschillende posts zijn zichtbaar voor elke gebruiker (ingelogd of niet). Voor elke post worden de titel en de eerste alinea getoond (zie de commentaar in de BlogsAPI klasse voor concrete info over de structuur van de BlogPost objecten). Tenslotte bevat een blogpost ook een link naar de detailpagina waar de volledige post gelezen kan worden. Wat betreft de opmaak wordt een post omringd in een div met de CSS-klasse blog-card. Een array van alle blogposts kan opgehaald worden via de getBlogs methode in de BlogsAPI klasse.
Tenslotte heeft de eigenaar van de blog ook de mogelijkheid om een blog te verwijderen, gebruik hiervoor de deleteBlog methode uit de BlogsAPI klasse.
BlogDetail
De BlogDetail pagina toont de volledige inhoud van de blogpost, inclusief commentaren. Voor deze component vertrek je van het meegeleverde startbestand.
In het geval dat de post nog geen commentaar heeft wordt de tekst "No comments yet" getoond. Om de commentaren te tonen kan je gebruik maken van de Comment component die je in de startbestanden vindt.
Onder de commentaren wordt een formulier getoond waarmee elke ingelogde gebruiker een commentaar kan plaatsen, na een druk op de post knop is deze commentaar onmiddellijk zichtbaar op de pagina.
De startbestanden bevatten een component NewCommentSection, deze definieert het formulier en moet niet meer aangepast worden. Enkele properties moeten nog wel doorgegeven worden, in het startbestand voor de BlogDetail component kan je een beschrijving vinden van elk van deze eigenschappen.
