Dette var uken for litt godt og blandet 🍬med Cheatsheets ✂📋 , Redux og hooks og hvor React er «nå». 🚀
Og 15 062 019 ting skjedde i React-verdenen!
React Cheatsheet📋
For erfarne og nybegynnere til React og økosystemet, kan det være en jungel av ukjente metoder, typer og “beste praksiser” å kode på. Heldigvis finnes det hjelp/oppslagsverk, som kan gjøre det litt lettere å finne frem.
Dette er en av de 10 rangerte artiklene for juni. Her har man en smørbrødliste av forskjellige tips og triks for utviklere, som enten akkurat har startet med TypeScript, hvor man tar ting på et litt overordnet nivå, eller så har man også en kategori for mer erfarne utviklere som allerede er godt kjent med React som bibliotek.
I wish I had this article when I first started on React Hooks
Key points of React Hooks explained as clear and simple as I could make it.
React Hooks — useFetch 🎣
React med hooks er mye i vinden og populariteten med å ta det i bruk bare øker. I den anledning har Scotch.io publisert en oversiktlig og lettfattelig måte å gjøre om fetch til en useFetch hook.
Chris Nwamba forteller om hvordan man du kan abstrahere den ordinære fetch-metoden til useFetch(). I motsetning til å bruke det native fetch API rett ut av boksen, abstraherer vi det så vi slipper unngå med omtrent bare en «one-liner». Med dette oppnår man mer oversiktlig og lesbar kode og gjenbrukbar logikk.
Higher order components
HOC er en avansert teknikk i React hvor en funksjon tar en komponent som et argument og som derav returnerer en ny komponent. For erfarne utviklere er kanskje dette gammel nytt, dog for de som ikke har hatt som lang erfaring med React, kan dette konseptet virke helt greskt når HOC blir nevnt. 🤷
Chidume Nnamdi skriver en ganske fin bloggpost, "The complete guide to HOC", om akkurat hva en høyereordens komponent er for noe og hva slags funksjon det har i React. Fordelen med å bruke dette er for eksempel hvis man repeterer den samme logikken om og om igjen.
Slik bygger de Vipps
Ny farge, nye språk og nye folk. - Det er bedre nå.
The state of React
Jared Plamer, på ReactEurope 2019 konferansen, presenterte en veldig kul måte man kan benytte seg av for å slippe at å ha masse spinnere i applikasjonen din for å skape en god brukeropplevelse.
En måte å komme seg rundt dette på er <React.Suspence>. Med <React.Suspence> kan du si til render-metoden at den skal vente (les: pause) til all den asynkrone logikken har kjørt ferdig før ting rendres for brukeren. Dette er supert for å laste inn gigantiske bilder, tunge moduler, hente data osv. Du ønsker at brukergrensesnittet venter til det er noe klart til å bli vist. På denne måten kan man bedre sikre seg at klienter med trege internett tilkoblinger så vel som de med en raske tilkoblinger får en god brukergrensesnittopplevelse.
På konferansen ble det vist til en eksperimentell demo til hvordan man kan bruke <React.Suspence> til å hente data, dog er det ikke akkurat anbefalt å snu seg rundt helt å skrive om applikasjonene sine det første.
React-Redux får hooks
Mens man snakker om hooks så har de som vedlikeholder react-redux-biblioteket også funnet ut at hooks er noe som er kommet for å bli i React, og har dermed lagt til støtte for dette. Dette er det mange som har venta på!
Det var det for denne ukens <ForrigeUke />. Takk for følget! 👋
Sanity: - Sykt at vi jobber med de største
Bli med inn i trikkestallen til det norske CMS-et, som snart inntar Silicon Valley.