Les 2: Class Components
Je bouwt voort op de oefeningen die je vorige oefeningenreeks gemaakt hebt. Je kan de oplossingen hiervan op Canvas vinden. Maak nieuwe Exercise componenten aan voor elke oefening.
Verbetering op de vorige oefeningen
Je hebt vorige oefeningenreeks voor de MultiplicationTable en Rater componenten arrays gebruikt. Deze hebben toen geen key meegekregen. Als je in de console kijkt zal je hier dan ook warnings over zien.
Deze elementen gaan nooit van structuur veranderen, elk rij in de maaltafel zal steeds dezelfde waarde bevat (x * y = z), gebruik de getallen in de maaltafel (z) als key. De rater heeft steeds exact evenveel sterren, deze sterren staan steeds in dezelfde volgorde, hier kan je dus een oplopende index gebruiken als key.
Oefening 6: Calculator
Download het startbestand calculator.js en plaats het in je project. Als je het React project start moet je voorlopig het onderstaande zien (de andere oefeningen zijn weggelaten in het screenshot).
Bouw de functiecomponent Label (het scherm van de rekenmachine) verder uit. Deze heeft een property text. Als je de component oproept vanuit Calculator moet je oefening er als volgt uitzien (gebruik hardgecodeerd voor deze oefening).
Bouw de functiecomponent Button verder uit. Deze krijgt een property value. Onderstaande array bevat alle knoppen die in de rekenmachine moeten verschijnen, in de juiste volgorde. Gebruik deze array om de 12 knoppen te renderen. Zorg dat de knoppen werken en de aangedrukte knoppen ook zichtbaar worden op het label. De "C" knop maakt het volledige scherm leeg en de "Del" knop verwijder het laatst ingedrukte cijfer.
const buttons = ["7", "8", "9", "4", "5", "6", "1", "2", "3", "C", "0", "Del"];
Oefening 7: BMI Calculator
Download de startbestanden bmiCalculator.js en range.css en plaats deze in je project. Als je het React project start moet je voorlopig het onderstaande zien (de andere oefeningen zijn weggelaten in het screenshot).
Werk eerst de Label component uit. Deze component heeft twee properties, name en value. De component toont de tekst "name: value".
Bouw de component Slider verder uit, deze heeft drie properties, value, min en max. Value geeft de huidige waarde van de slider, min de minimale en max de maximale waarde. De Slider is een invoerelement van het type range als je hiermee niet bekend bent kan je op https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/range meer info vinden. Gebruik deze twee componenten nu om het volgende te realiseren, kies zelf realistische minimum en maximum waarden.
De structuur van deze component is als volgt:
Zorg er tenslotte voor dat de sliders automatisch updaten. Telkens de hoogte of het gewicht aangepast wordt moet ook de BMI aangepast worden. De formule om de BMI te berekenen vindt je ook in het startbestand.