Mit React Native erstellen Sie Cross-Plattform-Apps für Android und iOS. Das Framework wurde der Öffentlichkeit erstmals im Jahr 2015 präsentiert und hat seither stetig an Beliebtheit gewonnen. Lernen Sie jetzt die Eigenschaften und Vorteile kennen – und setzen Sie innerhalb von wenigen Minuten einfach Ihr erstes Testprojekt mit Anzeige auf dem Smartphone um.
Was ist React Native?
Mit dem Open-Source-Framework React Native bauen Webentwickler native Apps einzig unter Verwendung von JavaScript. Das von Facebook und einer großen Community vorangetriebene Framework basiert auf der React-Technologie, es ermöglicht Unternehmen die Vereinheitlichung der Entwicklung von Apps für Android und iOS. Damit soll besonders bei großen Apps die Skalierbarkeit gewährleistet bleiben. Die Open-Source-Lizenz erlaubt die kostenlose Verwendung, Änderung und den kommerziellen Einsatz.
Die Vorteile:
- Das Framework reduziert den Aufwand für plattformspezifische Apps.
- Webentwickler verwenden für Android und iOS ein Repository und einen Entwicklungsprozess.
- Der Source-Code ist deutlich schneller erstellt und lässt sich leichter warten.
- Entwicklung, Testing, Abnahmen und die Kommunikation werden beschleunigt.
- Anstelle von erneuter Kompilierung nach Code-Veränderungen können Sie die App sofort aktualisieren. Dank „Hot Reloading“ können Sie sogar einen neuen Code laufen lassen und den Status der App bewahren.
Video Beispiel Hot Reloading:
Die Nachteile:
- Das Framework ist relativ jung, nicht alle Use Cases sind mit passenden Bibliotheken abgedeckt.
- Es gibt bisher keine vollständige UI-Bibliothek, was bei der extrem schnellen Umsetzung interner Apps Probleme bereitet.
- Bereits entwickelte native Apps müssen neu geschrieben werden. Damit ist die Anfangsinvestition hoch, auf lange Sicht zahlt sich diese jedoch meist aus
Wie setze ich ein Projekt auf?
Der einfachste Weg für den Bau einer neuen App mit React Native ist Expo. Wenn Sie die Node.js-Umgebung nutzen, installieren Sie das Expo CLI command line utility mit:
npm install -g expo-cli --global
Gegebenenfalls müssen Sie jetzt erst noch Git installieren. Ein Projekt mit dem Namen „testprojekt“ erstellen Sie durch Eingabe von:
expo init testprojekt
Dann wechseln Sie in das Verzeichnis und starten Expo:
cd testprojekt
expo start
Jetzt startet der Entwicklungsserver.
In der Kommandozeile und im Browser wird der CR-Code angezeigt, den Sie einfach mit der Expo-App auf Ihrem Smartphone einscannen.
Installieren Sie jetzt den Expo Client auf Ihrem Smartphone und scannen Sie den QR-Code ein. Öffnen Sie anschließend die im Projekt-Ordner enthaltene Datei App.js mit Ihrem bevorzugten Editor wie Sublime Text, Emacs oder Atom.
Der Code sieht folgendermaßen aus:
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
export default class App extends React.Component {
render() {
return (
<View style={styles.container}>
<Text>Open up App.js to start working on your app!</Text>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});
Den Text ändern Sie einfach in der Zeile <Text>Open up App.js to start working on your app!</Text> – in unserem Beispiel in <Text>Hallo Welt mit React Native!</Text>. Speichern Sie die Datei ab, und schon aktualisiert sich die Anzeige auf Ihrem Smartphone!
Die Anzeige auf dem Smartphone aktualisiert sich nach dem Speichern der Datei sofort automatisch.
Wie funktioniert App-Testing mit React Native?
Mit React Native bearbeiten Sie die JavaScript-Dateien, die Applikation liest den Inhalt aus und die JavaScript-Elemente werden zu nativen Komponenten. Die entstehenden Apps sind reguläre native Android und iOS Apps. Daher funktioniert die Kombination mit bekannten Test-Automatisierungs-Frameworks wie Appium, Robotium, Calabash, Espresso, UI Automation und vielen mehr.
Unterschiede zwischen pure React Native und Expo
Es gibt verschiedene Möglichkeiten für die Erstellung einer React Native App. Für den Einstieg in die Entwicklung mit React Native ist Expo eine große Hilfe. Expo Apps sind schneller und leichter aufgesetzt, weder xCode noch Android Studio ist nötig. Wenn Ihre Apps umfangreicher werden und die Fähigkeiten von Expo übersteigen, ist „pure“ mit react-native init die Alternative. Damit stehen sämtliche Geräte-APIs zur Verfügung, bei Expo gibt es hingegen Beschränkungen. Schauen Sie sich für weitere Informationen in der offiziellen Anleitung den Abschnitt „Building Projects with Native Code“ an.
Fazit
React Native macht den Einstieg in die App-Entwicklung einfach. Sie können sofort Anwendungen für Android und iOS entwickeln, mit Expo fallen die ersten Schritte besonders leicht. Installieren Sie NPM, Expo und Git und probieren Sie die Entwicklungsumgebung aus. In wenigen Minuten wird Ihre erste App bereits auf dem verbundenen Smartphone angezeigt und der Inhalt nach abspeichern von Veränderungen im Editor automatisch aktualisiert.
Photo by Tinh Khuong on Unsplash
Die von Ihnen hier erhobenen Daten werden von der Host Europe GmbH zur Veröffentlichung Ihres Beitrags in diesem Blog verarbeitet. Weitere Informationen entnehmen Sie bitte folgendem Link: www.hosteurope.de/AGB/Datenschutzerklaerung/