Was ist React Native? | Eine Codebase für nahtlose mobile Anwendungen
Früher waren die Möglichkeiten zur Entwicklung von mobilen Anwendungen recht begrenzt. Man hatte im Wesentlichen die Wahl, seine App zweimal zu entwickeln – was bedeutete, Logik und Struktur sowohl für iOS als auch für Android zu duplizieren – oder man konnte Frameworks wie Apache Cordova oder Adobe Phonegap verwenden. Diese Frameworks ermöglichen die Erstellung sogenannter hybrider Apps, bei denen Code plattformübergreifend wiederverwendet werden kann und die zudem Zugriff auf native Geräteschnittstellen bieten. Der größte Nachteil von Hybrid-Apps ist jedoch, dass die Komponenten in Webviews gerendert werden. Dies macht nicht nur die Anwendung langsam, sondern sie fühlt sich für die Nutzer auch in Bezug auf die Reaktionsgeschwindigkeit träge an. Wäre es nicht ideal, die Vorteile von Hybrid-Apps zu nutzen und dabei sicherzustellen, dass die App schneller ist als eine reine Webanwendung, die lediglich in einem Browser eingebettet ist? Genau hier kommt React Native ins Spiel.
Was ist React Native?
React Native ist ein JavaScript-Framework zur Erstellung nativer mobiler Anwendungen. Es basiert auf React und wird aktiv von Meta (ehemals Facebook) gepflegt. Viele beliebte Apps nutzen React Native, darunter Facebook, Microsoft Teams, Discord und viele mehr. Um herauszufinden, warum das so ist, werfen wir einen Blick auf die Architektur von React Native.
Während die Komponenten in React geschrieben werden, erfolgt das eigentliche Rendering über die nativen APIs der jeweiligen Plattform und nicht über Webviews. Dies sorgt für eine deutlich schnellere und reaktionsfreudigere Benutzererfahrung.
Die React Native Bridge wandelt React Native-Komponenten, die in React geschrieben wurden, in ihre plattformspezifischen nativen Äquivalente um, wie zum Beispiel Android.View (Android), UIView (iOS) und div (HTML).
React Native stellt einige grundlegende Komponenten wie View , Text , Image und ScrollView bereit, die direkt auf die nativen Komponenten der jeweiligen Plattform abgebildet werden. Darüber hinaus sind auf npm viele Drittanbieter-Bibliotheken verfügbar, die zusätzliche Komponenten und Funktionalitäten bieten.
Komponentenzusammensetzung einer React Native-App
Einstieg in React Native als React-Entwickler:in
Als React-Entwickler ist man meist bereits vertraut mit den Grundlagen des State- Managements, React Hooks und JSX. Die gute Nachricht ist, dass dieses Wissen die Grundlage für das Erlernen von React Native ist. Der Weg, um Komponenten oder Views in React Native zu schreiben, benötigt etwas Eingewöhnung wenn man aus der Webentwicklung kommt, ist aber nicht all zu kompliziert. Während in React reguläre HTMLElemente wie <div> , <p> oder <img> verwendet werden, benutzt man in React Native Komponenten wie <View> , <Text> oder <Image> . Die folgende Tabelle bietet einen guten Überblick über die gängigsten Komponenten in React Native, ihre entsprechenden Android- und iOS-Komponenten sowie ihre Entsprechungen in der Webentwicklung:
React Native UI-Komponente Android View iOS View Web Analog Beschreibung
Da React Native nicht in einer Browserumgebung, sondern direkt auf dem Gerät ausgeführt wird, ist es nicht möglich, CSS zur Gestaltung der Komponenten zu verwenden. Stattdessen wird die StyleSheet-API bereitgestellt, die CSS ähnelt. Mit dieser API können Stile für Komponenten definiert werden, indem ein StyleSheet - Objekt erstellt und über die style-Eigenschaft an die jeweilige Komponente übergeben wird. Im folgenden Beispiel wird gezeigt, wie eine einfache React Native-App unter Verwendung der StyleSheet-API erstellt werden kann:
import React from 'react';
import { Text, View, StyleSheet } from 'react-native';
const App = () => {
return (
<View style={styles.container}>
<Text style={styles.text}>Hello World! 🎉</Text>
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},
text: {
fontSize: 20,
}
});
export default App;
Sie brauchen React Native Expertise für Ihre Web App? Schreiben Sie uns unverbindlich, wir freuen uns drauf!
Ihr Ansprechpartner: Michael Jaser, Co-Founder
Stärken von React Native
React Native ist eine beliebte Wahl für die Entwicklung plattformübergreifender mobiler Anwendungen. Einer der Hauptgründe dafür ist das umfangreiche Ökosystem von Paketen und Bibliotheken, die den Entwicklungsprozess vereinfachen, indem sie einfache und schnell nutzbare Lösungen für häufige Aufgaben bieten. Zusätzlich sorgen die umfassende, gut gepflegte Dokumentation und zahlreiche Community-Ressourcen dafür, dass Entwickler schnell Antworten auf ihre Fragen finden und Best Practices befolgen können. Weitere Gründe, warum React Native eine gute Wahl für die Entwicklung einer App ist:
- Open-Source-Bibliothek, unterstützt von Meta.
- Höhere Effizienz und geringere Kosten, da weniger Personen für das Projekt benötigt werden.
- React Native empfiehlt standardmäßig die Verwendung von TypeScript.
- Eine einzige Codebase zur Entwicklung von sowohl mobilen Apps als auch Desktop-Apps.
- Einfache Integration von nativen Modulen.
Herausforderungen bei der Verwendung von React Native
Die Entwicklung mobiler Apps mit React Native bringt einige Herausforderungen mit sich. Diese resultieren größtenteils daraus, dass es sich um die Entwicklung einer mobilen Anwendung und nicht um eine Webanwendung handelt. Das bedeutet, dass mit unterschiedlichen Bildschirmgrößen, variierenden Geräteleistungen und verschiedenen Ökosystemen umgegangen werden muss. Zudem erfordert das Testen der App die Verwendung von Simulatoren oder Emulatoren, die manchmal langsam sein können. Auch die Bereitstellung und das Debuggen der App gestalten sich komplexer als in der Webentwicklung. Ein weiteres Problem besteht im verzögerten Zugriff auf neue Funktionen oder APIs, die in Android oder iOS eingeführt werden. Diese stehen in React Native häufig nicht sofort zur Verfügung. Es ist jedoch möglich, Bibliotheken in den nativen Sprachen zu schreiben und sie in das React Native-Projekt zu integrieren, um neue Funktionen sofort zu nutzen.
Darüber hinaus bietet React Native nur die Grundstruktur für die Entwicklung mobiler Apps. Um eine vollständig funktionale Anwendung zu erstellen, müssen Tools und Bibliotheken manuell kombiniert werden. Hier hilft Expo, das eine Reihe von Werkzeugen bereitstellt, um diesen Prozess zu vereinfachen.
In welchen Projekten nutzen wir React Native?
Bei Peerigon haben wir React Native als plattformübergreifende Technologie in unseren Tech-Stack integriert. Wir haben es genutzt, um die App unseres eigenen Abstimmungstools Konsens zu entwickeln, und sind begeistert, wie reibungslos bisher alles funktioniert hat. React Native übernimmt viele sich wiederholende Entwicklungsaufgaben, bietet robuste Unterstützung und ein weitreichendes Ökosystem, das den Prozess vereinfacht. All das hat es uns ermöglicht, uns auf das Produkt und die Benutzererfahrung zu konzentrieren, anstatt uns mit den mühsamen Details plattformspezifischer APIs oder der aktiven Entwicklung zweier Apps für iOS und Android zu beschäftigen. Neugierig, Konsens live zu sehen und selbst auszuprobieren? Hier geht es zum Download von Konsens!
Konsens: Mitbestimmung per Abstimmung
Wir haben teamintern nach fairen Möglichkeiten der demokratischen Mitbestimmung im Unternehmen gesucht und kurzerhand eine App dafür entwickelt. Unser Abstimmungstool Konsens erleichtert Gruppenentscheidungen, ob im Büro oder von zu Hause aus. Entscheidungswege damit werden für alle einsichtig, während die einzelnen Stimmen anonym bleiben. Wir haben Konsens als Onlineapp in Deutschland gehostet und für andere Unternehmen oder Privatpersonen frei und kostenlos zugänglich gemacht.
Starke Partner für React Native Apps
Unsere Softwareentwickler:innen bringen React Native-Methoden dort zum Einsatz, wo sie Sinn machen. Ob Starthilfe beim Setup oder lückenlose Überführung bestehender Codebases: Fragen uns Sie einfach an!