10 React Hooks du bare MÅ prøve

ForrigeUke: Massevis av Hooks-nytt, server side rendering i Create React App og bedre dokumentasjon på vei.

📸: Joanna Kosinska / Unsplash
📸: Joanna Kosinska / Unsplash Vis mer

Dette var uken for gode vitser 😂, teite vitser 🙄og en vits av en unnskyldning.

Og 1028 ting skjedde i React-verdenen!

State Reducer-patternet med Hooks

Å lage fleksible komponenter er utrolig viktig, men også vanskelig. Hvordan kan man ha intern logikk i en komponent, og allikevel la konsumenten overstyre viktige biter?

Familiefar og nyfødt lærer-tryne Kent C. Dodds har satt seg ned og oversatt en av hans favoritt-patterns — state reducers — til å bruke hooks. Så hva er en state reducer? I all hovedsak er det en måte å designe APIer på som gjør at konsumenten kan koble seg på og overstyre intern logikk når det trengs.

Artikkelen forklarer det hele mye bedre enn jeg noensinne kan håpe på. Anbefales virkelig!

Hvordan legge til server side rendering i Create React App

Det mest populære bootstrapping-biblioteket på weben er hva Facebook promoterer som offisiellt — Create React App. Det er et flott bibliotek, og har gjort underverker for alt fra bug-reports (fordi det nå er veldig enkelt å reprodusere en feil) til tutorials (har du lagt merke til at de ikke lenger starter med 20 minutter om hvordan du setter opp Webpack og Babel?). Det lar deg komme i gang med React-ingen din på null komma niks.

En litt kjedelig nedside er at man ikke får støtte for såkalt server-side rendering (forkortet SSR) — at React-appen din rendres på serveren, sendes som statisk HTML, for så å bli “rehydrert” med interaktivitet når JavaScripten blir lastet ned. Men hva skal egentlig til for å komme så langt?

Det viser seg — overraskende lite egentlig. MDX-skaper James K Nelson har skrevet alle endringene som må på plass for å gå fra “vanlig Create React App” til “Create React App med SSR-støtte” i en enkelt commit.

Husk — server-side rendering er ikke verdens enkleste ting å gjøre selv. Om du trenger denne typen funksjonalitet, kan jeg anbefale f.eks. Next.js istedenfor. Uansett — morsomt å se hva som skal til!

10 React Hooks du bare MÅ prøve

Jepp, dette har blitt en sånn artikkelserie nå. Dybdeintervju med Bahareh og Per neste liksom. Neida. Men jeg kom over en fantastisk artikkel som lister opp 10 flotte hooks man egentlig fint kan skrive selv — men som noen har skrevet for deg.

Mine favoritter var react-fetch-hook , use-onClickOutside og react-use-intersection-observer , men ta gjerne en titt over resten også!

Validering for hooks-æraen

Skjemavalidering er en spennende utfordring. De fleste apper har forskjellige behov, og det er vanskelig å lage noe som fungerer bra for alle.

Costa Ricaner og Hooks-entusiast Kevin Wolf har prøvd å løse valideringsproblematikken med noen svært kløktige hooks. I Wolfs nye bibliotek Formal (veldig clever) er det ingen render-props eller custom input-komponenter (som i de fleste andre valideringsbibliotek), men kun et enkelt og intuitivt hooks-basert API.

Jeg synes dette ser veldig lovende ut! Ta en titt, og prøv det ut på ditt neste hobby-prosjekt.

Lær Hooks av Dan Abramov!

Hvis du hører begrepet hooks titt og ofte i denne bloggen, så er det fordi den er skrevet av en haug med React-nørds. Du trenger ikke være like investert! Hvis du for eksempel ikke har prøvd deg på Hooks enda, så har jeg en liten godbit på lager.

«Hvis du ikke har prøvd deg på Hooks ennå, har jeg en liten godbit på lager.»

Partysvenske og Fun Fun Functions-tryne Mattias Petter Johansson (aka mpj) hadde gleden av å bli opplært av selveste Dan Abramov på live-stream! Du kan se hele sulamitten her!

Nytt React Core-teammedlem

Selv om React er åpen kildekode, er det et helt dedikert team med smartinger hos Facebook, som jobber med å bringe biblioteket fremover. Det er blant annet der Dan Abramov, Bryan Vaughn, Seb Markbåge og Andrew Clark jobb!

Nå får dette teamet hjelp til dokumentasjon og community-bygging, takket være Rachel Nabors! Rachel har tidligere jobbet med W3C og Microsoft, og skal fokusere på å gjøre dokumentasjonen til React så god som overhodet mulig.

Du kan lese litt mer om hvorfor hun joiner teamet på bloggen hennes.

Det var det vi hadde for dere denne uken. Jeg synes det var en bra uke, jeg! Velkommen tilbake neste uke for mer moro ❤