Les 3: Single Page Applications

Tijdens deze oefensessie bouw je een applicatie waarmee je de hoofdsteden van enkele Aziatische landen kan inoefenen.

Oefening 0: Voorbereiding

Maak een nieuw project aan, zorg er voor dat alle nodige pakketten geïnstalleerd zijn. Je moet routing toevoegen en een lay-out bouwen via Bootstrap.

Verwijder, net zoals tijdens de eerste oefensessie, alle inhoud uit de source map. Je begint van een leeg project. Maak alvast een nieuwe index.js aan.

Je applicatie bevat 4 pagina’s. Maak voor elke pagina een nieuw JavaScript bestand aan. De pagina’s zijn: home, game, highscores en about. Deze definiëren elk een component, respectievelijk HomePage, GamePage, HighScorePage en AboutPage.

Oefening 1: Home Page

Bouw onderstaande pagina na. Zorg dat de links werken en dat de routing geïmplementeerd wordt via React Router.

Fig 1: Home Page

De knoppen in de drie kolommen verwijzen naar dezelfde plaats als de links in de navigatiebalk. De kolom lay-out is gemaakt met behulp van de React Bootstrap Grid Systeem.

Bouw de routes zo op, dat de bijhorende componenten getoond worden als je op de links klikt (voorlopig zijn deze nog leeg).

Oefening 2: Game Page

Download het startbestand capitals_api.js. Gebruik dit bestand tijdens het uitwerken van de GamePage component.

De pagina is opgebouwd uit twee componenten Question en Result. De eerste component Question bevat een vraag. Deze component is opgebouwd met de Card en Button componenten van react-bootstrap.

Fig 2: Vragen

Als je onderaan op de link "Stop playing" klikt wordt je naar de HomePage gebracht.

Gebruik de state van de component GamePage om bij te houden hoeveel vragen er al beantwoord zijn en het hoeveel van deze vragen juist beantwoord zijn. Als het aantal beantwoorde vragen hoger is dan het aantal landen in de vragenlijst moet de Result component getoond worden.

Koppel aan de knoppen een onClick handler die de volgende vraag toont en de nodige aanpassingen maakt aan de state.

Je merkt dat de knop in focus blijft nadat je er op geklikt hebt, dit is niet ideaal. Gebruikt het gepaste JavaScript event om de knop uit focus te halen.

De tweede component wordt getoond als alle vragen afgewerkt zijn en ziet er als volgt uit.

Deze component is opnieuw opgebouwd aan de hand van een Card component, daarnaast worden er nu ook Form componenten gebruikt.

Fig 3: Resultaat

Als je op de knop "Start over" klikt wordt het spel opnieuw opgestart. Er zullen dus aanpassingen nodig zijn aan de state van de GamePage component.

Als je op de "Submit" knop drukt wordt de ingevulde naam aan de highscores toegevoegd. Zorg er voor dat het formulier leeg gemaakt wordt als je op de knop gedrukt hebt en dat de "Submit" knop niet meer in focus is.

Gebruik hiervoor de klasse highscores_api.js.

Oefening 3: Highscore Page

De highscore pagina toont alle highscores in een ListGroup component (uit react-bootstrap). Deze component is opnieuw in een Card component geplaatst.

Fig 4: High Scores

Oefening 4: About Page

Bouw tenslotte de AboutPage component, om deze component te bouwen geef je de drie paragrafen door via de properties. Je kan hiervoor onderstaande array gebruiken:

const aboutText = [
    "This app really isn't ready to be seen by anyone...",
    "I should add more countries...",
    "I should probably shouldn't use cards for evert page..."
]

Fig 5: About Page