React Native dient dazu, mobile Apps mit JavaScript zu erstellen, aber ihre Syntax sieht nicht wie ein Standard-JS aus. Erfahren Sie mehr über diese Technologie und prüfen Sie, ob es sich lohnt, sie zu verwenden.
A QUICK SUMMARY – FOR THE BUSY ONES
TABLE OF CONTENTS
Reagieren Sie nativ ist ein Framework für die Entwicklung mobiler Apps, das die Entwicklung plattformübergreifender Android- und iOS-Apps mithilfe nativer Benutzeroberflächenelemente ermöglicht. Es basiert auf der JavaScriptCore-Laufzeit und den Babel-Transformatoren. Mit diesem Setup unterstützt RN neue JavaScript-Funktionen (ES6+), z. B. Pfeilfunktionen, Async/Await usw.
Dieses berühmte Framework für Entwicklung mobiler Apps begann im Sommer 2013 als internes Hackathon-Projekt von Facebook. Die erste öffentliche Vorschau wurde im Januar 2015 auf der Reactjs Conference veröffentlicht und im März 2015 machte Facebook React Native offen und auf GitHub verfügbar.
Seitdem ist es weit verbreitet von Entwicklern und Organisationen aufgrund seiner Fähigkeit, native Apps und großartige Benutzeroberflächen zu erstellen. In der folgenden Grafik können Sie den steigenden Trend für React Native visualisieren. In nur 1,5 Jahren nach seiner Veröffentlichung überholte es die Entwicklung von Android und iOS.
Jetzt sollten Sie sich also nicht wundern, dass viele der Apps, die wir heute verwenden, über Geschäftslogik verfügen, die hauptsächlich mit JavaScript und nicht mit Java/Kotlin oder Objective-C/Swift erstellt wurde. Einige von ihnen sind Myntra, UberEats, Facebook und Instagram.
Da wir darüber gesprochen haben, was React Native ist, sind Sie möglicherweise verwirrt darüber, was „native App“ bedeutet.
Native mobile Apps sind Apps, die speziell für ein Betriebssystem entwickelt wurden, in diesem Fall entweder Android oder iOS. Für die Erstellung einer nativen App auf iOS verwenden wir die Entwicklungssprache Objective-C/Swift und für Android verwenden wir Java/Kotlin.
Ab React Native rendert die endgültige Benutzeroberfläche nicht einfach eine Webkomponente in einem WebView. Die Benutzeroberfläche wird gerendert unter Verwendung der tatsächlichen nativen Ansichten und grundlegende Bausteine, die nicht von den Apps zu unterscheiden sind, die mit Swift oder Java erstellt wurden.
Bevor wir auf die Details von React Native eingehen, wollen wir zunächst herausfinden, was React JS ist:
React Native ähnelt React JS, verwendet jedoch native Komponenten anstelle von Webkomponenten als wichtige Bausteine. Sie müssen einen Teil der grundlegenden React-Ideen wie JSX (JavaScript XML), Komponenten, Status und Requisiten sehen, um die grundlegende Struktur einer React Native-Anwendung zu verstehen.
Wenn Sie jedoch daran interessiert sind, Apps in React Native zu erstellen, ist das Erlernen von React JS nicht unbedingt erforderlich. Sie können einfach mit React Native beginnen.
Diese Frage haben wir am Anfang des Artikels teilweise beantwortet. Wir haben uns jedoch nicht mit technischen Aspekten der Architektur befasst. In diesem Abschnitt werden wir uns darauf konzentrieren, wie React Native funktioniert.
Schauen wir uns zunächst die Standardanwendung von React Native an, wie die folgende.
importiere React aus 'react';
importiere {Text, View} aus 'React-Native';
Standardklasse exportieren Brainhub erweitert React.Component {
rendern () {
zurückkehren (
Was ist React Native
);
}
}
Wenn Sie ein Webentwickler sind, der nur mit älteren JS-Standards vertraut ist, wird ein Teil des obigen Snippets für Sie wahrscheinlich nicht wie JavaScript aussehen. ES2015 (auch ES6 genannt) ist eine große Erweiterung von JavaScript, das derzeit Teil des offiziellen Standards ist. ES6 wird von älteren Browsern nicht unterstützt. Aus diesem Grund müssen Transpiler wie Babel verwendet werden.
Dank des Babel-Transpilers unterstützt React Native viele Funktionen von JavaScript ES2015, sodass Sie diese Technologie nutzen können, ohne sich Gedanken über die Kompatibilität mit verschiedenen Geräten machen zu müssen. Einige der Funktionen von ES2015 im angegebenen Snippet sind Import, From und Class. Wenn Sie mit ES2015 nicht vertraut sind, können Sie es einfach ausprobieren, indem Sie die Beispielcodes aus den im Ressourcenbereich aufgeführten Ressourcen durchgehen.
Dies ist JSX, eine Grammatik zum Einkapseln von XML in JavaScript. Es ermöglicht Ihnen, Ihren Code in der Auszeichnungssprache zu schreiben. Es sieht aus wie HTML, das wir in der Webentwicklung verwenden, aber anstatt <div>oder zu verwenden<span>, werden Sie React Native-Komponenten verwenden. Hier <Text>ist eine eingebaute Komponente, die nur einige Inhalte anzeigt und View ähnelt <div>oder<span>.
Dies war ein Beispiel für die Anzeige von „Was ist React Native“. Diese Textzeile fungiert als Komponente. Alles, was Sie auf dem Bildschirm sehen, ist eine Art von Komponente. Es kann wirklich einfach sein. Die Hauptsache, die benötigt wird, ist eine Renderfunktion, die etwas JSX zum Rendern zurückgibt.
Jede dieser Komponenten wird nativen Bausteinen zugeordnet, wenn wir unsere React Native App mit Android- oder iOS-Apps synthetisieren. Wie in diesem Fall <Text>wird sie <TextView/> in Android und UILabel in iOS zugeordnet.
React Native hat wie jede andere Technologie ihre Vor- und Nachteile. Bevor Sie entscheiden, ob React Native für Ihr spezielles Projekt geeignet ist, werfen Sie einen Blick auf den folgenden Spickzettel.
Der Hauptvorteil dieses Systems ist, dass es Zeit spart. Anfänglich erspart es den Entwicklern die Neukompilierung bei jeder Änderung, da die Anwendung während der Verbesserungsphase sofort neu geladen wird. Ein Android-Designer kann die Qual nachvollziehen.
Das Framework ermöglicht die Erstellung einer einzelnen Codebasis, die für iOS und Android kombiniert werden kann. Es ermöglicht dem Ingenieur, weniger Energie in die Codierung zu investieren.
Eine mobile Anwendung, die mit diesem Framework konzipiert wurde, garantiert eine erstklassige, phänomenale Ausführung und ein optimiertes Benutzererlebnis.
Darüber hinaus kann ein rundum vorbereiteter JavaScript-Ingenieur mithilfe dieses Frameworks eine vielseitige Anwendung entwickeln, ohne in das Ökosystem und die Sprachspezifikationen der einzelnen Betriebssysteme einzutauchen.
Die nachfolgende Benutzeroberfläche reagiert äußerst schnell und fühlt sich aufgrund der asynchronen JavaScript-Verbindungen mit den lokalen Bedingungen flüssig an.
Dies bedeutet, dass die Anwendung schnellere Ladezeiten hat und sich flüssiger anfühlt als die Anwendung, die mit einem Hybridmodell erstellt wurde.
Es ist ein komplexes Verfahren, um eine aus React Native erstellte App zu debuggen. Sie müssen prüfen, wie React Native den Code erstellt, und entscheiden, wie Sie darauf reagieren.
Manchmal erfordert die lokale Bibliothekskoordination innerhalb einer React Native-Anwendung viele Konfigurationen. Zum Beispiel wird eine Google Maps-Gliederung zu einer Langstreckenarbeit, während sie in einer Android Native-Anwendung einen Moment dauert.
Ionic und Cordova sind einige der anderen Frameworks, die für ähnliche Zwecke verwendet werden. Sie stellen die sogenannten Hybridanwendungen her. Diese werden mit Standard-Webinnovationen erstellt und sind in nativen grundlegenden Komponenten wie WebView enthalten. Ganz und gar nicht wie React Native, daher ist es eine echte Überlagerung der nativen Entwicklung.
Wie bereits erwähnt, verwendet React Native native Bausteine und ist kein Overlay für das Betriebssystem. Tatsächlich wird der in JavaScript zusammengesetzte Code zu nativen Codes (grundlegende Bausteine) synthetisiert. Am Ende haben wir also eine Anwendung, die vollständig native Komponenten verwendet, die vom JavaScript-Thread gesteuert werden, anstatt von einer Webanwendung, die in der WebView-Komponente platziert ist.
Das Cordova oder Ionic Die erstellte grafische Oberfläche wird in einer Webansicht angezeigt, was ihre Produktivität und Qualität sowie das Kundenerlebnis beeinträchtigt. Apps, die mit dieser Technologie entwickelt wurden, verfügen nicht über eine native UX-Gebühr.
In diesem Artikel haben wir gesehen, dass React Native React ähnelt, das selbst eine JavaScript-Bibliothek zur Erstellung von Schnittstellen ist. Folglich müssen Sie sich mit Webtechnologien wie JavaScript, JSX und sogar der CSS-ähnlichen Stylesheet-Syntax für die Komponentenanpassung auskennen. Obwohl das React Native Framework einige Komplexitäten aufweist, hat es alle Tests und Hindernisse gemeistert und ist am Ende das erste Wahl für viele Entwickler.
Our promise
Every year, Brainhub helps 750,000+ founders, leaders and software engineers make smart tech decisions. We earn that trust by openly sharing our insights based on practical software engineering experience.
Authors
Ein Serienunternehmer, leidenschaftlicher Forschungs- und Entwicklungsingenieur mit 15 Jahren Erfahrung in der Technologiebranche. Teilt sein Expertenwissen über Technologie, Startups, Geschäftsentwicklung und Marktanalysen.
Ein Serienunternehmer, leidenschaftlicher Forschungs- und Entwicklungsingenieur mit 15 Jahren Erfahrung in der Technologiebranche. Teilt sein Expertenwissen über Technologie, Startups, Geschäftsentwicklung und Marktanalysen.
Read next
Popular this month
previous article in this collection
It's the first one.
