Slik reiser du i tid med Reactime

ForrigeUke: Debugging med Reactime, react-native-maps, HackerNews-API og Material-UI 4.5.

📸: Jason Leung / Unsplash
📸: Jason Leung / Unsplash Vis mer

Dette var uken for gamle memes og kart, samt litt debugging🐛, enda mer kart🗺, og litt godt og blandet🍬.

Og 112 358 ting skjedde i React-verdenen!

Reactime — en tidsreisende debugger for react ⏱

Reactime er en Chrome-utvidelse og NPM-pakke som hjelper deg å debugge React apps.

Verktøyet egner seg for stateful-komponenter og prop-drilling, og har beta-støtte for Context API-et, conditional state routing, Hooks (les: useState) og funksjonskomponenter.

Hvordan fungerer det?🕵️
Reactime tar snapshots av applikasjonen din når state endrer seg. På den måten kan du hoppe til hvilken som helst tidligere state som er lagret og måle/se endringene. Andre funksjoner inkluderer å kunne se diffen for hvert snapshot og se hva som har endret seg etter hver handling. Du har også muligheten til å «låse» DOM-en og hindre endringer i state.

Oppsett
Reactime krever at to ting er på plass for at verktøyet skal fungere; Chrome-utvidelsen må være installert i nettleser og NPM-pakken må være installert og tatt i bruk i React-appen.

const reactime = require(‘reactime’);
const rootContainer = document.getElementById(‘root’);
React.DOM.render(<App />, rootContainer);
reactime(rootContainer)

Integrere Google Maps i react native med react-native-maps📍

Det er blitt sagt flere ganger at å integrere “react-native-maps” i kodebasen din ikke er så rett frem som man skulle tro 🤷

FreeCodeCamp har satt sammen en tutorial på hvordan dette ble gjort for både iOS og Android. Her blir det også gått gjennom noen utfordringer som du potensielt kommer bort i, samt hvordan å overkomme disse.

Lyst til å lage en app som henter nyheter fra HackerNews?🐱💻

Reactnewsletter.com viser til en ganske grundig guide på hvordan du kan gå frem for å lage deg en egen applikasjon for å hente HackerNews artikler gjennom deres API.

Her blir du tatt gjennom React Memo, Axios (for å lage api-kall) og styled components. Det blir også vist hvordan man tester appen ved hjelp av React Testing biblioteket.

Andre oppdateringer i React-verden!

  • Material-UI v4.5.0
    Material-UI har kommet med en ny minor-release! Ingen superstore endringer i denne runden, men mye bug-fixes og andre justeringer.
  • Nytt i DevTools🐛
    Det er nå lagt til støtte for å legge til nye props mens du ser på en komponent i DevTools.
  • Preact X
    Preact X har også kommet med en rekke oppdateringer som fragments, componentDidCatch, hooks og mer. Sjekk ut denne linken for å se alle oppdateringene.

Dett var dett for denne ukens <ForrigeUke /> 👋