Labo 2
Voor dit labo moet je de volgende theorie bekeken hebben:
- Componenten
- Props
- Folder structuur
- Styling
1. Simpele componenten
Maak een nieuwe React applicatie aan en noem deze labo2-component
.
Maak de volgende componenten aan:
Header
met als propstitle
ensubtitle
List
met als propsitems
(array van strings).- Elke string wordt getoond in een apart component
ListItem
met als propstext
. - Gebruik hiervoor de
map
functie. - Gebruik een ongeordende lijst (
<ul>
) om de items te tonen.
- Elke string wordt getoond in een apart component
Footer
met als propscopy
enyear
Gebruik deze componenten in de App
component om de volgende pagina te maken:
Labo 2
Basic components
- item 1
- item 2
- item 3
Oplossingsvideo
2. Facebook cards
Maak een nieuw project aan en noem deze labo2-facebook
.
Neem de volgende code over.
Teken eerst op papier hoe je deze facebook card zou opdelen in componenten. Splits deze componenten op in aparte componenten. Zorg dat alle content aanpasbaar is via props.
Let er op dat componenten ook kunnen bestaan uit andere componenten.
Oplossingsvideo
3. Slotmachine
Gebruik de slotmachine code die je in labo 1 hebt geschreven en zorg voor de volgende dingen:
SlotMachine
: aanvaard een propertyslots
die het aantal slots aangeeft. Deze component bevat de logica om de slots te genereren en te tonen. Je kan deze component ook gebruiken om de logica te schrijven om te bepalen of de speler gewonnen heeft of verloren heeft.<SlotMachine slots={5} />
Slot
: deze component bevat de logica om een slot te tonen. De waarde van de slot wordt doorgegeven via een propertyvalue
.<Slot value={1} />
Zorg ervoor dat je meerdere slotmachines kan tonen op een pagina. Toon bijvoorbeeld een SlotMachine met 5 slots, een SlotMachine met 4 slots en een SlotMachine met 3 slots.
Gebruik css modules om de stijl van de slotmachine te bepalen. Je bent vrij om de stijl te kiezen.
De applicatie moet ongeveer er als volgt uitzien:
Labo 2: Slots
Je hebt verloren
Je hebt verloren
Je hebt verloren
Oplossingsvideo
4. Maaltafels component
Maak een kopie van de maaltafels oefening van labo 1 en zorg ervoor dat je de volgende componenten hebt:
MultiplicationTable
: deze component bevat de logica om de tabel te tonen. Deze component bevat een propertymax
die het maximum getal aangeeft dat getoond moet worden.<MultiplicationTable max={5} />
MultiplicationRow
: deze component bevat de logica om 1 rij van de tabel te tonen. Deze component bevat een propertyfactor
die het getal aangeeft waarvan de tafel getoond moet worden. Deze component bevat ook een propertymax
die het maximum getal aangeeft dat getoond moet worden.<MultiplicationRow factor={2} max={5} />
Header
: deze component bevat de logica om de header van de tabel te tonen. Deze component bevat een propertymax
die het maximum getal aangeeft dat getoond moet worden.<Header max={5} />
De applicatie moet ongeveer er als volgt uitzien:
1 | 2 | 3 | 4 | 5 | |
1 | 1 | 2 | 3 | 4 | 5 |
2 | 2 | 4 | 6 | 8 | 10 |
3 | 3 | 6 | 9 | 12 | 15 |
4 | 4 | 8 | 12 | 16 | 20 |
5 | 5 | 10 | 15 | 20 | 25 |
1 | 2 | 3 | 4 | 5 | 6 | 7 | |
1 | 1 | 2 | 3 | 4 | 5 | 6 | 7 |
2 | 2 | 4 | 6 | 8 | 10 | 12 | 14 |
3 | 3 | 6 | 9 | 12 | 15 | 18 | 21 |
4 | 4 | 8 | 12 | 16 | 20 | 24 | 28 |
5 | 5 | 10 | 15 | 20 | 25 | 30 | 35 |
6 | 6 | 12 | 18 | 24 | 30 | 36 | 42 |
7 | 7 | 14 | 21 | 28 | 35 | 42 | 49 |
1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | |
1 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 |
2 | 2 | 4 | 6 | 8 | 10 | 12 | 14 | 16 | 18 | 20 |
3 | 3 | 6 | 9 | 12 | 15 | 18 | 21 | 24 | 27 | 30 |
4 | 4 | 8 | 12 | 16 | 20 | 24 | 28 | 32 | 36 | 40 |
5 | 5 | 10 | 15 | 20 | 25 | 30 | 35 | 40 | 45 | 50 |
6 | 6 | 12 | 18 | 24 | 30 | 36 | 42 | 48 | 54 | 60 |
7 | 7 | 14 | 21 | 28 | 35 | 42 | 49 | 56 | 63 | 70 |
8 | 8 | 16 | 24 | 32 | 40 | 48 | 56 | 64 | 72 | 80 |
9 | 9 | 18 | 27 | 36 | 45 | 54 | 63 | 72 | 81 | 90 |
10 | 10 | 20 | 30 | 40 | 50 | 60 | 70 | 80 | 90 | 100 |