Hvad du har brug for at vide for at begynde at opbygge mobilapps i React Native

Intet er bedre end at oprette apps med JavaScript. Medmindre du bygger mobilapps. JavaScript er til opbygning af webapps, og det var ikke muligt at bruge det til at opbygge native mobilapp. Det var svært for enhver webudvikler at dykke ned i opbygningen af ​​indfødte mobilapps. De skal lære Java eller Objective-C ... eller ethvert programmeringssprog, der blev brugt til dette formål.

Det vil sige indtil Facebooks React Native brød denne barriere. React Native leverer store fordele som at opbygge apps på tværs af platforme til både Android og IOS. Før React Native måtte du skrive din kode to gange - en til Android og en til IOS. Det er ikke længere tilfældet.

Denne artikel er en introduktion til verdenen af ​​React Native, så gør dig klar?.

Hvorfor reagere indfødte?

Ret, så hvorfor reagere indfødte og ikke nogen anden teknologi?

Det giver os mange løsninger, som andre teknologier ikke har råd til. Her er hvad du kan gøre med React Native:

Opbygning af native mobilapps

React Native giver os mulighed for at skrive native apps i JavaScript til både iOS og Android. Det giver os muligheden for at bruge alle de indbyggede komponenter som bevægelser, push-underretninger, kamera og placering. Der er nogle andre JavaScript-biblioteker til opbygning af mobilapps som ionic eller PhoneGap. Men disse biblioteker bruger Webview, og de apps, der er bygget med disse teknologier, er ikke native.

Opbygning af mobilapps på tværs af platforme (iOS og Android)

Ja, med React Native kan du oprette mobilapps, der kan køre på iOS og Android. Dette er en af ​​de store fordele ved React Native. Før Facebook oprettede det, var du nødt til at oprette din app to gange og med anden kode: en til iOS ved hjælp af Swift eller Objective-C og en til Android ved hjælp af Java eller Kotlin. React Native løste dette problem, så du kan opbygge din React Native-app, og den fungerer i iOS og Android. Fantastisk! ?

Skriv din kode alt i JavaScript og React

Mens du bygger React Native apps, skriver du faktisk JavaScript. Reactjs-kode giver os mulighed for at oprette fantastiske brugergrænseflader og brugeroplevelseskomponenter.

Kom godt i gang med react-native

At starte med react-native kan være spændende, men samtidig kan det være lidt forvirrende. Det første trin er at installere det, og der er flere måder at gøre det på:

Brug af expo-cli:

expo-cli er et kommandolinjeværktøj. Det downloader og installerer React Native-kedelpladen til dig, integreret med expo API (se her for installationsvejledning). Det er en nem måde at opbygge en React Native-app på, og det er den anbefalede måde, hvis du lige er startet med React Native.

expo-cli giver dig mange muligheder. Du kan køre og teste din applikation på en mobilenhed uden nogen konfiguration. Scan en QR-kode, så åbnes din app med expo-mobilappen. Du kan udforske andre mobile applikationer bygget med React Native i browseren via en webgrænseflade kaldet appertize!

Brug af react-native-cli

React-native-cli gør det samme job som expo-cli, men med en anden tilgang og ekstra fordele. De apps, der er installeret med react-native-cli, giver os mulighed og mulighed for at oprette vores egne native-moduler i vores app. Du behøver ikke at skubbe din applikation ud for at være i stand til at oprette native moduler. Ved at skubbe ud kan du bruge native-moduler og skrive, du ejer ( vi vil undersøge, hvordan man skriver native-moduler i en anden del ).

Udvikling af React Native-apps på forskellige platforme er en anden proces. Nogle gange har vi brug for en bestemt konfiguration til en bestemt platform. For eksempel for at bygge til Android skal du bruge Android SDK, så lad os undersøge, hvordan dette fungerer!

Opbygning af mobilapps til Android

Der er nogle krav, du skal installere for at begynde at udvikle til Android. Først skal du downloade og konfigurere både Android SDK og Android Studio. Du kan downloade dem med dette link her.

Efter download af Android Studio skal du også installere nogle API'er. For at gøre det skal du åbne Android Studio, og klik derefter på fanen Indstillinger, dette vindue åbner:

Først skal du kontrollere ✔️platformen, du vil have din reaktive til at understøtte, under fanen SDK-platforme (for eksempel Android 6.0 Marshmallow). Skift derefter til SDK-værktøjer.

Og kontrol Android SDK Build-Tools, Android SDK toolsog google play service. Under Android SDK Build-Tools skal du vælge alle platforme:

  • Fra 19.0.0 til 20.0.0
  • Fra 22.0.0 til 24.0.0
  • Og 25.0.2, 26.0.1 til 26.0.3
  • 27.0.3 og 28.0.1 til 28.02

Nu er vi færdige med SDK og Android Studio. Det næste trin er emulatoren. Emulatoren (eller simulatoren) er, hvor vi skal køre og teste vores app. Der er mange forskellige valg.

Du kan bruge Android Studio-emulatorer. Du tjekker her, hvordan du opretter en emulator, der skal bruges i Android Studio. Ærligt talt har jeg aldrig brugt dem. Jeg foretrækker Genymotion eller en rigtig enhed i stedet.

Genymotion

Genymotion er en desktop applikation, der giver en virtuel emulator til at teste din applikation. Jeg kan godt lide at bruge det meget, fordi det er hurtigt. ? Det giver dig muligheder for at oprette en tilpasset telefon med de funktioner, du kan finde i enhver rigtig enhed. Aktivér f.eks. Wifi, placering og kamera. Jeg kan varmt anbefale, at du bruger Genymotion over Android Studio-emulatorer eller enhver anden emulator.

Brug af rigtige enheder

Intet er bedre end at bruge rigtige enheder til at køre og teste din app. Dette skyldes, at det lader dig vide, hvordan din applikation ser ud på en rigtig enhed. Det får dig til at føle virkeligheden i dit arbejde på en måde, som den virtuelle enhed ikke giver. Så hvis du har mulighed for at bruge en enhed, så tøv ikke.

Indtil dette er det ok med Android - men hvad med iOS?

Opbygning af reaktive native apps til IOS

Kørsel af React Native til iOS ser ikke meget anderledes ud end Android. Den samme React Native-app, der kører i Android, kan også køre på iOS med nogle undtagelser.

For eksempel, hvis du vil køre på en iOS-enhed, skal du have en MacOS. Når vi taler om MacOS og iOS, behøver du ikke downloade ekstra afhængigheder som SDK til Android for at køre React Native på iOS.

Med hensyn til emulatorer har Xcode pæne emulatorer, som du kan bruge til at teste din React Native-app. Du kan tjekke dette indlæg, der viser nogle tricks, der kan bruges med emulatorer.

I MacOS kan du køre både iOS og Android. Du kan helt sikkert installere Android Studio og Genymotion på MacOS. Denne mulighed findes ikke på en pc, hvor du kun kan køre Android-emulatoren, men ikke en iOS-emulator. Så du er heldig? Hvis du har en MacOS - god fornøjelse?

Så nu har vi miljøet til at oprette en React Native-app, og vi har installeret alt, men hvordan er React Native-koden skrevet? Det er så simpelt: du vil faktisk skrive Reactjs-kode.

Du kan tjekke den officielle guide for at få lidt øvelse med React Native. Jeg anbefaler denne fantastiske artikel at starte "React Native YouTube Replica." Det vil guide dig trin for trin for at oprette din første React Native-app.

Wow! Indtil nu har du det godt, og du koder med react-native. ? Men du skal kontrollere og debugge dine fejl og se logfilerne til din kode. Y eah logs !! Så vi har brug for en d ebugger! Hvordan debugger du med React Native?

Fejlfindingsreaktion-native

Fejlfinding af din kode er meget vigtig, ikke kun med React Native, men med ethvert andet programmeringssprog. Så i din React Native-kode skal du vide, hvad der foregår. Der er mange forskellige måder at fejle en React Native-app som:

Fejlfind med Chrome-værktøjer

React Native giver dig mulighed for at bruge Chrome devtools til at se logfiler i din app. For at debugge med Chrome og aktivere fejlretningstilstand i din emulator skal du bare klikke på tastaturet Ctrl+ m.

Denne skærm vises:

Og vælg derefter Debug Js Remotely. Dette åbner en fane i Google Chrome med denne adresse //localhost:8081/debugger-ui/. Det er til brug af Chrome devtools, hvad med andre muligheder?

Brug af React-native-debugger

React-native-debugger er et fantastisk værktøj til at debugge React Native-kode. Det er en desktop applikation, der giver dig mange fordele. Den leveres med Redux devtools og React-devtools integration. Du kan også fejle stilen. Det er faktisk den bedste debugger til React Native, og det er den, jeg bruger. Normalt er den tilgængelig på MacOS, Windows og Linux. Tjek installations- og integrationsvejledningen.

Jeg synes det er nok på dette tidspunkt. Dette er den første del af den absolutte guide til opbygning af mobile apps med React Native. I den næste del skal vi dykke ned i flere tekniske tip og spørgsmål som hvordan vi kan bruge native komponenter, React native API, integration med andre biblioteker, Redux, GraphQL og lignende. Så abonner på denne mail-liste for at holde dig opdateret, når den næste del kommer ud. Tak for din tid. ?

Kan du altid finde mig på Twitter?