Övergången från React till React Native

För ett par veckor sedan bestämde jag mig för att lära mig React Native. Jag ville testa att bygga en mini-app som hämtar data från ett api och visar det i en lista. Eftersom jag har tidigare erfarenheter av React gick jag in med inställningen att det inte skulle ta allt för långt tid att sätta mig in i. Tanken med detta blogginlägg är att beskriva min upplevelse av React Native vid övergången från React.

Första upplevelsen
För er som snabbt vill sätta er och börja med utvecklingen utan att lägga allt för mycket tid på att confa saker rekommenderar jag er att använda Expo. Expo är en samling av verktyg och bibliotek för att bygga native appar i React Native. Expo förenklar också utvecklingen och deploymentprocessen till respektive store, sist men inte minst får man också “hot reload” under utvecklingen direkt till mobilen via lan-nätverket vilket förenklar livet en hel del. Man kan säkert skriva ett helt blogginlägg om bara Expo men återvänder till det som är huvudämnet just nu.

Första upplevelsen var att man känner sig hemma och känner igen strukturen av Reacts uppbyggnad. Javascript-strukturer såsom state och props samt alla React class(lifecycle) metoder är också inkluderade, vilket gör övergången enkel och smidig.

Första skillnaden man stöter på är att det inte finns de vanliga HTML-elementen man är van vid att använda i React på webben. Detta beror på att React Native inte körs på browserns DOM-träd och därför inte behöver ha html-taggarna parsade. Istället använder React Native det abstrakta lagret “bridge” som används som tvåvägskommunikation mellan Javascript-världen och plattformsspecifika nativa threads. På det sättet kan man säga att React Native faktiskt är en riktigt native applikation. Man kan importera React Native-elementen från React Native.

ex:

React web
Import React from “React”
const TestComponent =()=>
<div>
<h1> Test component<h1>
</div>

React Native
Import React from “React”
Import {View, Text} from “react-native”
const TestComponent =()=>
<View>
<Text> Test component<Text>
</View>

Om man verkligen vill använda sig av HTML-elementen så kan man importera Webview från react-Native och inbädda html-elementen i komponenten istället. ex: <WebView html={'<p>Html tag i React-native</p>'} />.

Vanliga misstag

Det är väldigt lätt att vara React-blind och tro att allt fungerar precis på samma sätt och man sliter sitt hår för att saker inte fungerar så som de ska. Ett sådan exempel kan vara att komponenters funktionsnamn har förändrats, här nedan tar jag upp ett exempel med onClick funktionen som finns i React, men som i React Native är ersatt med onPress

Som en person som har jobbat väldigt mycket i React så kan man vara övertygad om att funktionsnamnet är onClick och därför börjar felsöka i byggprocessen när man inte får ut något felmeddelande och knappen inte fungerar som tänkt.

ex:

React web
Import React from “React”
const TestComponent =()=>
<div>
<button onClick={()=>console.log(“shoo world”)}> Click me</button>
</div>

React Native
Import React from “React”
Import {View, button} from “React-native”

const TestComponent =()=>
<View>
<button onPress={()=>console.log(“shoo world”)} title=”Press me”>
</View>

Vad är nytt

React Native ska vara ett cross-plattformverktyg för nativa mobilapplikationer men det är inte alltid sant då man ibland behöver skriva plattformsspecifika kod, vilket man inte behöver tänka på i React web, iallafall när man utvecklar för moderna browser. Jag upplever ändå att React Native är tillräcklig generaliserad för att kallas för ett crossplattform-verktyg.

Man kan enkelt importera platforms komponenten från React Native och skriva sin plattformsspecifika kod direkt innanför en komponent. Smidigt och enkelt att förstå för någon som har React-erfarenhet.

Import React from “React”
Import {View, Button, plattform } from “React-native”

const TestComponent =()=>
<View>
<Button title={Platform.OS === "ios" ? “Ios Button” : “Android Button”} />
</View>

Hantering av data

React Native kommer med inbyggd key value local-storage (“cookie storage”) med namet AsyncStorage som man kan använda för att spara data på användarens hårdvara.

Liksom React kan man använda sig av state container bibliotek så som redux för att få en det bästa utav din React Native application. Jag valde att använda mig utav Mobx-state-tree för att hantera min store. Det fungerar i princip på samma sätt som på webben.

Ett kort exempel på mobx-state-tree, smidigt och snabbt att komma igång och bygga en skalbar application utan att hela tiden behöva skapa (actions, action creators, reducers, selectors).

import { types, destroy } from "mobx-state-tree";

const Foo = types.model("foo", {
    name= types.optional(types.string, "")
}).actions(self=>({
    create(name){
    self.name = name
}
}))

const fooComponent =({store})=> {
    const name= “foo bar”
    return(<button onPress={()=>store.foo.create(name)} title=”Press me”>)
}

Slutsats

Kan man våga sätta sig i React Native applikation om man bara har sysslat med React? Utifrån min upplevelse tyckte jag att det inte var så stor skillnad alls. Såklart behöver man lära sig nya saker såsom att hantera hårdvara-permissions, hantera datat som kommer från olika hårdvara input på ett korrekt sätt, men dessa punkter gäller nog mer för all övergång från web till nativa applikationer oberoende av plattformsval.