Öka produktiviteten hos ditt team genom att använda dessa verktyg i ditt React projekt

Nedan finner du fem verktyg som du bör använda för att hålla din kodbas i schack samtidigt som du och ditt team har ett bra arbetsflöde när ni jobbar med React.

Illustration of a woman turning gears

Sentry

Var och när smäller det i vår kodbas?

Sentry är ett fantastiskt verktyg som gör det enkelt att i realtid kunna hålla koll på fel som uppstår när användare besöker din sajt eller app.

Med Sentry kan du bland annat:

Enkelt integrera de flesta populära språk/ramverk
Tracka deployments och commits så att du vet vad som orsakat eventuella fel
Hålla koll på events/fel i realtid och få mail eller ping via Slack

Du har med all säkerhet redan integrerat Google Analytics i din stack. Det hjälper dig att hålla koll på vad besökare gör på din sajt och framförallt var de kommer ifrån. Du kan skapa flöden för dina användare och hålla koll på var i flödet användarna försvinner.

Med Google Analytics kan du bland annat:

Hålla koll på vilka besökare som är inne på din sajt just nu och vad de gör
Ta reda på ifall din trafik är köpt, länkad eller organisk
Se var och när dina besökare försvinner i olika flöden

De flesta har nog bara skrapat på ytan på vad man faktiskt kan göra med Google Analytics.

MobX

Ett enkelt sätt att hålla och dela state i och mellan komponenter

För en tid sedan så var Redux standard biblioteket för att hantera state i React-appar. Redux är ett kompetent verktyg för att hantera state på ett förutsägbart sätt men det för med sig en hel del "boilerplate" kod och kognitiv last. Nu när man lanserat React Hooks och liknande verktyg så inser fler att Redux i många fall kan vara ett för stort åtagande för de flesta projekt som inte har nytta av alla fördelar som Redux medför.

Där tycker vi att MobX fyller ett tomrum. MobX är ett enkelt verktyg som kan jackas in i ett React-projekt stegvis och underlättar state-hantering genom att kapsla in logik för att uppdatera data och notifiera komponenter (i något som kallas "Store") när datat har uppdaterats.

Fördelarna är att mängden boilerplate kod minskar i projektet och att det är enklare att onboarda nya utvecklare då koden i princip ser ut som när man skickar med state via props

Axios

Ett enhetligt sätt att skriva HTTP klienter

Fördelen med Axios är att man kan använda sig utav samma mönster och syntax för att prata både med backend (t ex: Express/Node) och klient (React) och native-klient (React Native).

Ta ett exempel där man skriver ett HTTP/API-lager för att hämta data från backend för t ex Server Side Rendering eller för att hämta data till klienterna (React och React Native), då kan alla klienter använda dela samma kod. ✌🏼

React Developer Tools

En enkel browser extension som förenklar felsökning och förbättrar insyn i dina komponenter.

Med React Developer Tools kan du hoppa in och kika i varje komponent och se hur t ex state och props ser ut. Mycket skönare än att behöva skriva console.log lite här och var.