Slik blir du en bedre React-utvikler i 2020

Sbanken, Sopra Steria, Bekk og Bouvet - i vår serie Kodeåret sa alle at React kommer til å dominere også i 2020.

Men React er ikke en teknologi man lærer seg én gang og kan bruke evig. Det kommer nyheter hele tida, også i verdenen av verktøy rundt rammeverket.

kode24 inviterte derfor React-guru, Bekk-konsulent, Entur-utvikler og ForrigeUke-skribent Kristofer Giltvedt Selbekk til vår podcast kode24-timen, for å snakke litt om hvordan man skal forholde seg til React i 2020!

Hele intervjuet hører du ved å abonnere på kode24-timen i podcast-appen din, eller lytte i spilleren under. Og under der igjen får du de aller viktigste punktene.

#1: Bruk Create React App

Første steg for å lage en React-app er å... lage en React-app, for eksempel med verktøyet Create React App, som setter opp prosjektet ditt med Webpack og Babel og alt du trenger. Men burde man heller sette opp React-prosjektene sine helt selv?

- Create React App har vært veldig, veldig viktig for utbredelsen av React, og ikke fullt så viktig for mange større prosjekter, forteller Selbekk i kode24-timen.

- Ulempen er mindre kontroll, så kanskje man velger å trykke på eject-knappen for å styre sitt eget opplegg.

- Men hva er det man egentlig endrer da?

- Jeg tror knapt jeg har gjort det, annet enn for å prøve. Men det kan for eksempel være om man trenger å støtte Less, svarer Selbekk.

- Så proffe kan også bruke Create React App i produksjon?

- Ja, vi bruker det masse i Entur, og jeg anbefaler alle å prøve så langt man kommer. Får man behov utover det Create React App gir, kan man revurdere behovene. Kanskje det bare er forfengelighet? Eventuelt: Hopp ut av Create React App. Man taper ingenting på å begynne med Create React App, i alle fall.

#2: Ikke bruk Redux

Det har lenge vært vanlig å bruke state-løsningen Redux sammen med React. Men mange, inkludert Selbekk, mener det ikke er nødvendig lenger.

- I gamle dager ville man typisk ha state på toppen, og sende det ned til der du brukte det. Da kunne man enten sende det ned hele veien, som tar lang tid og er klønete, eller man kunne bruke Redux, som på magisk vis fikk den ned hele treet, forklarer Selbekk i kode24-timen.

- Jeg har blitt veldig glad i Vue

- Mer intuitivt for meg som designer enn React, forteller Ukas Koder og frilanser Elise Jakobsen.

Men for dette har Reacts egen context tatt over, mener Selbekk, som gir deg en snarvei for å sende state nedover i komponentene dine.

- Så Redux er på vei ut av mange prosjekter, og i alle fall ikke på vei inn i så mange nye prosjekter. Vi bruker det masse på Entur, og ofte på mye kortere avstander, for eksempel bare for å sende en verdi til en gruppe radioknapper.

#3: Lær deg Hooks

Du har sikkert hørt om hooks i React. De gir blant annet muligheter til funksjonskomponenter som tidligere bare var tilgjengelige i klassekomponenter, og Selbekk er solgt for lengst.

- Hooks gjør ting lettere å lære seg. I gamledager hadde man klasser i et språk som egentlig ikke hadde klasser, og vi måtte forholde oss til this, huske å binde this på riktige steder, og jeg slet mye med det, sier Selbekk i kode24-timen.

- Så kom hooks, som lar deg bruke alle de fine funksjonene i React, som state-håndtering og sideeffekter, med egne funksjoner inne i funksjonskomponenter. Det blir mindre å skrive, og er bare fryd og gammen, mener han.

- Jeg har ikke skrevet en klassekomponent på et år, tror jeg. Det er det mange grunner til, jeg gifta meg og fikk barn blant annet, men hooks hjalp til!

#4: Bruk Suspense

I tillegg til et bedre context-API, er suspense enda en grunn til at Redux kan ha utspilt sin rolle. For brukte du Redux til å cache data fra serveren tidligere, kan heller suspence løse mye av problemet for deg.

- Når appen din rendrer før dataen din er klar, kastes en exception, for å for eksempel vise en spinner, forklarer Selbekk i kode24-timen.

Altså i stedet for å ha "isLoading"-variabler i state-en din for å håndtere den slags.

- Det er foreløpig bare ute i Reacts eksperimentelle versjon, men de bruker det på nye facebook.com. Jeg snakka med noen på ReactConf som lager den, og de tester den på én prosent av brukerne, som er mange millioner, og de bruker den altså i produksjon.

Hva Suspense er, hvordan det funker og hvorfor du skal bruke det

ForrigeUke: Preact 10.1.0, JavaScript visualisert, kvinnene bak React og visuell Suspence-guide.

#5: Ikke bry deg for mye

Selv om ikke denne lista ser veldig lang ut, er det flere nyheter her som krever at man endrer tankemåten sin litt, og bygger React-apper på en litt annen måte enn før. Med andre ord: Det krever litt å bruke det nyeste.

- Men må man alltid bruke det nyeste om man skal være en god React-utvikler?

- Nei, jeg synes ikke det. Man må ikke det. Men jeg liker å gjøre det, fordi jeg er super-React-nerd og får mye personlig glede av det, og som faggruppeleder i for React i Bekk må jeg kunne svare på spørsmål rundt det, sier Selbekk i kode24-timen.

- Men funker det, så funker det. Vi utviklere har en tendens til å grave oss ned i små detaljer, men burde heller tenke "Funker det greit nok? Kjør på."

Vi snakka med Selbekk om mye mer enn dette, altså, og håper du har lyst til å abonnere på kode24-timen for å høre hele intervjuet! Har du forslag til hvem vi kan invitere neste gang? Send oss en epost, da vel! 👋

Hør podcasten kode24-timen, hver fredag

Slik finner din nye favoritt-podcast for norske utviklere.