Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Mobile Development

Tools für React Native Entwicklung

by
Read Time:11 minsLanguages:

German (Deutsch) translation by Władysław Łucyszyn (you can also view the original English article)

Tools, Bibliotheken und Dienste sind ein wichtiger Bestandteil des Lebens jedes Entwicklers, egal für welche Umgebung Sie entwickeln. Und React Native ist keine Ausnahme. In diesem Artikel werde ich Sie durch einige der besten UI-Frameworks, Bibliotheken, Komponenten, Entwicklungstools und Webdienste führen, die Sie zu einem glücklicheren und produktiveren React Native-Entwickler machen.

Texteditoren und IDEs

Visual Studio Code ist ein Texteditor mit integrierten IntelliSense-, Debugging- und Git-Integrationsfunktionen. Was es für die React Native-Entwicklung wirklich gut macht, ist seine React Native-Tools-Erweiterung. Auf diese Weise können Sie React Native-Befehle aus der Befehlspalette ausführen, IntelliSense für React Native-APIs hinzufügen und Code im Editor selbst debuggen.

Weitere Informationen zum Einrichten von Visual Studio Code für React Native finden Sie in diesem Blogbeitrag: VSCode for React Native.

Wenn Sie Atom verwenden, können Sie das Nuclide-Plugin installieren. Dieses Plugin wurde speziell für die Arbeit mit React Native-, Flow- und Hack-Projekten entwickelt. Es verfügt über einen integrierten Debugger und einen Elementinspektor mit allen Funktionen, die Sie in den Chrome Developer Tools gewohnt sind. Flow-Unterstützung bedeutet, dass Sie sofort Autovervollständigung, Typhinweise und Codediagnose erhalten.

Wenn Sie mehr IDE- und Editor-Optionen erkunden möchten, lesen Sie diesen Blogbeitrag zu den Top 10 Editoren für React Native.

Entwicklungstools

Entwicklungstools haben einen breiten Anwendungsbereich, daher werde ich jedes Tool nach seinem Fokus gruppieren:

  • SDK
  • Codequalität
  • testen
  • Fehlersuche

SDK

Wenn es um SDKs für React Native geht, geht nichts über Expo. Expo ermöglicht es Ihnen, auf einfache Weise einen App-Prototyp zu erstellen, ohne Android Studio oder Xcode zu benötigen. Es enthält eine Reihe von Komponenten und Bibliotheken, mit denen Sie Ihre Entwicklung beschleunigen können.

Der Expo-Workflow besteht aus folgenden Elementen:

  1. Erstellen Sie ein neues Projekt mit der App create-react-native-app.
  2. Schreiben Sie den Code in Ihren bevorzugten Texteditor.
  3. Führen Sie die App mit der Expo-Client-App aus.

Sie müssen Ihr Telefon nicht mit Ihrem Computer verbinden. Scannen Sie einfach den QR-Code auf Ihrem Terminal mit der Expo-Client-App und Ihre App wird automatisch ausgeführt. Wenn Sie Genymotion verwenden, unterstützt Expo dies auch.

Der einzige Nachteil bei der Verwendung von Expo besteht darin, dass Sie kein benutzerdefiniertes Paket hinzufügen können, das die native Funktionalität des Geräts verwendet. Expo enthält bereits eine Reihe häufig verwendeter nativer Pakete wie Camera, Facebook und Map. Wenn Sie jedoch ein Paket verwenden müssen, das sie noch nicht unterstützen, müssen Sie Ihre App "auswerfen". An diesem Punkt wird Ihre App so aussehen, als ob sie mit react-native init erstellt wurde, und Sie verlieren auch die Möglichkeit, sie mit der Expo-Client-App auszuführen.

Codequalität

Es ist wichtig, die Qualität Ihres Codes zu überprüfen, und deshalb gibt es Tools wie ESLint. Kurz gesagt, ein Linting-Tool ermöglicht es Ihnen, mit Ihrem Code konsistenter zu sein, indem Sie ihn mit einem Styleguide vergleichen. Ein Beispiel für einen solchen Styleguide ist der JavaScript Style Guide von Airbnb, der Regeln zum Schreiben von JavaScript-Code festlegt. Das Flusen-Tool vergleicht dann Ihren Code mit diesen Regeln, um sicherzustellen, dass sie befolgt wurden. Es gibt auch einen Styleguide für React-Projekte.

Wenn Sie Sublime Text verwenden, finden Sie hier ein gutes Tutorial, wie Sie es konfigurieren können, damit Sie während des Codierens in Echtzeit Feedback zur Qualität Ihres Codes erhalten: Sublime Linting for React und ES6. Wenn Sie einen anderen Editor oder eine andere IDE verwenden, suchen Sie nach einem entsprechenden Plugin, das ESLint verwendet.

Wenn Sie Ihrem Projekt statische Eingaben hinzufügen möchten, können Sie Flow verwenden. Flow fügt zusätzlich zu JavaScript statische Typisierung hinzu, ohne dass Sie Änderungen an Ihrer vorhandenen Codebasis vornehmen müssen. Dies liegt daran, dass Flow versucht, den Typ nach Möglichkeit abzuleiten. Für neue Projekte wird jedoch empfohlen, den Typ explizit anzugeben, um die Vorteile der Verwendung von Flow voll auszuschöpfen.

Um mit Flow zu beginnen, finden Sie hier ein Tutorial, wie Sie Flow für Ihre React Native-Projekte einrichten können.

Testen

Enzyme ist ein Testprogramm für React, mit dem Sie die Ausgabe Ihrer Komponente bestätigen, manipulieren und durchlaufen können. Es bietet Methoden wie shallow(), um Ihre Komponenten "flach" zu rendern, find(), um die gerenderte Komponente zu durchlaufen, und expect(), um die Requisiten oder den in der Komponente gerenderten Inhalt zu bestätigen.

Sie können dieser Anleitung zur Verwendung von Enzymen zum Testen von Komponenten in React Native folgen, um Ihre React Native-App mit Enzymen testbar zu machen. Wenn Sie mit Enzym noch nicht vertraut sind, können Sie dieses Tutorial zum Testen von Reaktionskomponenten mit Enzym und Mocha lesen.

Debuggen

Reactotron ist eine Desktop-App, mit der Sie React- und React Native-Apps debuggen können. Zu den wichtigsten Funktionen gehören das Überprüfen, Ändern und Abonnieren des App-Status, das Verfolgen von HTTP-Anforderungen über die App, das Benchmarking der App-Leistung und das Verfolgen von Fehlern. Wenn Sie Redux verwenden, können Sie sogar Aktionen ausführen und Sagen aus Reactotron verfolgen.

Boilerplates und UI-Frameworks

Snowflake ist ein Boilerplate für die Full-Stack-React-Native-Entwicklung. Es umfasst alles vom Front-End bis zum Back-End der App. Wenn Sie also nur ein Tool suchen, mit dem Sie schnell loslegen können, ist Snowflake möglicherweise hilfreich. Sie können die Hinweise lesen, um weitere Informationen darüber zu erhalten, welche Pakete und Tools verwendet werden, um es einzurichten.

Alternativ können Sie Ignite verwenden. Es ist ein Befehlszeilentool, das auch eine Boilerplate, Generatoren, einen Styleguide für UI-Komponenten, ein API-Testtool und mehr enthält.

React Native enthält bereits UI-Komponenten, die Sie für die Benutzerinteraktion verwenden können. Das Problem ist, dass sie nur das grundlegendste Design haben, damit jede Komponente für das unterschieden werden kann, was sie ist (z. B. Schaltfläche, Kontrollkästchen). Wenn Sie benutzerdefinierte Stile hinzufügen möchten, müssen Sie Ihren eigenen CSS-Code schreiben.

Hier kommt NativeBase ins Spiel. Es ermöglicht Ihrer App ein wirklich natives Erscheinungsbild, indem es das gleiche Design implementiert, das in nativen Android- (Material Design) und iOS-Apps (Human Interface Guidelines) verwendet wird. Standardmäßig erhalten Sie benutzerdefinierte Komponenten wie schwebende Aktionsschaltflächen, Spinner und vor allem Formularkomponenten.

Bibliotheken und Komponenten

React Native hat eine riesige Community, daher gibt es viele Bibliotheken und Komponenten, die Sie verwenden können. Wir könnten den ganzen Tag damit verbringen, darüber zu sprechen. Um es kurz zu machen, konzentriere ich mich auf die folgenden Bereiche:

  • Navigation
  • staatliche Verwaltung
  • Animationen
  • häufig verwendete Komponenten und Bibliotheken

Navigation

Mit React Navigation können Sie die Navigation in Ihren React Native-Apps mithilfe der integrierten Navigatoren wie Stack Navigator, Tab Navigator und Drawer Navigator einfach implementieren. Das ist jedoch noch nicht alles: Neben der In-App-Navigation umfasst es auch Deep-Linking, Redux-Integration und Web-Integration. Dies macht es zu einer wirklich robusten Bibliothek für die Implementierung der Navigation.

Staatliches Management

MobX bietet die Funktionalität zum Aktualisieren und Verwalten des von React verwendeten App-Status. Was es zu einem guten Kandidaten für das Zustandsmanagement in React macht, ist seine Einfachheit und Testbarkeit. Es hat auch eine kurze Lernkurve, sodass Dinge wie asynchrone Funktionen und berechnete Werte bereits hinter den Kulissen behandelt werden.

Für größere und komplexere Anwendungen wird Redux dennoch empfohlen. Dies liegt daran, dass MobX sehr liberal ist, ähnlich wie Redux, das strenge Richtlinien für die Verwaltung des Staates vorgibt. Daher ist es eine klügere Wahl für größere Projekte, an denen mehr Menschen arbeiten.

Animationen

In React Native ist bereits eine Animations-API integriert. Tatsächlich gibt es nicht nur eine, sondern zwei APIs für die Arbeit mit Animationen: Animated API und LayoutAnimation. Diese beiden sind sehr leistungsfähig, können jedoch umständlich sein, insbesondere wenn Sie lediglich grundlegende Animationen anwenden möchten, z. B. ein Objekt auf und ab bewegen oder es abprallen lassen möchten. In solchen Fällen sind Komponenten wie Animatable hilfreich.

Häufig verwendete Komponenten und Bibliotheken

Hier ist eine Liste von Komponenten und Bibliotheken, die häufig in React Native-Projekten verwendet werden. Diese sind sowohl mit Android- als auch mit iOS-Geräten kompatibel:

  • styled-components: ermöglicht Ihnen das Schreiben von CSS-Code zum Stylen Ihrer React-Komponenten.
  • react-native-calendar: zum Anzeigen eines Kalenders, mit dem Benutzer interagieren können.
  • react-native-datepicker: zum Picken von Datums- und Uhrzeitangaben.
  • react-native-progress: zum Erstellen von Fortschrittsbalken und Spinnern.
  • react-native-spinkit: eine Sammlung von Ladeindikatoren.
  • Vektorsymbole: Ermöglicht Ihnen die Verwendung von Symbolen aus Ihren bevorzugten Symbolschriftquellen wie Font Awesome und Material Icons.
  • react-native-swiper: verwandelt eine Sammlung von Bildern oder Containern in Swiping-Komponenten.
  • react-native-scrollable-tab-view: Navigation mit Registerkarten, zwischen denen Sie wischen können.
  • react-native-lightbox: Zum Anzeigen von Bildern in Vollbild-Popovers.
  • react-native-maps: ermöglicht Ihnen die Integration von Google Maps in Ihre Apps. Nicht alle in der Google Maps API verfügbaren Funktionen sind verfügbar, aber die Funktionalität, die sie bietet, sollte in den meisten Fällen ausreichen.
  • SGListView: Eine speicherfreundliche Implementierung der integrierten ListView-Komponente von React Native. Wenn Sie in Ihrer App große Listen anzeigen müssen, verwenden Sie diese anstelle von ListView.
  • Formik: macht den Umgang mit Formularen in React Native weniger schmerzhaft. Es ermöglicht Ihnen, Werte in und außerhalb des Formularstatus abzurufen, Ihre Formulare zu validieren und ihre Übermittlung zu verarbeiten.
  • react-native-i18n: zur Umsetzung der Internationalisierung in Ihren Apps.
  • react-native-push-notification: implementiert lokale und Remote-Push-Benachrichtigungen.
  • InstantSearch: Eine Sammlung von Komponenten zur Implementierung der Suche.
  • react-native-fs: Ermöglicht den Zugriff auf das native Dateisystem des Geräts.
  • react-native-camera: eine Kamerakomponente, mit der Sie Fotos und Videos aus Ihrer App aufnehmen können.
  • react-native-video: zum Abspielen von Videos von Ihrem Dateisystem oder von einer URL.
  • react-native-sqlite-storage: zum Speichern und Bearbeiten von Daten aus einer SQLite-Datenbank.
  • react-native-store: ein Schlüsselwertspeicher basierend auf AsyncStorage.
  • react-native-webrtc: zur Implementierung von WebRTC.

Internetdienste

Sie können serverlose Apps erstellen und die Bereitstellung Ihrer React Native-Apps mithilfe von Webdiensten vereinfachen. Es gibt eine Vielzahl von Webdiensten, aber ich werde mich auf die folgenden Bereiche konzentrieren:

  • Datenbank
  • Analyse
  • Mitteilungen
  • Code-Updates
  • kontinuierliche Integration

Datenbank

Realm ist eine Echtzeitdatenbank mit Fokus auf mobile Apps. Es umfasst Funktionen wie bidirektionale Datensynchronisierung, Offline-First-Funktionen und Daten-Push. Die Realm Mobile-Datenbank ist Open Source und plattformübergreifend. Dies bedeutet, dass Sie den Realm Object Server auf Ihrem eigenen Server hosten und anschließend die Realm JavaScript-Bibliothek kostenlos verwenden können.

Nicht alle Funktionen sind in der Developer Edition verfügbar, aber in den meisten Anwendungsfällen sollten Sie nur mit der Developer Edition zufrieden sein, da sie die Kernfunktionen wie Objektdatenbank, Echtzeitsynchronisierung und Authentifizierung enthält. Hier ist ein Vergleich, was Sie für jede Edition erhalten: Realm-Produkte und -Preise.

Wenn Realm zu viel für Ihre Anforderungen ist, können Sie immer bei der AsyncStorage-API bleiben, die mit React Native geliefert wird.

Analytik

Fabric ist ein All-in-One-Service, mit dem Sie unter anderem Analysen in Ihrer App hinzufügen können. Es gibt Antworten, mit denen Sie in Echtzeit Statistiken darüber erhalten, wie Ihre App verwendet wird. Dazu gehören die Anzahl der aktiven Benutzer, die Sitzungsdauer und die Aufbewahrungsrate. Es gibt auch Crashlytics, das Ihnen leistungsstarke Crash-Reporting-Funktionen bietet. All dies geschieht in Echtzeit und Sie können es im Echtzeit-Dashboard von Fabric anzeigen. Mit der Fabric-Bibliothek können Sie Fabric ganz einfach für Ihre React Native-App einrichten.

Wenn Sie lieber bei einer bewährten Lösung wie Google Analytics bleiben möchten, gibt es auch eine Bibliothek, die Ihnen dies ermöglicht.

Mitteilungen

Es gibt wirklich keine Konkurrenz, wenn es darum geht, Push-Benachrichtigungen in Apps zu implementieren. Mit Firebase Cloud Messaging (früher bekannt als Google Cloud Messaging) können Sie Push-Benachrichtigungen sowohl an Android- als auch an iOS-Apps senden. Sie können das Paket react-native-fcm verwenden, um über Ihre App mit FCM zu kommunizieren.

Code-Updates

Mit CodePush können Sie Code-Updates für mobile Apps direkt auf den Geräten der Benutzer bereitstellen. CodePush fungiert als zentrales Repository, in dem Sie Änderungen an HTML, CSS, JavaScript und Assets wie Bildern bereitstellen können. Der entsprechende CodePush-Code in der App würde diese Änderungen dann ziehen. Dies ist großartig, um Fehlerkorrekturen an die App zu übertragen, ohne sie in den App Store hochladen und darauf warten zu müssen, dass Benutzer die App aktualisieren. Sie können dieses Paket verwenden, um Updates von CodePush in Ihrer React Native-App abzurufen.

Kontinuierliche Integration

Bitrise ist ein Continuous Delivery Service für die Entwicklung mobiler Apps. Es ermöglicht Ihnen, Ihre Tests auszuführen, die App zu erstellen und sie bei jeder Bereitstellung Ihres Codes automatisch auf die Geräte Ihrer Benutzer zu übertragen.

Bitrise lässt sich in jeden Schritt Ihres Entwicklungsworkflows mit einer Reihe von Diensten integrieren. Wenn Sie beispielsweise auf Ihre Release-Branches auf GitHub pushen, wird Bitrise über Webhooks über diesen Push benachrichtigt. Es beginnt dann mit der Ausführung der Tests. Sobald die Tests bestanden sind, beginnt der Build-Prozess. Handelt es sich nur um ein "Soft Release" (z. B. Änderungen am JavaScript-Code), können die Änderungen über CodePush an die Benutzer weitergegeben werden. Aber wenn es Änderungen am nativen Code gibt (z. B. Sie haben ein Kamera-Plugin hinzugefügt), kann Bitrise auch eine APK- oder IPA-Datei erstellen und diese bei Google Play oder iTunes Connect bereitstellen.

Fastlane ist eine Sammlung von Tools, die den Erstellungs- und Freigabeprozess für Android- und iOS-Apps automatisieren. Unter iOS werden Aufgaben wie das Ausführen Ihrer Tests, das Generieren von Screenshots, das Signieren von Code und das Freigeben der App für den App Store ausgeführt. Es enthält auch Beta-Testtools wie Pilot und Boarding. Mit Pilot können Sie Ihre App auf iTunes Connect hochladen und Ihre TestFlight-Betatester direkt über die Befehlszeile verwalten. Boarding erstellt eine Anmeldeseite für TestFlight-Betatester.

Die Tools sind eher auf die Bereitstellung von iOS ausgerichtet. Sie können jedoch auch davon profitieren, wenn Sie Android-Apps bereitstellen. Derzeit stehen nur zwei Tools für die Android-Bereitstellung zur Verfügung: Supply und Screengrab.

Mit Supply können Sie das Hochladen von Assets wie dem App-Symbol, Werbegrafiken und Screenshots Ihrer App automatisieren. Es ermöglicht Ihnen auch, Ihre vorhandenen Apps im Google Play Store zu aktualisieren.

Screengrab hingegen automatisiert die Erstellung von Screenshots für mehrere Geräte. Jeder Screenshot kann auch lokalisiert werden, wenn Ihre App mehrere Sprachen unterstützt.

Abschluss

Das ist es! In diesem Artikel haben Sie einige der Tools, Bibliotheken und Dienste kennengelernt, die Sie bei der Entwicklung von React Native-Apps verwenden können. Was ist mit dir? Was sind Ihre bevorzugten Tools, wenn es um die Entwicklung von Apps in React Native geht?

Und während Sie hier sind, lesen Sie einige unserer anderen Beiträge zur Entwicklung von React Native-Apps!

Advertisement
Did you find this post useful?
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.