En av mine første React-apper: Kalkulator!

Freecodecamp.org er etter min mening en veldig god ressurs for alle som vil lære å lage websider – fra helt grunnleggende HTML og CSS til litt mer avansert frontend- og backend-utvikling.

Ett av prosjektene under «Front End Libraries Certification» på Freecodecamp var å lage en JavaScript-kalkulator – med for eksempel React. Dette var ganske lærerikt, og selv om man skulle tro at det å lage en kalkulator er lett, brukte jeg faktisk litt tid på dette prosjektet.

Etter hvert som jeg i månedene etter lærte mer avansert React, fikk jeg lyst til å gjøre om appen til å gå bort fra klassebaserte komponenter og heller ta i bruk funksjonelle komponenter (det er den veien «best practice» i React er på vei, såvidt jeg har skjønt). Derfor skrev jeg om appen til å bruke funksjonelle komponenter og også ta i bruk «hooks», som ble introdusert i React versjon 16.8. Nærmere bestemt useState for å holde styr på state (hvilken verdi vises i displayet på kalkulatoren, hvilken verdi er brukeren i ferd med å taste inn, osv.).

Hooks og funksjonelle komponenter gjorde kalkulator-koden litt mer oversiktlig, men skulle jeg skrevet den på nytt nå ville jeg nok ha gjort ganske mye annerledes. Ikke minst ville jeg ha brukt CSS Grid til knappe-layouten på kalkulatoren, i stedet for å ha knapper i fast piksel-størrelse.

Du kan prøve kalkulatoren her eller ta en kikk på kildekoden på min Github-profil.