Ein kalter Tauchgang in React Native (Tutorial für Anfänger)

Als React Native angekündigt wurde, waren die ersten Reaktionen überwältigend positiv. Wenn wir an Webtechnologien im mobilen Bereich denken, fallen uns traditionell Dinge wie Apache Cordova ein, mit denen wir Websites oder Webanwendungen als Anwendungen für mobile Plattformen packen können. In diesem Anfänger-Tutorial werfen wir einen Blick auf die Architektur von React Native, die Philosophie hinter React Native und wie es sich von anderen Lösungen im gleichen Bereich unterscheidet. Am Ende des Artikels werden wir eine React „Hello World“-Anwendung in eine React Native-Anwendung umgewandelt haben.

Beginnen wir damit, dass React Native eine relativ neue Technologie ist. Es ist seit März 2015 offiziell verfügbar, nachdem es sich seit Anfang des Jahres in der privaten Beta befand und zuvor eine Weile intern bei Facebook verwendet wurde. Das Sprichwort „Rom wurde nicht an einem Tag erbaut“ gilt allgemein auch für die Technik. Tools wie grunt und Plattformen wie Node.js brauchten Jahre, um ausgereift zu sein. In der Webwelt entwickeln sich die Dinge schnell, und mit einer riesigen Anzahl von Frameworks, Paketen und Tools, die jeden Tag auf den Markt kommen, neigen Entwickler dazu, etwas skeptischer zu werden und wollen nicht auf jeden Hype-Zug aufspringen, nur um das zu erkennen sie landeten in einer Vendor-Lock-in-Situation. Wir werden darauf eingehen, was React Native so besonders macht, warum es sich lohnt, in diese Technologie einzusteigen, und einige Fälle behandeln, in denen es nicht nur um Einhörner und Regenbogen geht.

Unter der Haube

Wenn es um Webtechnologien auf Mobilgeräten geht, fallen die verfügbaren Lösungen normalerweise in eine der folgenden Kategorien.

Bündeln von Webanwendungen in einem mobilen Webbrowser

Die Webanwendung befindet sich in einem mobilen Browser, der normalerweise als WebView bezeichnet wird. Ohne größeres Refactoring funktioniert eine Website oder Webanwendung auf dem Mobilgerät. Möglicherweise müssen wir mobile Browserereignisse wie das Antippen oder Anhören von Änderungen der Geräteausrichtung und den kleineren Bildschirm für eine vollständige Benutzererfahrung berücksichtigen, aber wir haben eine funktionierende mobile Version mit minimalem Aufwand. Cordova/PhoneGap ist die beliebteste Option in dieser Kategorie. Leider hat diese Option einen großen Nachteil: In einigen Fällen sind Anwendungen, die mit Cordova entwickelt wurden, erheblich langsamer als native Anwendungen, insbesondere bei grafikintensiven Anwendungen. In anderen Fällen bietet das mobile Betriebssystem nicht alle Funktionen in WebView, die im mobilen Browser verfügbar sind. Die Benutzererfahrung kann sich auch von nativen Anwendungen unterscheiden; Dies kann aufgrund der Anwendung oder der Plattform selbst geschehen. Dieses Problem kann von sich nicht so anfühlenden Bildlaufleisten bis hin zu einer merklichen Verzögerung beim Antippen von Elementen reichen.

Kompilieren zu nativen Technologien

Eine ganz andere Lösung besteht darin, am Ende eine native Codebasis zu erstellen. Dies geschieht durch Transformation des ursprünglichen Quellcodes in eine andere Programmiersprache. Wir tauschen native Leistung gegen eine Abstraktionsschicht mit einigen Unsicherheiten. Bei Closed-Source-Lösungen wissen wir nicht einmal, was unter der Haube passiert und mit was für einer Blackbox wir es zu tun haben. In anderen Fällen sind wir nicht sicher, wie sehr das nächste Update des mobilen Betriebssystems unseren Code beschädigen wird und wann Fixes oder Updates verfügbar sein werden. Ein beliebtes Beispiel dieser Kategorie wäre Haxe.

Verwenden einer JavaScript-Ebene

Hier verwenden wir die JavaScript-Engine der mobilen Umgebung und führen dort unser JavaScript aus. Native Steuerelemente werden JavaScript-Objekten und -Funktionen zugeordnet. Wenn wir also eine Funktion namens fancyButtonRightHere() würden, würde eine Schaltfläche auf dem Bildschirm erscheinen. NativeScript oder Appcelerator Titanium sind bekannte Beispiele dieser Kategorie.

React Native könnte in die dritte Kategorie eingeordnet werden. Für die iOS- und Android-Versionen verwendet React Native JavaScriptCore unter der Haube, das die Standard-JavaScript-Engine auf iOS ist. JavaScriptCore ist auch die JavaScript-Engine in Apples Safari-Browsern. OS X- und iOS-Entwickler können sich direkt damit verbinden, wenn sie möchten.

Ein großer Unterschied besteht darin, dass React Native den JavaScript-Code in einem separaten Thread ausführt, sodass die Benutzeroberfläche nicht blockiert und Animationen seidig und flüssig sein sollten.

Reagieren ist das Hauptmerkmal

Es ist erwähnenswert, dass das „React“ in React Native nicht zufällig dort platziert ist. Für React Native müssen wir verstehen, was React genau bietet. Die folgenden Konzepte funktionieren in React und React Native gleich, obwohl diese Codebeispiele auf die Ausführung im Browser zugeschnitten sind.

Einzelner Rendering-Einstiegspunkt

Wenn wir uns eine einfache React-Komponente ansehen, fällt uns vielleicht als Erstes auf, dass die Komponente eine render hat. Tatsächlich gibt React einen Fehler aus, wenn in der Komponente keine Renderfunktion definiert ist.

 var MyComponent = function() { this.render = function() { // Render something here }; };

Das Besondere ist, dass wir uns hier nicht mit DOM-Elementen anlegen, sondern ein XML-basiertes Konstrukt zurückgeben, das darstellt, was im DOM gerendert wird. Dieses XML-basierte Konstrukt heißt JSX.

 var MyComponent = function() { this.render = function() { return <div className="my-component">Hello there</div>; }; };

Ein spezieller JSX-Transformer nimmt all diesen XML-ähnlichen Code und wandelt ihn in Funktionen um. So sieht die Komponente nach der Transformation aus:

 var MyComponent = function() { this.render = function() { return React.createElement("div", { className: "my-component" }, "Hello there"); }; };

Der größte Vorteil ist, dass wir durch einen kurzen Blick auf das Bauteil immer wissen, was es zu tun hat. Beispielsweise könnte eine <FriendList /> Komponente eine Reihe von <Friend /> -Komponenten rendern. Wir können unsere Komponenten nirgendwo anders als innerhalb der render , daher gibt es nie die Sorge, dass wir nicht genau wissen, woher unsere gerenderte Komponente stammt.

Unidirektionaler Datenfluss

Um den Inhalt einer Komponente aufzubauen, stellt React Properties oder kurz Props bereit. Ähnlich wie bei XML-Attributen übergeben wir die Props direkt an eine Komponente und können die Props dann innerhalb der konstruierten Komponente verwenden.

 var Hello = function(props) { this.render = function() { return <div className="my-component">Hello {props.name}</div>; }; }; var Greeter = function() { this.render = function() { return <Hello name="there" /> } };

Dies führt dazu, dass unsere Komponenten in einer baumartigen Struktur sind und wir nur beim Erstellen von untergeordneten Elementen Daten übergeben dürfen.

Bei Änderungen neu rendern

Neben Requisiten können Komponenten auch einen internen Zustand haben. Das prominenteste Beispiel für dieses Verhalten wäre ein Klickzähler, der seinen Wert aktualisiert, wenn eine Schaltfläche gedrückt wird. Die Anzahl der Klicks selbst würde im Zustand gespeichert werden.

Jede Requisiten- und Zustandsänderung löst ein vollständiges Neu-Rendering der Komponente aus.

Virtuelles DOM

Wenn jetzt alles neu gerendert wird, wenn sich die Requisiten oder der Status ändern, wie kommt es dann, dass React selbst so gut abschneidet? Die magische Zutat ist das „virtuelle DOM“. Wann immer etwas neu gerendert werden muss, wird eine virtuelle Darstellung des aktualisierten DOM generiert. Das virtuelle DOM besteht aus leichten Darstellungen von Elementen, die dem Komponentenbaum nachempfunden sind, wodurch der Prozess ihrer Generierung viel effizienter ist als das Generieren echter DOM-Elemente. Bevor die Änderungen auf das echte DOM angewendet werden, wird überprüft, wo genau im Komponentenbaum die Änderungen vorgenommen wurden, ein Diff wird erstellt und nur diese spezifischen Änderungen werden angewendet.

Erste Schritte mit diesem React Native Tutorial

Es gibt bestimmte Voraussetzungen, die Anfänger schaffen müssen, um sich für React Native zu entwickeln. Da iOS die erste unterstützte Plattform war, die wir in diesem Tutorial behandeln, benötigen wir macOS und Xcode, mindestens Version 6.3. Node.js wird ebenfalls benötigt. Was hilft, ist die Installation von Watchman über den Brew-Paketmanager mit brew install watchman . Dies ist zwar nicht unbedingt erforderlich, hilft jedoch beim Umgang mit vielen Dateien in unserem React Native-Projekt.

Um React Native zu installieren, müssen wir lediglich die React Native-Befehlszeilenanwendung mit npm install -g react-native-cli . Der Aufruf des React react-native Befehls hilft uns dann, eine neue React-Native-Anwendung zu erstellen. Durch das Ausführen von „ react-native init HelloWorld “ wird ein Ordner namens „ HelloWorld “ erstellt, in dem der Boilerplate-Code zu finden ist.

Transformieren einer React-Anwendung

Da React das Hauptmerkmal ist und die Kernprinzipien aus der React-Bibliothek stammen, werfen wir einen Blick darauf, was wir brauchen, um eine minimale React „Hello World“-Anwendung in eine React Native-Anwendung umzuwandeln.

In diesem Codebeispiel verwenden wir einige ES2015-Funktionen, insbesondere Klassen. Es ist durchaus möglich, bei React.createClass zu bleiben oder eine Funktionsform zu verwenden, die dem beliebten Modulmuster ähnelt.

 var React = require('react'); class HelloThere extends React.Component { clickMe() { alert('Hi!'); } render() { return ( <div className="box" onClick={this.clickMe.bind(this)}>Hello {this.props.name}. Please click me.</div> ); } } React.render(<HelloThere name="Component" />, document.getElementById('content'));

Schritt 1: Nutzen Sie CommonJS-Module

Im ersten Schritt müssen wir ändern, dass das React-Modul stattdessen React react-native verwendet.

 var React = require('react-native'); class HelloThere extends React.Component { clickMe() { alert('Hi!'); } render() { return ( <div className="box" onClick={this.clickMe.bind(this)}>Hello {this.props.name}. Please click me.</div> ); } } React.render(<HelloThere name="Component" />, document.getElementById('content'));

Was normalerweise Teil der Tooling-Pipeline bei der Entwicklung einer React-Webanwendung ist, ist ein integraler Bestandteil von React Native.

Schritt 2: Es gibt kein DOM

Es überrascht nicht, dass es auf Mobilgeräten kein DOM gibt. Wo wir zuvor <div /> verwendet haben, müssen wir <View /> verwenden und wo wir <span /> verwendet haben, ist die hier benötigte Komponente <Text /> .

 import React from 'react'; import {View, Text, Alert} from 'react-native'; class HelloThere extends React.Component { clickMe() { Alert.alert('hi!'); } render() { return ( <View className="box" onClick={this.clickMe.bind(this)}>Hello {this.props.name}. Please click me.</View> ); } } React.render(<HelloThere name="Component" />, document.getElementById('content'));

Während es recht praktisch ist, Text direkt in <div /> -Elemente einzufügen, kann Text in der nativen Welt nicht direkt in ein <View /> werden. Dazu müssen wir eine <Text /> -Komponente einfügen.

 import React from 'react'; import {View, Text, Alert} from 'react-native'; class HelloThere extends React.Component { clickMe() { Alert.alert('hi!'); } render() { return ( <View className="box" onClick={this.clickMe.bind(this)}> <Text>Hello {this.props.name}. Please click me.</Text> </View> ); } } React.render(<HelloThere name="Component" />, document.getElementById('content'));

Schritt 3: Inline-Stile sind der richtige Weg

React Native ermöglicht es uns, die Flexbox-Modellierung zu verwenden, anstatt mit float und inline-block herumzuspielen, mit denen wir in der Webwelt so vertraut sind. Das Interessante ist, dass React Native kein CSS verwendet.

 import React from 'react'; import {View, Text, StyleSheet, Alert} from 'react-native'; class HelloThere extends React.Component { clickMe() { Alert.alert('hi!'); } render() { return ( <View style={styles.box} onClick={this.clickMe.bind(this)}> <Text>Hello {this.props.name}. Please click me.</Text> </View> ); } } var styles = StyleSheet.create({ box: { borderColor: 'red', backgroundColor: '#fff', borderWidth: 1, padding: 10, width: 100, height: 100 } }); React.render(<HelloThere name="Component" />, document.getElementById('content'));

Die Verwendung von Inline-Stilen erscheint Anfängern verwirrend. Es ähnelt dem Übergang, den React-Entwickler durchlaufen mussten, als sie mit JSX konfrontiert wurden und zuvor Templating-Engines wie Handlebars oder Jade verwendeten.

Die Idee ist, dass wir keine Stylesheets haben, wie wir CSS verwenden. Wir deklarieren die Stylesheets direkt auf Komponentenebene und haben so alle Informationen, die wir brauchen, um zu sehen, was unsere Komponente tut, welches Layout sie erstellt und welche Stile sie anwendet.

 import React from 'react'; import {Text} from 'react-native'; var Headline = function(props) { this.render = () => <Text style={headlineStyle.text}>{props.caption}</Text>; }; var headlineStyles = StyleSheet.create({ text: { fontSize: 32, fontWeight: 'bold' } }); module.exports = Headline;

Schritt 4: Behandlung von Ereignissen

Das Äquivalent zum Klicken auf Webseiten ist das Antippen eines Elements auf dem Mobilgerät. Ändern wir unseren Code so, dass die „Warnung“ erscheint, wenn wir auf das Element tippen.

 import React from 'react'; import {View, Text, StyleSheet, TouchableOpacity, Alert} from 'react-native'; class HelloThere extends React.Component { clickMe() { Alert.alert("Hi!") } render() { return ( <TouchableOpacity onPress={this.clickMe()}> <View style={styles.box}> <Text>Hello {this.props.name}. Please click me.</Text> </View> </TouchableOpacity> ); } } var styles = StyleSheet.create({ box: { borderColor: 'red', backgroundColor: '#fff', borderWidth: 1, padding: 10, width: 100, height: 100 } }); React.render(<HelloThere name="Component" />, document.getElementById('content'));

Anstatt dass Ereignisse direkt auf <View /> -Komponenten verfügbar sind, müssen wir explizit Elemente verwenden, die Ereignisse auslösen, in unserem Fall ein Touch-Ereignis beim Drücken der Ansicht. Es stehen verschiedene Arten von berührbaren Komponenten zur Verfügung, die jeweils ein anderes visuelles Feedback liefern.

Schritt 5: Passen Sie das Verhalten plattformübergreifend an

Es ist möglich zu erkennen, auf welcher Plattform die React Native-Anwendung läuft, indem auf den Wert von Platform.OS wird. Nehmen wir an, dass wir im obigen Beispiel eine andere Warnmeldung basierend auf der Plattform anzeigen wollten, auf der wir laufen. Wir können es so machen:

 ... clickMe() { var message = ''; if(Platform.OS == 'ios') { message = 'Welcome to iOS!'; } else if(Platform.OS == 'android') { message = 'Welcome to Android!'; } Alert.alert(message); } ...

Alternativ steht auch die Methode select zur Verfügung, die eine switch-ähnliche Syntax bereitstellt:

 … clickMe() { Alert.alert(Platform.select({ ios: 'Welcome to iOS!', android: 'Welcome to Android!' }) ); } ...

Schritt 6: Benutzerdefinierte Schriftarten und react-native link

Um eine benutzerdefinierte Schriftart hinzuzufügen, müssen wir durch einige Reifen springen. Stellen Sie zunächst sicher, dass der vollständige Name der Schriftart und der Dateiname der Schriftart identisch sind: iOS verwendet den vollständigen Namen der Schriftart, um die Schriftart aufzunehmen, während Android den Dateinamen verwendet.

Wenn also der vollständige Name Ihrer Schriftart myCustomFont , stellen Sie sicher, dass der Dateiname der Schriftart myCustomFont.ttf .

Danach müssen wir einen Assets-Ordner erstellen und npm darauf verweisen. Wir können dies tun, indem wir zuerst den Ordner unter assets/fonts im Stammverzeichnis der Anwendung erstellen. Jedes andere Verzeichnis ist geeignet, aber dies ist der herkömmliche Name, der für das Schriftartenverzeichnis verwendet wird.

Wir können npm mitteilen, wo wir unsere Assets haben, indem wir eine Assets -Eigenschaft im npm-Integrationsabschnitt von React, rnpm, hinzufügen:

 "rnpm": { "Assets": [ "./assets/fonts/" ] }

Nachdem wir das alles erledigt haben, können wir endlich react-native link ausführen. Dadurch werden die Schriftarten in die richtigen Verzeichnisse kopiert und die erforderliche XML-Datei zu info.plist unter iOS hinzugefügt.

Sobald dies erledigt ist, können wir unsere Schriftart verwenden, indem wir sie einfach in jedem Stylesheet mit ihrem vollständigen Namen referenzieren. Verwenden wir es für unser Text :

 import React from 'react'; import {View, Text, StyleSheet, TouchableOpacity, Alert} from 'react-native'; class HelloThere extends React.Component { clickMe() { Alert.alert("Hi!") } render() { return ( <TouchableOpacity onPress={this.clickMe()}> <View style={styles.box}> <Text style={styles.message}>Hello {this.props.name}. Please click me.</Text> </View> </TouchableOpacity> ); } } var styles = StyleSheet.create({ box: { borderColor: 'red', backgroundColor: '#fff', borderWidth: 1, padding: 10, width: 100, height: 100 }, message: { fontFamily: 'myCustomFont' } }); React.render(<HelloThere name="Component" />, document.getElementById('content'));

Schritt 7: Dinge bewegen

React Native verwendet die gleichen Regeln wie Flexbox für das Layout von Komponenten. Angenommen, wir wollten unsere Schaltfläche am unteren Rand des Bildschirms positionieren: Lassen Sie uns unsere TouchableOpacity mit einem Container View umschließen:

 <View style={styles.container}> <TouchableOpacity onPress={this.clickMe.bind(this)}> <View style={styles.box}> <Text style={styles.message}>Hello {this.props.name}. Please click me.</Text> </View> </TouchableOpacity> </View>

Und jetzt definieren wir den container zusammen mit den anderen bereits definierten Stilen:

 container: { flex: 1, justifyContent: 'center', alignItems: 'center' }

Konzentrieren wir uns auf justifyContent und alignItems . Diese beiden Eigenschaften steuern, wie die Komponente entlang ihrer Primärachse bzw. ihrer Sekundärachse ausgerichtet wird. Standardmäßig ist die primäre Achse die vertikale und die sekundäre Achse die horizontale Achse (Sie können dies ändern, indem Sie die Eigenschaft flexDirection auf row setzen).

justifyContent hat sechs mögliche Werte, auf die es eingestellt werden kann:

• flex-start positioniert alle Elemente zusammen am Anfang des Begrenzungsrahmens der Komponente.
• flex-end positioniert alle Elemente am Ende.
• center positioniert alle Elemente in der Mitte des Begrenzungsrahmens.
• space-around verteilt die Komponenten gleichmäßig und zentriert die Komponenten in ihren erstellten Begrenzungsrahmen.
• space-evenly verteilt die Komponenten ebenfalls gleichmäßig, versucht jedoch, zwischen den Komponenten und den anderen Begrenzungen den gleichen Abstand zu lassen.
• space-between verteilt die Komponenten, indem der Abstand zwischen benachbarten Komponenten gleich bleibt.

alignItems können auf vier mögliche Werte gesetzt werden: flex-start , flex-end , center und stretch . Die ersten drei verhalten sich wie bei justifyContent , während stretch die Komponente so einstellt, dass sie den gesamten verfügbaren Platz entlang der Achse einnimmt, sodass die Achse vollständig ausgefüllt wird.

Da wir also möchten, dass unsere TouchableOpacity unten und entlang der horizontalen Achse zentriert angezeigt wird, können wir den Stil wie folgt ändern:

 container: { flex: 1, justifyContent: 'flex-end', alignItems: 'center' }

Weitere Informationen zu den Werten, die justifyContent und alignItems haben können, finden Sie hier und hier.

Schritt 8: Registrierung der Anwendung

Bei der Entwicklung mit React für den Browser müssen wir nur einen Einhängepunkt definieren, React.render aufrufen und React seine Arbeit tun lassen. In React Native ist dies ein wenig anders.

 import React from 'react'; import {View, Text, StyleSheet, TouchableOpacity, Alert, Platform} from 'react-native'; class HelloThere extends React.Component { clickMe() { Alert.alert(Platform.select({ ios: 'Welcome to iOS!', android: 'Welcome to Android!' })); } render() { return ( <View style={styles.container}> <TouchableOpacity onPress={this.clickMe.bind(this)}> <View style={styles.box}> <Text style={styles.message}>Hello {this.props.name}. Please click me.</Text> </View> </TouchableOpacity> </View> ); } } var styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'flex-start', alignItems: 'center' }, box: { borderColor: 'red', backgroundColor: '#fff', borderWidth: 1, padding: 10, width: 100, height: 100 }, message: { fontFamily: 'myCustomFont' } }); var MainComponent = function() { this.render = function() { return <HelloThere name="Component" />; } }; AppRegistry.registerComponent('MainComponent', function() { return MainComponent; });

Wir müssen die Komponente für die Objective-C-Seite registrieren, was mit dem AppRegistry Objekt erfolgt. Der Name, den wir vergeben, muss mit dem Namen im Xcode-Projekt übereinstimmen.

Unsere Hello World React Native-Anwendung hat deutlich mehr Codezeilen als ihr Web-Pendant, aber auf der anderen Seite geht React Native die Trennung von Bedenken etwas weiter, insbesondere weil Stile mit der Komponente definiert werden.

Als Nebenbemerkung sollten wir die clickMe Methode nicht erneut an den this -Kontext in der render -Methode binden, insbesondere wenn unsere React (Native)-Anwendung etwas komplexer wird. Es bindet die Methode bei jedem Renderaufruf neu, was ziemlich viel werden kann. Die Alternative besteht darin, die Methode innerhalb des Konstruktors zu binden.

Ausführen der Anwendung

Um die Anwendung auszuführen, müssen wir den Inhalt der Datei index.ios.js durch den Codeabschnitt unserer transformierten Anwendung aus dem letzten Schritt ersetzen. Dann müssen wir nur noch das Xcode-Projekt öffnen und die große Run-Taste drücken. Zuerst wird ein Terminal mit dem React Native-Server geöffnet, und dann erscheint das Simulatorfenster. Der React Native-Server erstellt ein Bundle, das dann von der nativen Anwendung abgerufen wird. Dies ermöglicht einen schnellen Entwicklungszyklus ähnlich der Webentwicklung, bei dem Änderungen fast sofort im Simulator widergespiegelt werden.

Für Android reicht es aus, Folgendes zu Ihrer Datei package.json unter scripts hinzuzufügen:

 "android-linux": "react-native bundle --platform android --dev false --entry-file index.ios.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/ main/res && react-native run-android"

Und dann npm run android-linux . Stellen Sie vorher sicher, dass das Verzeichnis android/app/src/main/assets existiert.

Nachdem das Terminal aufgetaucht ist, wird unsere Anwendung im Simulator angezeigt. Durch Drücken von CMD+D wird ein Entwicklungsmenü angezeigt. Durch Klicken auf das Kästchen wird dann eine Warnung angezeigt. Die iOS-Version:

Und Android rendert so etwas:

Für die Verteilung würde es für uns nicht funktionieren, eine Anwendung zu haben, die auf einen lokalen Entwicklungsserver verweist. Aus diesem Grund können wir das Bundle für die Verwendung erstellen, wenn der React Native-Server nicht mit dem Befehl react-native bundle läuft. In diesem Fall müssen wir die didFinishLaunchingWithOptions Methode von AppDelegate , um das Offline-Bundle zu verwenden.

Diese Beispielanwendung ist auch auf Github verfügbar.

Arbeiten mit React Native

Erwähnenswert ist auch, dass wir nicht nur React-Konzepte und JavaScript für unsere mobilen Anwendungen verwenden, sondern einige Workflows, an die Webentwickler gewöhnt sind, auch mit React Native verfügbar sind. Wenn wir aus der Webentwicklung kommen, sind wir an Entwicklertools, das Überprüfen von Elementen und das Live-Nachladen gewöhnt.

React Native funktioniert so, dass es alle unsere JavaScript-Dateien in einem Bündel zusammenfasst. Dieses Paket wird entweder von einem Server bereitgestellt oder zusammen mit der Anwendung gebündelt. Die erste ist unglaublich nützlich für die Entwicklung im Simulator, da wir das Live-Nachladen aktivieren können. Das Entwicklermenü, das React bietet, ist keineswegs so mächtig wie die Chrome Developer Tools, aber es bietet eine sehr webähnliche Entwicklererfahrung mit Live-Neuladen und Debuggen mit den Chrome- (oder Safari-) Entwickler-/Debugger-Tools.

Webentwickler sind mit JSFiddle oder JSBin vertraut, einer Online-Spielwiese für schnelle Webtests. Es gibt eine ähnliche Umgebung, die es uns ermöglicht, React Native in einem Webbrowser auszuprobieren.

React Native: Eine solide, moderne Wahl

Ich hatte ursprünglich einen vorsichtigeren Ansatz für React Native vorgeschlagen. Heute ist es eine ausgereifte und solide Wahl.

Einer der großen Vorteile von React ist, dass es Ihren Workflow nicht beeinträchtigt, da es nur die Ansichtsebene darstellt. Möchten Sie Ihre eigene Grunt-Pipeline definieren? Oder möchten Sie lieber Webpack verwenden? Und werden Sie Backbone.js für Ihre Modellanforderungen verwenden? Oder möchten Sie mit einfachen JavaScript-Objekten arbeiten? Die Antworten auf all diese Fragen liegen ganz bei Ihnen, da React diese Auswahlmöglichkeiten nicht einschränkt. Wie die offizielle Seite es ausdrückte: „Da React keine Annahmen über den Rest Ihres Technologie-Stacks macht, ist es einfach, es an einem kleinen Feature in einem bestehenden Projekt auszuprobieren.“

Das gilt bis zu einem gewissen Grad auch für React Native. Mobile Entwickler können React Native als Teil ihrer Anwendung integrieren, den webinspirierten Entwicklungsworkflow nutzen und die Bibliothek bei Bedarf in größerem Umfang integrieren.

Fest steht jedenfalls: React Native wird nicht verschwinden. Facebook hat einen massiven Anteil daran, mehrere React Native-basierte Anwendungen in App Stores zu haben. Die Community rund um React Native ist riesig und wächst weiter.