Share
Verktøy, biblioteker og tjenester er en viktig del av hver utviklers liv, uansett hvilket miljø du utvikler for. Og React Native er ikke noe unntak. I denne artikkelen vil jeg gå gjennom noen av de beste brukergrensesnittene, bibliotekene, komponentene, utviklingsverktøyene og webtjenestene som vil gjøre deg til en lykkeligere og mer produktiv React Native-utvikler.
Visual Studio Code er et tekstredigeringsprogram som har innebygd IntelliSense, debugging og Git integrasjonsfunksjoner. Det som gjør det veldig bra for React Native-utviklingen, er dens React Native Tools-utvidelse. Dette lar deg utføre React native kommandoer fra kommandopaletten, legge til IntelliSense for React native APIer og feilsøkingskode i selve redigeringsprogrammet.
For mer informasjon om hvordan du konfigurerer Visual Studio Code for React Native, sjekk ut dette blogginnlegget: VSCode for React Native.
Hvis du bruker Atom, kan du installere Nuclide-plugin. Dette pluginet ble spesielt opprettet for å jobbe med React Native, Flow og Hack-prosjekter. Den har en innebygd debugger og element inspektør med alle funksjonene du er vant til i Chrome Developer Tools. Strømstøtte betyr at du får autofullføring, typehinting og kodediagnose ut av esken.
Hvis du vil utforske flere IDE- og redigeringsalternativer, sjekk ut dette blogginnlegget på Top 10 Editors for React Native.
Utviklingsverktøy har et vidt omfang, så jeg vil gruppere hvert verktøy basert på fokus:
Når det gjelder SDKer for React Native, slår ingenting ut. Expo lar deg enkelt prototype en app uten behov for Android Studio eller Xcode. Den inneholder et sett med komponenter og biblioteker som hjelper deg med å øke hastigheten på utviklingen.
Expo-arbeidsflyten består av følgende:
Det er ikke nødvendig å koble telefonen til datamaskinen din. Skann bare QR-koden på din terminal ved hjelp av Expo-klientappen, og den vil automatisk kjøre appen din. Hvis du bruker Genymotion, støtter Expo det også.
Den eneste ulempen når du bruker Expo, er at du ikke kan inkludere en tilpasset pakke som bruker enhetens innfødte funksjonalitet. Expo inneholder allerede en rekke vanlige innfødte pakker som kameraet, Facebook og kart. Men hvis du trenger å bruke en pakke som de ikke allerede støtter, må du "eject" appen din. På det tidspunktet blir appen din som om den ble opprettet med reagere-native init, og du vil også miste muligheten til å kjøre den ved hjelp av Expo klient-appen.
Det er viktig å sjekke kvaliteten på koden, og derfor finnes verktøy som ESLint. I et nøtteskall gjør et linting verktøy at du kan være mer konsistent med koden ved å sjekke den mot en stilguide. Et eksempel på en slik stilguide er Airbnbs JavaScript Style Guide, som angir regler for hvordan JavaScript-kode skal skrives. Linting-verktøyet kontrollerer deretter koden din mot disse reglene for å sikre at de er fulgt. Det er også en stilguide for React-prosjekter.
Hvis du bruker Sublime Text, er det en god veiledning om hvordan du kan konfigurere den slik at du kan få tilbakemelding i sanntid om kvaliteten på koden mens du er koding: Sublime Linting for React og ES6. Hvis du bruker en annen rediger eller IDE, må du se etter et tilsvarende plugin som bruker ESLint.
Hvis du vil legge til statisk typing for prosjektet ditt, kan du bruke Flow. Flow legger til statisk typing på toppen av JavaScript uten at du må gjøre noen endringer i din eksisterende kodebase. Dette skyldes at Flow forsøker å avlede typen når det er mulig. For nye prosjekter, anbefales det imidlertid at du spesifikt spesifiserer typen for å høste fordelene med å bruke Flow.
For å komme i gang med å bruke Flow, er det en veiledning om hvordan du kan sette opp Flow for dine Native-prosjekter.
Enzym er et testverktøy for React, som gjør at du kan hevde, manipulere og krysse komponentens utgang. Det gir metoder som grunt() å "grunne" gjengi komponentene dine, finne() å krysse den gjengitte komponenten, og forvente () å hevde rekvisitter eller innhold gjengitt i komponenten.
Du kan følge denne veiledningen til å bruke enzym til testkomponenter i React Native for å gjøre React Native app testbar med enzym. Hvis du er ny til enzym, kan du lese denne veiledningen om Testing React Components med enzym og mokka.
Reactotron er en stasjonær app som lar deg feilsøke React and React native apps. Noen av de viktigste funksjonene inkluderer inspeksjon, modifisering og abonnement på app-staten, sporing av HTTP-forespørsler gjort gjennom appen, benchmarking av appens ytelse og sporingsfeil. Hvis du bruker Redux, kan du til og med sende handlinger og spore sagaer fra Reactotron.
Snowflake er en boilerplate for full-stack React Native-utvikling. Den inneholder alt fra front-end til baksiden av appen. Så hvis du bare vil ha et verktøy som kan hjelpe deg raskt, så kan du finne Snowflake nyttig. Du kan lese notatene for mer informasjon om hvilke pakker og verktøy som brukes til å sette opp det.
Alternativt kan du bruke Ignite. Det er et kommandolinjeværktøy som også inneholder en boilerplate, generatorer, stilveiledning for UI-komponenter, API-testverktøy og mer.
React Native kommer allerede med brukergrensesnittkomponenter som du kan bruke til brukerinteraksjon. Problemet er at de bare har den mest grunnleggende styling for at hver komponent skal skille seg fra hva den er (for eksempel knapp, avkrysningsboks). Hvis du vil legge til tilpassede stiler, må du skrive din egen CSS-kode.
Dette er hvor NativeBase kommer inn. Det lar appen din få et naturlig innfødt utseende ved å implementere samme design som brukes i innfødte Android-programmer (Material Design) og iOS (Human Interface Guidelines). Ut av boksen får du tilpassede komponenter som Flytende Handlingsknapper, Spinnere, og best av alt, danner komponenter.
React Native har et stort samfunn bak seg, så det er mange biblioteker og komponenter du kan bruke. Vi kunne tilbringe hele dagen og snakke om disse, for å holde ting kort, fokuserer jeg på følgende områder:
React Navigation lar deg enkelt implementere navigering i dine React native apps ved hjelp av de innebygde navigatørene, for eksempel Stack Navigator, Tab Navigator og Drawer Navigator. Det er ikke alt, men i tillegg til navigering i appen inkluderer den også dyp kobling, Redux-integrasjon og webintegrasjon. Dette gjør det til et veldig robust bibliotek for å implementere navigasjon.
MobX gir funksjonaliteten til å oppdatere og administrere app-tilstanden som brukes av React. Det som gjør det til en god kandidat for statsforvaltning i React, er enkelhet og testbarhet. Den har også en kort læringskurve, slik at ting som asynkfunksjoner og beregnede verdier allerede håndteres bak kulissene.
For større og mer komplekse applikasjoner anbefales Redux fortsatt. Dette er fordi MobX er veldig liberal, ikke ulikt Redux, som gir strenge retningslinjer for hvordan staten skal styres. Så det er et klokere valg for større prosjekter, med flere som jobber med dem.
React Native har allerede en animasjons-API innebygd i den. Faktisk er det ikke bare en, men to APIer for å jobbe med animasjon: Animert API og LayoutAnimation. De to er veldig kraftige, men kan være tungvint, spesielt hvis alt du vil gjøre er å bruke grunnleggende animasjoner, for eksempel å flytte et objekt opp og ned eller få det til å hoppe. I slike tilfeller kan komponenter som Animatable komme til nytte.
Her er en liste over komponenter og biblioteker som ofte brukes i React native-prosjekter. Disse er kompatible med både Android- og IOS-enheter:
Du kan bygge serverløse applikasjoner og lette utplasseringen av dine React native apps ved å bruke webtjenester. Det er en overflod av webtjenester der ute, men jeg vil fokusere på følgende områder:
Realm er en sanntidsdatabase med fokus på mobilapper. Den inkluderer funksjoner som toveis datasynkronisering, offline-førstegenskaper og datadrykk. Realm Mobile Database er åpen kildekode og kryssplattform, noe som betyr at du kan være vert for Realm Object Server på din egen server og deretter bruke Realm JavaScript-biblioteket gratis.
Ikke alle funksjonene er tilgjengelige i utviklerutgaven, men i de fleste brukssaker bør du ha det bra med bare utviklerutgaven fordi den inneholder kjernegenskapene som Objektdatabasen, Realtidsynkronisering og Autentisering. Her er en sammenligning av hva du får for hver utgave: Realm Products and Pricing.
Hvis Realm er for mye for dine behov, kan du alltid holde deg til AsyncStorage API som følger med React Native.
Fabric er en alt-i-ett-tjeneste som lar deg blant annet legge til analyser i appen din. Det er svar, som gir deg sanntidsstatistikk om hvordan appen din blir brukt. Dette inkluderer antall aktive brukere, øktlengden og retensjonsfrekvensen. Det er også Crashlytics, som gir deg kraftige rapporteringsrapporter. Alt dette skjer i sanntid, og du kan se den på Fabrics sanntids dashboard. Du kan bruke Fabric-biblioteket til å enkelt sette opp Fabric for din React Native app.
Hvis du helst vil holde fast med en prøvd og testet løsning som Google Analytics, er det også et bibliotek som lar deg gjøre det.
Det er virkelig ingen konkurranse når det gjelder å implementere push notifications i apps. Firebase Cloud Messaging (tidligere kjent som Google Cloud Messaging) lar deg sende push notifications til både Android og iOS apps. Du kan bruke pakken Reager-native-fcm til å kommunisere med FCM fra appen din.
CodePush lar deg distribuere kodeoppdateringer til mobilapper direkte til brukerens enheter. CodePush fungerer som et sentralt lagringssted der du kan distribuere endringer i HTML, CSS, JavaScript og eiendeler som bilder. Den tilsvarende CodePush-koden i appen vil da trekke disse endringene. Dette er flott for å skape feilrettinger til appen uten behov for å laste den opp i appbutikken og venter på at brukere skal oppdatere appen. Du kan bruke denne pakken til å trekke oppdateringer fra CodePush i React Native app.
Bitrise er en kontinuerlig leveringstjeneste for mobilapputvikling. Den lar deg kjøre tester, bygge appen, og skyve den automatisk til brukerens enheter hver gang du distribuerer koden.
Bitrise integreres med en rekke tjenester i hvert trinn av utviklingsarbeidet. For eksempel, når du trykker på frigjøringsgrene på GitHub, blir Bitrise varslet om at du trykker gjennom webhooks. Det vil da begynne å kjøre testene. Når testene går, begynner byggeprosessen. Hvis det bare er en "myk utgivelse" (for eksempel endringer i JavaScript-koden), kan endringene bli distribuert til brukerne gjennom CodePush. Men hvis det er endringer i den opprinnelige koden (for eksempel du har lagt til et Kamera-plugin), kan Bitrise også bygge en APK eller IPA fil og distribuere den til Google Play eller iTunes Connect.
Fastlane er en samling verktøy som automatiserer bygg og utgivelsesprosessen for Android og iOS-apper. For iOS håndterer det oppgaver som å kjøre tester, generere skjermbilder, kodesignering og utgivelse av appen til appbutikken. Den inkluderer også beta-testverktøy som Pilot og Boarding. Pilot lar deg laste opp appen din til iTunes Connect og administrer TestFlight beta-testene dine rett fra kommandolinjen. Boarding oppretter en registreringsside for TestFlight beta-testere.
Verktøyene er mer rettet mot iOS-distribusjon, men du kan også ha nytte hvis du distribuerer Android-apper. Foreløpig er det bare to verktøy tilgjengelig for Android-distribusjon: Supply and Screengrab.
Forsyning lar deg automatisere opplasting av eiendeler som appikonet, promo grafikken og skjermbilder av appen din. Det lar deg også oppdatere dine eksisterende apper i Google Play Butikk.
screengrab, På den annen side automatiserer generasjonen av skjermbilder for flere enheter. Hvert skjermbilde kan også bli lokalisert hvis appen støtter flere språk.
Det er det! I denne artikkelen har du lært om noen av verktøyene, bibliotekene og tjenestene du kan bruke når du utvikler React native apps. Hva med deg? Hva er dine go-to verktøy når det gjelder å utvikle apps i React Native?
Og mens du er her, sjekk ut noen av våre andre innlegg på React Native app development!
Accentsconagua