--- title: "Workshop i React: Skjemaer" url: "https://www.bekk.christmas/post/2024/13/workshop-i-react-skjemaer" authors: ["Marcus Haaland"] published: "2024-12-13" updated: "2024-12-14T18:52:27Z" language: "nb-NO" type: "article" tags: ["React", "Frontend"] series: "Workshop i React" --- # Workshop i React: Skjemaer Det meste på weben er skjemaer. Når du logger inn? Skjema. Når du velger bussrute? Skjema. Når du søker etter morsomme kattevideoer på YouTube? Jepp; skjemaer. Skjemaer er overalt, og som utvikler har du makten til å gjøre dette til en vond eller en god opplevelse - enten det er for sluttbruker eller deg som skal lese koden. I denne luka lærer du hands-on om hva du trenger å vite om skjemaer. ## Kort fortalt Skjemaer i React kan bygges både manuelt og med biblioteker som React Hook Form, der Zod brukes til validering og TanStack Query til å hente og oppdatere data. Du sitter igjen med en praktisk forståelse av hvordan skjemaer kan gjøres både brukervennlige og håndterbare i kode. - **Passer for:** React-utviklere som jobber med skjemaer - **Fint å kunne fra før:** Grunnleggende React og kjennskap til hooks _Generert med KI_ ## Hvorfor bry deg om skjemaer? Skjemaer er overalt og kommer i mange former (pun intended). De kan være enkle, som ved et innloggingsskjema, eller komplekse, som ved et spørreskjema på flere sider. Uansett form, må skjemaer være forståelige. Som utvikler kan du gi brukeren beskjed når hen skriver noe galt eller løsningen har feilet. Eller når handlingen er registrert, og til slutt ender opp som en suksess. Du kan også forenkle brukeropplevelsen, ved å legge inn data som allerede er registrert, eller som du kan implisere fra andre kilder. Ved forsøk på å gjøre skjemaer forståelige og enkle for brukeren, kan koden bak skjemaene bli komplisert. I denne workshopen skal vi se på hvordan du også kan gjøre koden leselig for deg, noe kollegaene dine vil takke deg for. ## Workshop i skjemaer I denne workshopen får du selv implementert et skjema. Først med vanilla React, så du ser stegene for å få til viktig funksjonalitet. Så vil du bruke skjema-biblioteket [React Hook Form](https://react-hook-form.com/), hvor du får mye funksjonalitet ut av boksen. Dette vil vi bruke sammen med biblioteket [Zod](https://zod.dev/), som forenkler validering av data. I tillegg vil vi hente frem det vi [lærte i forrige workshop](https://www.bekk.christmas/post/2024/10/workshop-i-react-datafetching), nemlig å hente og mutere data med TanStack Query. Her vil du oppdage noen fallgruver du bør kjenne til. Før du starter, er det noen ting du bør vite om workshopen: - **Oppgavene ligger i src/[oppgave]:** Det er kun disse filene du trenger å endre. Du leser oppgave1 i `Oppgave1.tsx`, og ser fasit i `Oppgave2.tsx` og så videre. Unntaket er når det fins en egen fasit-fil, e.g. `Fasit4.tsx`. Da ser du fasiten, uten en ny oppgave. - **Løs bonusspørsmål**: I tillegg til å løse de rene kodeoppgavene, prøv også å besvare bonusspørsmålene på hver oppgave. Da lærer du mer kontekst til skjemaer. Det fins ingen fasit i løsningen for disse oppgavene. - **Hvordan ta workshopen videre**: Reflekter også over forskjeller i din løsning, "fasiten" og kode i eget prosjekt. Er det noen scenarier "fasiten" ikke tar hensyn til mangelfull? Er det noen forenklinger i "fasiten" du har lyst til å ta i bruk? - **Jeg blir veldig glad for tilbakemeldinger**: Om du finner noen feil eller har forslag til forbedringer, gjerne lag et issue, lag en PR eller send meg en melding på [LinkedIn](https://www.linkedin.com/in/marcus-haaland-3706b3162/). 👉 For å starte workshopen, kloner du GitHub-repository, leser readme, kjører opp applikasjonen og leser av oppgavene. Workshopen finner du her: [https://github.com/haalmarc/form-workshop](https://github.com/haalmarc/form-workshop) ## Videre lesing - [React Hook Form er det mest populære skjemabiblioteket](https://2023.stateofreact.com/en-US/libraries/component-libraries/#form_libraries). I React 19 introduseres en ny måte å lage skjemaer på, med serverfunksjoner og useActionState. Du kan lese mer om forskjellen her: [https://blogg.bekk.no/forrigeuke-uke-47-%C3%A5r-2024-60d5b76f8316](https://blogg.bekk.no/forrigeuke-uke-47-%C3%A5r-2024-60d5b76f8316)