Labo 4
Voor dit labo moet je de volgende theorie bekeken hebben:
- Event Handling
- State
- Hoe state herkennen?
- useState hook
- setState met callback
- Regels van useState
- Select, Checkbox en Radio Buttons
1. State herkennen
Identificeer de state in de volgende componenten. Geef aan waar de state zich bevindt en wat de initiële waarde is.
2. Input veld
Maak een nieuwe React applicatie aan en noem deze labo4-inputfield
.
Maak een component InputFields
aan met de volgende functionaliteit:
- Het component heeft 1 state
inputValue
die een string bevat. Deze begint bij een lege string. - Zorg ervoor dat je 5 input velden op je scherm staat die allemaal de waarde van
inputValue
bevatten. - Zorg ervoor dat als je iets typt in 1 van de input velden, de waarde van
inputValue
verandert en alle input velden de nieuwe waarde bevatten.
Gebruik deze component in de App
component om de volgende pagina te maken:
3. Checkbox
Maak een nieuwe React applicatie aan en noem deze labo4-checkbox
.
Maak een component Checkbox
aan met de volgende functionaliteit:
- Plaats een checkbox in je component met als label
Show/Hide
- Als de gebruiker de checkbox aanvinkt moet er een div getoond worden met een image als background.
- Als de gebruiker de checkbox uitzet moet de div verdwijnen.Show/Hide
Oplossingsvideo
4. Maaltafels State
Maak een kopie van de maaltafels code die je in een van de vorige labo's hebt geschreven en zorg voor de volgende dingen:
- Zorg voor een input veld waarin je het getal kan ingeven waarvan je de maaltafel wil zien.
- Als het veld aangepast wordt, moet de maaltafel van dat getal getoond worden.
- Je moet een state gebruiken om het getal
max
bij te houden. Dit getal bepaalt tot waar de maaltafel getoond moet worden. - Je kan een maximum van 10 kiezen in het input veld en een minimum van 2.
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 |
5. Omhoog/Omlaag
Maak een nieuwe React applicatie aan en noem deze labo4-omhooglaag
.
Maak een component Counter
aan met de volgende functionaliteit:
- De component bevat een
state
met de naamcount
die een getal bevat. Begint bij 0. - De component bevat een
button
met de tekstOmhoog
. Als je op deze knop klikt, wordt de waarde vancount
met 1 verhoogd. - De component bevat een
button
met de tekstOmlaag
. Als je op deze knop klikt, wordt de waarde vancount
met 1 verlaagd. - De component bevat de tekst
Count: {count}
. Hier wordt de waarde vancount
getoond. - Zorg ervoor dat de tekst rood wordt als
count
kleiner is dan 0 en groen wordt alscount
groter is dan 0. Als het gelijk is aan 0, wordt de tekst zwart.
Gebruik deze component in de App
component om de volgende pagina te maken:
Oplossingsvideo
6. Loading indicator
Maak een nieuwe React applicatie aan en noem deze labo4-loading
.
installeer de volgende npm packages:
npm install react-loader-spinner
Zorg er nu voor dat de applicatie de volgende functionaliteiten heeft:
- De applicatie bevat een
state
met als naamloading
die een boolean bevat. Deze begint bijfalse
. - De applicatie bevat een
button
met de tekstStart loading
. Als je op deze knop klikt, wordt de waarde vanloading
optrue
gezet. - Na 3 seconden wordt de waarde van
loading
opfalse
gezet. - Als de waarde van
loading
true
is, wordt er een loading indicator getoond. De button verdwijnt. - Als de waarde van
loading
false
is, wordt de loading indicator niet getoond. De button verschijnt terug.
Oplossingsvideo
7. Kleurkiezer
Maak een nieuwe React applicatie aan en noem deze labo4-kleurkiezer
.
Maak een component ColorPicker
aan met de volgende functionaliteit:
- Het component bevat een
state
met als naamcolor
die een kleur bevat. Begint bij#000000
. - Het component bevat een
input
met typecolor
. Als je een andere kleur kiest, wordt de waarde vancolor
aangepast. - Het component bevat een
div
met een achtergrondkleur die gelijk is aan de waarde vancolor
. - Het component bevat ook een select met de volgende opties:
#000000
#FF0000
#00FF00
#0000FF
- Als je een optie kiest dan wordt ook de kleur aangepast.
Gebruik deze component in de App
component om de volgende pagina te maken:
Oplossingsvideo
8. Contactformulier
Maak een nieuwe React applicatie aan en noem deze labo4-contactformulier
.
Maak een component ContactForm
aan met de volgende functionaliteit:
- Het component bevat 3
input
elementen met de volgende labels:- First name
- Last name
- Het component bevat een
textarea
met de labelMessage
. - Het component bevat een
button
met de tekstSend
. - Als je op de knop klikt, wordt de volgende tekst getoond:
Thanks {firstName} {lastName}! We will contact you at {email}.
- De velden worden leeggemaakt na het versturen van het formulier.
- Zorg dat de button disabled is als de velden niet allemaal ingevuld zijn.
- Je hebt hier 5 states nodig:
firstName
(bevat de waarde van hetinput
element firstName)lastName
(bevat de waarde van hetinput
element lastName)email
(bevat de waarde van hetinput
element email)message
(bevat de waarde van hettextarea
element)confirmationText
(bevat de text die getoond wordt na het versturen van het formulier)
Gebruik deze component in de App
component om de volgende pagina te maken:
Oplossingsvideo
9. Random Cat
Maak een nieuwe React applicatie aan en noem deze labo4-random-cat
.
Maak een component RandomCat
aan met de volgende functionaliteit:
- Het component bevat een
button
met de tekstRandom Cat
. - Als je op de knop klikt, wordt er een willekeurige locatie op je scherm bepaald.
- Op die locatie wordt een afbeelding van Nicolas Cage getoond.
- Als je terug op de knop klikt, wordt de afbeelding op een andere locatie getoond.
- Je mag de volgende afbeelding tonen:
https://cataas.com/cat?width=200&height=200
Oplossingsvideo
10. Joske het vierkant
Maak een nieuwe React applicatie aan en noem deze labo4-joske
.
Je begint met Joske... Het statische vierkant:
- Joske is een rood vierkant. Maar zou ook soms graag blauw zijn! Of zelfs groen! Pas Joske aan zodat als je op hem klikt, hij van kleur verandert. De eerste keer wordt hij blauw, de tweede keer groen, de derde keer rood, de vierde keer blauw, enzovoort.
- Joske zou graag van naam veranderen en Josje worden. Maak een input veld waarin je de naam van Joske kan aanpassen. Tijdens het aanpassen van de naam wordt de naam van Joske aangepast.
- Soms wil Josje toch terug Joske zijn. Zorg ervoor dat zijn naam kan gereset worden naar Joske via een knop.
- Josje is heel de tijd triestig. Zorg voor een dropdown waarin je kan kiezen uit verschillende emoties. Als je een emotie kiest, dan verandert de emotie van Josje. De emoties worden uitgedrukt in smileys.
- Soms wil Josje helemaal geen vierkant meer zijn. Hij zou graag ook een cirkel zijn. Zorg voor een checkbox om te togglen tussen vierkant en cirkel
Josje is nu een blij cirkeltje!
joske
:)