Herhalingsoefening 1
Tijdens deze oefensessie bouw je een (klein deel van) een webshop na in React. We beginnen met eenvoudige functie componenten en breiden uit naar klasse componenten. Tenslotte voegen we routing en styling toe aan de oefening. Merk op dat styling gebruikt wordt als oefening en niet met het doel een productie-klaar resultaat neer te zetten. De styling van de oefening blijft heel beperkt.
We bouwen een webshop pagina met een aantal laptops, waarvan de specificaties automatisch gegenereerd zijn. De website stelt de gebruiker in staat om de beschikbare laptops te filteren op basis van deze specificaties en om een detailpagina te bekijken.
Oefening 0: Voorbereiding
Maak een nieuw project aan, verwijder alle bestanden binnen de src map en maak een nieuw bestand index.js aan. Voorzie vervolgens ook een map "components" en "pages".
Tijdens deze oefeningen maak je gebruik van Font Awesome. Je kan dit installeren via onderstaande commando’s.
npm install @fortawesome/react-fontawesome --save
npm install @fortawesome/fontawesome-svg-core --save
npm install @fortawesome/free-solid-svg-icons --save
npm install @fortawesome/free-brands-svg-icons --save
npm install @fortawesome/free-regular-svg-icons --save
2
3
4
5
Bovenstaande pakketten voorzien een FontAwesomeIcon component. De property icon geeft weer welk icoon er getoond moet worden.
import {faCaretDown} from '@fortawesome/free-solid-svg-icons'
import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
ReactDOM.render(
<div>
<FontAwesomeIcon icon={faCaretDown}></FontAwesomeIcon>
</div>,
document.getElementById('root')
);
2
3
4
5
6
7
8
9
Naast Font Awesome gebruiken we in deze oefeningen ook de uuid bibliotheek. Installeer deze.
npm install --save uuid
Het UI van de view is als volgt opgebouwd
Oefening 1: Zoek filters
Elke webshop heeft nood aan een manier om de beschikbare objecten te filteren. We beginnen hiermee. Een filter bestaat uit een titel en een aantal opties. Bijvoorbeeld "Merk" wat onderverdeeld is "Acer", "Apple", … De filter kan dichtgeklapt worden, dan zijn de opties niet meer zichtbaar. Dit dichtklappen programmeer je zelf, maak geen gebruikt van bibliotheken of componenten die dit voor jou doen.
We bouwen de component van onder naar boven uit, we beginnen dus met de functie componenten en bouwen dan de klasse componenten die deze functie componenten bevatten.
Opties
Maak een nieuw bestand, filterItem.js, aan in de componenten map. Dit bestand definieert een functie component FilterItem en exporteert deze. De component ziet er als volgt uit (5x opgeroepen):
De component bevat geen hardcoded data. Enkel de structuur wordt in deze component gedefinieerd alle effectieve data wordt via properties doorgegeven. De component gebruikt hiervoor de properties checked, recommended, en label.
Filteren
Download de startbestanden. Kopieer deze map naar je project. De klasse DataAPI definieert alle categorieën die beschikbaar zijn op de webshop, alle beschikbare laptops, en een aantal methodes die nuttig kunnen zijn tijdens het bouwen van de oefening.
Maak een nieuw bestand aan in de componenten map, filter.js. Dit bestand definieert een component Filter. Zoals te zien op het screenshot is deze component opgebouwd uit een aantal FilterItem componenten. Hoeveel hangt natuurlijk af van de categorie.
Een Filter component heeft twee properties, title en options. De waarden voor deze properties komen uit de DataAPI klasse. Om te testen kan je gebruik maken van de getCategories methode, deze geeft een lijst van alle categorieën terug. Wat een categorie is kan je in de commentaar van de DataAPI klassen zien.
Naast het weergeven van de opties moet de component dichtgeklapt kunnen worden. Hiervoor gebruik je de state van de component Filter. Het pijltje naar beneden wordt door Font Awesome gedefinieerd in het object faCaretDown. Een dichtgeklapte filter gebruikt het faCaretUp icoon en ziet er als volgt uit.
Alle filters
Maak een nieuw bestand in de componenten map, filterBar.js. Dit bestand definieert een component FilterBar. Zorg er voor dat je binnen deze component elke filter toont. Gebruik hiervoor de getCategories methode van de DataAPI klasse.
Daarnaast moet deze component in zijn state de categorieën en bijhorende opties bewaren.
Op basis van de state worden de verschillende Filter componenten gebouwd.
Het resultaat (niet alle filters getoond in screenshot):
Filters selecteren
Momenteel kunnen de filters nog niet geselecteerd worden. Dit is natuurlijk niet ideaal.
Probeer eerst zelf te zorgen dat de opties binnen elke filter geselecteerd kunnen worden. Als dit niet lukt, kan je de hints hieronder bekijken.
Stappenplan voor het selecteren van een filter
Om een checkbox aan te vinken moet je volgende stappen doorlopen:
- Maak een nieuwe methode aan in de FilterBar component.
- Laat de nieuwe functie de toggleOptionSelected methode van de DataAPI oproepen.
- Laat de nieuwe methode ook de state bijwerken.
- Geef de nieuwe methode door aan elke Filter component via een property.
- Bouw een nieuwe lambda (arrow) functie die de juiste parameters meegeeft aan de doorgegeven functie en deze oproept.
- Geef deze lambda functie door aan de FilterItem component en roep deze op bij het onChange event.
Oefening 2: Styling
Voeg Bootstrap toe aan het project, dit kan door onderstaande commando’s uit te voeren.
npm install react-bootstrap --save
npm install bootstrap --save
2
NavBar
Voeg een navbar toe aan je applicatie. De navbar bevat de links Laptops, Smartphones, Keuken, Wasmachines en About, deze hoeft nog geen werkende links te bevatten.
Search Page
Maak in de map pages een nieuw bestand searchPage.js aan. Dit bestand definieert een component SearchPage die met het Bootstrap grid systeem is opgebouwd.
De component deelt het scherm op in 2 kolommen, de eerste is 4 breed en bevat de filters, de tweede is 8 breed en bevat momenteel nog niets. Je mag er van uitgaan dat deze lay-out voor elk breakpoint hetzelfde is.
Zorg er voor dat de SearchPage component de Bootstrap klasse mt-5 gebruikt.
Filter Styling
De filter heeft een marge van 1 tussen de caret en de titel van de categorie.
Daarnaast moet elk FilterItem een linkse marge hebben van 3 en moeten de Bootstrap form elementen gebruikt worden.
Tenslotte wordt de tekst aanbevolen in de kleur "success" getoond.
Oefening 3: ComputerList
Gebruikt de getFilteredComputers methode uit de DataAPI klasse om een lijst te tonen van alle computers die voldoen aan de geselecteerde filters.
Maak een nieuw bestand computerList.js. Dit bestand definieert een component ComputerList die via properties de lijst van gefilterde computers binnen krijgt. Deze component bevat een andere component ComputerItem die gedefinieerd is computerItem.js.
De component ComputerItem heeft één property, computer, en toont informatie over deze computer aan de hand van een Bootstrap Card. Merk op dat de foto voor elke laptop hetzelfde is, namelijk het Font Awesome icoon faLaptop. Om het icoon te stylen kan je onderstaande CSS gebruiken.
const style = {
fontSize: '6rem',
textAlign: "center"
}
2
3
4
Hieronder zie je één computer staan. De tekst "17 inch | AMD Ryzen 7 | 16 GB" is te vinden in de info eigenschap van de computer. De naam van de computer “Apple Ovbb9B5j8J” is te vinden in het name attribuut van de computer. De prijs is te vinden in het price attribuut.
Gebruikt de component ComputerList om onderstaand scherm na te bouwen. Het Bootstrap grid komt hierbij van pas.
Oefening 4: Filteren
Je merkte waarschijnlijk al op dat het filteren nog niet werkt. Dit komt omdat de geselecteerde filters bijgehouden worden in de component FilterBar. Je moet dit nog een niveau naar boven verhuizen. Zowel de geselecteerde filters als de computers die hierbij horen moeten in de state van de SearchPage component bijgehouden worden.
Breng dit in orde zodat filtering wel werkt.
Oefening 5: Routing
Installeer de nodige pakketten voor routing. Zorg er voor dat de links achter "Small Webshop" en "Laptops" allebei naar de SearchPage component verwijzen.
Alle andere pagina’s verwijzen naar de (nog aan te maken) UnderConstructionPage component via het pad "/construction". Deze component bevat onderstaande inhoud.
Ook als je de root page van de site opent ('/') moet je op de SearchPage component komen. Gebruik hiervoor maximaal 2 Route componenten.
DetailPage
Maak een detailpagina aan voor een laptop. Deze pagina is gebouwd met behulp van een Bootstrap Card en gebruikt het Bootstrap grid om twee aparte lijsten naast elkaar weer te geven. De marge tussen twee kolommen weghalen kan door middel van de 'g-0' CSS klasse.
