V2 klima-bøvler med React: Det er ikke så nemt, du gamle!

16. april 2021 kl. 03:455
V2 klima-bøvler med React: Det er ikke så nemt, du gamle!
Illustration: Bigstock/TierneyMJ.
Frameworks giver, og frameworks ta’r. Det viser dagens episode i fortællingen om Version2’s rejse mod en CO2-mad-app.
Tania Andersen
Tania Andersen
Journalist
Artiklen er ældre end 30 dage
Manglende links i teksten kan sandsynligvis findes i bunden af artiklen.
Tania Andersen
Tania Andersen
Journalist

På Version2 er vi i gang med at udvikle en klimalommeregner, der kan fortælle, hvor meget CO2 indkøbet eller aftensmaden udleder.

Vi har valgt webframeworket Gatsby til appen. Det valg byggede på et ønske om maksimal platformsuafhængighed og ingen back end, og et udviklingsmiljø som kan levere noget i en fart.

I sidste episode kom vi i gang med arbejdet og valgte komponent-biblioteket Material-UI til vores brugerflade.

Vi fandt et starter-projekt til Gatsby, hvor biblioteket allerede er installeret, og fik et lille skelet på plads.

Log ind og læs videre
Du kan læse indholdet og deltage i debatten ved at logge ind eller oprette dig som ny bruger, helt gratis.
Opret brugerLog ind
5 kommentarer.  Hop til debatten

Jobs

Dine job
Vis alle

Fortsæt din læsning

Debatten
Log ind eller opret en bruger for at deltage i debatten.
settingsDebatindstillinger
5
Sune Marcher
20. april 2021 kl. 20:09

Jeg skal jo bare gange to tal, som jeg vel nok kan hente ud af DOM’en, på klassisk Javascript-facon med Document.getElementById(), og indsætte dem i Box’en på samme vis?</p>
<p>Men her har jeg gjort regning uden vært. Det er ikke helt så nemt, du gamle.

Det bliver du til gengæld glad for i længden – det dér med at hive værdier ud af DOM, sikre dig de er den rigtige type, lave udregninger og hælde dem ind igen er noget forbandet hejs.

Når du har noget der er mere komplekst end et par elementer og en simpel udregning, er det virkeligt meget værd at du har et framework der tager sig af at det beskidte UI state, og du selv kan arbejde med en fornuftig model.

Well, så fornuftigt som det nu engang kan blive i JavaScript :-)

  • more_vert
    • insert_linkKopier link
2
Ebbe Nøhr
16. april 2021 kl. 18:49

Jer ser dit foods-array som en kritisk funktionalitet. Hvis CO2-ækvivalenten er forkert og for eksempel ikke medtager gasproduktion/udslip fra os mennesker i form af CO2, metan etc. er det måske af mindre værdi. Måske en lille prætest?

  • more_vert
    • insert_linkKopier link
1
Peter SAVNIK
16. april 2021 kl. 06:58

Brug react hooks useState til at holde state for hvilke produkter du har og mængde. Du kan opdatere din state med set state når et indput felt kalder onChange. Bruger du din state i render vil den automatisk opdatere. Hvis du vil styrer hvornår en komponent opdatere kig på useEffect.

  • more_vert
    • insert_linkKopier link