React kriegt Beine

React Native im Überblick
Keine Kommentare

Facebooks React-Framework liefert sich mit Angular einen Kampf um die Vorherrschaft im Bereich der Webframeworks. Das Entwicklerteam öffnete mit der Auslieferung von React Native zudem eine neue Front – das Produkt legte sich auch mit Teleriks NativeScript an.

Seit seinem Erscheinen durchlief React Native eine extrem aggressive Entwicklung: Waren die GUI-Stacks der beiden Plattformen anfangs komplett getrennt, so erfolgte mittlerweile eine – wenn auch nur teilweise – Standardisierung. Wer mit JavaScript kompetent umgehen kann und etwas Handarbeit nicht scheut, kann mit React Native Applikationen für Android, iOS und – inoffiziell – sogar die Universal Windows Platform erzeugen. Neben Smartphones und Tablets kommt Ihr Programm so sogar auf die Xbox One. Da Artikel zur Arbeit mit Android und iOS mittlerweile weit verbreitet sind, beginnt dieser mit Windows: Der Großteil der hier besprochenen Konzepte lässt sich allerdings auch auf die anderen beiden Plattformen übertragen.

Vorbereitendes

Wie die meisten anderen Cross-Plattform-Frameworks lebt auch React Native in der Node.js-Umgebung: Der erste Schritt zu Beginn der Arbeit mit React Native besteht darin, das bereitstehende Installationspaket herunterzuladen und wie gewohnt zu installieren. Die folgenden Schritte erfolgen auf einer 64-Bit-Workstation mit Windows 10 1703 – ältere Versionen verhalten sich im Großen und Ganzen analog.

Wer nicht unter Windows entwickeln möchte, öffnet GitHub und klickt auf den Tab BUILDING PROJECTS WITH NATIVE CODE. Das in früheren Versionen des Frameworks erforderliche schrittweise Herunterladen von React Native entfällt neuerdings ersatzlos, da das Entwicklerteam mit create-react-native-app ein fertiges Paket zur Verfügung stellt. Es lässt sich mit dem npm-Kommando PS C:\Users\tamha> npm install -g create-react-native-app installieren.

Bei der Arbeit mit React Native ist es sinnvoll, ein an Eclipse und Co. erinnerndes Arbeitsverzeichnis anzulegen. Der Autor arbeitet in den folgenden Schritten mit C:\reactplace – wechseln Sie mit der PowerShell in den betreffenden Ordner, um die Erzeugung eines neuen Projektskeletts anzustoßen:

PS C:\reactplace> create-react-native-app SUSWinProject
Creating a new React Native app in C:\reactplace\SUSWinProject

Wundern Sie sich nicht, dass das Produkt im Rahmen des ersten Starts einige zusätzliche Komponenten herunterlädt: Die Wege des Node Package Managers sind stellenweise unergründlich. Nach getaner Arbeit wird der in Abbildung 1 gezeigte Text ausgegeben.

Abb. 1: React Native ist einsatzbereit – der Download kann schon einmal eine Stunde in Anspruch nehmen

Abb. 1: React Native ist einsatzbereit – der Download kann schon einmal eine Stunde in Anspruch nehmen

Im nächsten Schritt muss das Windows-spezifische Plug-in heruntergeladen werden. Dieses darf – anders als die Hauptteile von React Native – nicht in den globalen Assembly-Cache der Workstation und wird stattdessen im Projektunterverzeichnis installiert:

PS C:\reactplace> cd .\SUSWinProject\
PS C:\reactplace\SUSWinProject> npm install --save-dev rnpm-plugin-windows

Wundern Sie sich nicht über Warnungen in Bezug auf das Fehlen des Haupt-React-Pakets. Viel wichtiger ist es, die Kommandozeilen-Utility im nächsten Schritt zum Erweitern des Projekts mit PS C:\reactplace\SUSWinProject> react-native windows zu animieren.

Kommt es bei der Abarbeitung des Kommandos zu einem Fehler der Bauart react-native : The term ‚react-native‘ is not recognized as the name of a cmdlet, so müssen Sie die React Native Toolchain separat mithilfe des Befehls PS C:\reactplace\SUSWinProject> npm install -g react-native-cli herunterladen. Führen Sie react-native windows danach abermals aus, um die Generierung eines für Visual Studio verwendbaren Projektskeletts abzuschließen. Das erfolgreiche Durchlaufen führt zum in Abbildung 2 dargestellten Resultat.

Abb. 2: Die Generierung der Projektstruktur verlief erfolgreich

Abb. 2: Die Generierung der Projektstruktur verlief erfolgreich

Als paralleles Ärgernis präsentiert sich ein kleines Problem in der von React Native generierten Projektstruktur: Zum Zeitpunkt der Drucklegung wird nur Visual Studio 2015 unterstützt. Der Downloadlink für ältere Versionen der IDE ist gut versteckt: Öffnen Sie die Visual Studio-Homepage und scrollen Sie nach unten, um den Downloadlink zu aktivieren. Nutzer der kostenlosen Visual Studio Dev Essentials können den Web-Installer der vergangenen Version der IDE herunterladen: Nutzen Sie die Custom-Einstellung, um eine Basisversion von Visual Studio 2015 zu installieren. Die IDE beklagt sich bei installiertem Visual Studio 2017 darüber, dass einige Module schon am Platz sind und nicht nochmals heruntergeladen werden können; ignorieren Sie diesen Fehler.

Des Pudels Kern

Abb. 3: Ein React-Native-Projekt besteht aus einer Gruppe von Unter-Solutions

Abb. 3: Ein React-Native-Projekt besteht aus einer Gruppe von Unter-Solutions

Nach dem erfolgreichen Abarbeiten der Vorbereitungshandlungen – je nach Workstation und Internetverbindung können hier schon mal zwei Stunden draufgehen – ist es nun an der Zeit, React Native zu beschnuppern. Klicken Sie in Visual Studio auf FILE | OPEN | PROJECT und wählen Sie die Datei windows\SUSWinProject.sln aus. Beim erstmaligen Laden eines React-Native-Projekts fordert Visual Studio das Herunterladen eines Windows-SDKs und der Universal Windows Utilitys an; stimmen Sie beidem zu, woraufhin abermals einige Zeit ins Land geht. Nach getaner Arbeit präsentiert sich die in Abbildung 3 gezeigte Solution-Struktur.

ChakraBridge enthält eine Gruppe von Bibliotheken, die als Makler zwischen C++- und C#-Teilen agieren. Die Projekte ReactNative und ReactNative.Shared dienen als Repositories für den eigentlichen Frameworkcode, während das Projekt SUSWinProject den vom Entwickler bereitgestellten Code samt dem für die Ausführung notwendigen Harnisch bereitstellt.

Hands off!

Facebook weist in der Dokumentation an mehreren Stellen darauf hin, dass die drei Nebenprojekte im Rahmen von Updates des Frameworks überschrieben werden können. Änderungen daran sollten nur gemäß der beschriebenen Vorgehensweise erfolgen.

Von besonderem Interesse ist hier eigentlich nur die Datei MainPage.cs, die – für Windows-Universal-Applikationen seltsam – ohne Code Behind auskommt und die in Listing 1 dargestellte Struktur aufweist.

class MainPage : ReactPage
{
  public override string MainComponentName{
    get{
      return "SUSWinProject";
    }
  }
}

Als Erstes findet sich eine Funktion, die den Namen des als Einsprungspunkt dienenden JavaScript-Files exponiert. Dieser String dient dem Framework während der Programmausführung zur Identifikation der zu verwendenden Klasse. In der Packages-Enumeration erfolgt die Festlegung aller Pakete, die in der Applikation erforderlich sind. Für Sie ist dieser Teil des Programms immer dann relevant, wenn Sie Ihrem Programm native Zusatzintelligenz einschreiben wollen (Listing 2).

public override List<IReactPackage> Packages {
  get {
    return new List<IReactPackage> {
      new MainReactPackage(),
    };
  }
}

Zu guter Letzt findet sich noch die Deklaration des Developer-Zustands. Sie ist insofern relevant, als das Retournieren von false die Runtime anweist, die diversen in ihr enthaltenen Hilfsfeatures im Interesse maximaler Performance zu deaktivieren (Listing 3).

public override bool UseDeveloperSupport {
  get{
    #if !BUNDLE || DEBUG
    return true; . . .
  }
}

Das vom CLI generierte Projekt ist von Haus aus für die Ausführung auf ARM-Prozessoren vorgesehen. Aufgrund der Binärunabhängigkeit der UWP ist allerdings kein Emulator erforderlich; stellen Sie als Ziel einfach x86 oder x64 ein, um das Programmbeispiel wie jede andere Applikation starten zu können. Auf der Workstation des Autors erwies sich React Native beim Anklicken von Run stellenweise als etwas umständlich: Während der Kompilierung kann der Fehler Metadata file ‚C:\reactplace\SUSWinProject\node_modules\react-native-windows\ReactWindows\ReactNative\bin\x86\Debug\ReactNative.dll‘ could not be found auftreten. Klicken Sie in diesem Fall das React-Native-Projekt (Universal Windows) rechts an und befehlen Sie eine manuelle Rekompilierung. Danach kann die Programmausführung wie gewohnt erfolgen – der Lohn der Mühen ist der in Abbildung 4 gezeigte Fehler.

Abb. 4: Rot bedeutet böse – auch in der Welt von React Native

Abb. 4: Rot bedeutet böse – auch in der Welt von React Native

Die Ursache dieses auf den ersten Blick widersinnig erscheinenden Verhaltens ist, dass eine im Debugging-Modus befindliche React-Native-Applikation keinen JavaScript-Code enthält. Dieser wird stattdessen während der Programmausführung über einen Hilfsserver von der Workstation des Entwicklers bezogen – die für Produktivapplikationen vorgesehene Datei index.windows.bundle ist im von react-native generierten Projektskelett leer. Kehren Sie in PowerShell in das Projektverzeichnis zurück und starten Sie die Programmausführung durch Eingabe von react-native start. Der erste Start des Produkts nimmt etwas Zeit in Anspruch; achten Sie darauf, die Firewall-Warnung positiv zu quittieren. Startbereit ist das Werkzeug übrigens erst dann, wenn der Bundling-Prozess zur Gänze durchgelaufen ist.

Die PowerShell steht!

Das Einblenden des Markierungscursors animiert die PowerShell dazu, die Programmausführung einzustellen; beachten Sie dies, falls manche Kommandos ungewöhnlich lange dauern.

Ändere den Code

Das erfolgreiche Deployment in Emulator oder Gerät beweist, dass das vom Projektgenerator erzeugte Skelett funktionsfähig ist. Leider haben wir bisher noch keinen JavaScript-Code gesehen: React Native unterscheidet sich insofern von anderen Cross-Plattform-Systemen, als dass der JavaScript-Code in seiner eigenen Welt lebt. Öffnen Sie den Projekthauptordner, um zwei JavaScript-Dateien offenzulegen. index.windows.js ist – der Namenssuffix spricht eine klare Sprache – die Windows-spezifische Version. Ihr Inhalt sieht aus wie in Listing 4 dargestellt.

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View
} from 'react-native';

An oberster Stelle in der Datei findet sich die Inklusion einiger Komponenten aus dem React-Native-Hauptpaket. Spezifischerweise laden wir an dieser Stelle GUI-Elemente, die im folgenden Schritt verwendet werden. Die im soeben besprochenen C#-Harnisch erwähnte Klasse SUSWinProject entsteht unter Ableitung von Component; es handelt sich dabei um ein Basissteuerelement. Von besonderem Interesse ist seine render()-Unterfunktion, die eine an HTML erinnernde Struktur wie in Listing 5 zurückgibt.

class SUSWinProject extends Component {
  render() {
    return (
      <View style={styles.container}>
      <Text style={styles.welcome}>
      Welcome to React Native!
      </Text>
      <Text style={styles.instructions}>
      . . .
      </View>
    );
  }
}

In React erfahrene Entwickler können an dieser Stelle aufatmen: Die Syntax wurde von der „normalen“ Version des Produkts übernommen. Wer von anderen Frameworks umsteigt, findet das Fehlen der Stringtrennzeichen auf den ersten Blick befremdlich; in der Praxis gewöhnt man sich schnell daran.

Die Formatierung der am Bildschirm erscheinenden Steuerelemente erfolgt – Ähnlichkeiten zu Web-Apps sind intendiert – über eine an CSS erinnernde Sprache. Stylesheets lassen sich direkt in JavaScript-Dateien einbinden; unser momentanes Sheet ist stark gekürzt (Listing 6).

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },. . .
});

Beachten Sie, dass die syntaktische Ähnlichkeit zu CSS trügerisch ist: Die Darstellung der Steuerelemente erfolgt in React Native durch den GUI-Stack der Plattform, der normalerweise nur wenig mit CSS anzufangen weiß. Daraus folgt, dass der unterstützte Teil von CSS mitunter von Widget zu Widget unterschiedlich sein kann. Beachten Sie dies, bevor Sie wahnsinnig werden.

Am Ende dieser Datei findet sich noch ein immens wichtiges Element: Die JavaScript- und C#-Teile des Projekts sind normalerweise nicht miteinander verbunden. Das Durchdringen der Barriere ist nur jenen Klassen erlaubt, die von Hand exponiert werden – im Fall von SUSWinProject erfolgt dies mit registerComponent über AppRegistry.registerComponent(‚SUSWinProject‘, () => SUSWinProject);.

Hast du uns lieb?

Wie bei der Arbeit mit Qt gilt auch in React Native, dass das Ping-Pong-Spielen zwischen der nativen und der webbasierten Applikation vermieden werden sollte. Ein klassisches Antipattern wäre beispielsweise ein Taschenrechner, bei dem ein nur für die Veränderung der Anzeige (Stichwort Anhängen einer Eins) zuständiger Button eine C++-Routine aufruft, die ihrerseits wiederum mit dem GUI interagiert.

Awesome React Native

Das React-Native-Team empfiehlt die bereitstehende Liste von Komponenten – konsultieren Sie sie vor dem Draufloscoden. Ob der hohen Verbreitung des Frameworks ist es mehr als wahrscheinlich, dass ein anderer Entwickler schon ein ähnliches Problem hatte und eine fertige Lösung zum Download bereitsteht.

Zur Vorführung des GUI-Stacks von React Native wollen wir ein kleines Programm realisieren, das elektrische Leistungen anhand der klassischen Formel P = U * I ausrechnen kann. Hierzu sind einige Steuerelemente notwendig, was uns zur in Abbildung 5 gezeigten Struktur bringt.

Abb. 5: Struktur der Steuerelementhierarchie von React Native

Abb. 5: Struktur der Steuerelementhierarchie von React Native

Aufgrund der hohen Kommunalität zwischen Android und iOS gibt es im Bereich der Basic Components eine Gruppe von Steuerelementen, die in allen mobilen Betriebssystemen gleichermaßen zur Verfügung stehen. Das gilt auch für die User-Interface-Kategorie: React Native verbirgt hier drei Steuerelemente, die für das Entgegennehmen von nicht textuellen Eingaben verantwortlich sind. Hinter dieser auf den ersten Blick komplex klingenden Formulierung verstecken sich Elemente wie eine Combobox oder ein Slider, mit dem der Benutzer numerische Werte eingeben kann.

Ebenfalls gemein ist ihnen, dass Mobilplattformen zur Anzeige von Informationen mehr oder weniger komplexe Steuerelemente mitbringen, die die zur eigentlichen Anzeige verwendeten Widgets recyceln. React Native bildet dies über die Familie der ListViews ab. Zu guter Letzt gibt es für iOS und Android eine Gruppe von spezifischen Plattformsteuerelementen, die nur unter dem jeweiligen System zur Verfügung stehen. Auf die diversen anderen Komponenten, die in unserem Diagramm nicht abgedruckt sind, können wir an dieser Stelle nicht weiter eingehen – die Online einsehbare Dokumentation bietet an dieser Stelle jede Menge hilfreiche Informationen.

Unsere nächste Aufgabe besteht darin, das Benutzerinterface unseres Programms zu realisieren. Hierzu wollen wir drei Textelemente verwenden, die für die Anzeige statischer Labels verantwortlich sind. Zudem sind drei TextInput-Elemente erforderlich, über die der Benutzer die für die Berechnung zu verwendenden Werte eingeben kann. Anschließend platzieren wir auf der Unterseite des Formulars noch einen Button zum Starten der Berechnung.

Es sei angemerkt, dass diese Vorgehensweise aus Usability-Sicht nicht unbedingt ideal ist. In Zeiten von immer höher werdender Rechenleistung ist es auch im Mobilbereich empfehlenswert, „kleine“ Berechnungen während der Eingabe durchzuführen.

Low Battery?

Ein richtig nettes Feature ist es, die automatische Berechnung zu deaktivieren, wenn der Akku des Telefons unter einen gewissen Stand fällt. Neben dem für Power User kaum zu ignorierenden Appeal dieses Features bietet es auch Stoff für eine Pressemitteilung.

Um den „Lernaufwand“ in Grenzen zu halten, wollen wir unser Formular stufenweise realisieren. Als Erstes wird der Inhalt von Render angepasst (Listing 7).

render() {
  return (
    <View style={styles.container}>
    <TextInput
    editable = {true}
    value = {this.props.textU}
    />
    <TextInput . . .
  )
}

Die von React Native realisierten Steuerelemente agieren wie gewöhnliche HTML5-Widgets: Die zur Zuweisung von Eigenschaften verwendete Syntax dürfte geläufig sein. Ein weiteres interessantes Attribut ist, dass man im Hause React nach Möglichkeit nicht mit „Instanzzeigern“ arbeitet, sondern die Interaktion mit den einzelnen Attributen stattdessen durch Eigenschaftsfelder erfolgt, die als Props bezeichnet werden. Jedes Steuerelement hat sein Basiselement, das als Referenz zur Auflösung von Verweisen betrachtet wird. Im Fall unserer Textboxen wären dies beispielsweise die Felder textP, textU und textI. React zeigt sich an dieser Stelle insofern tolerant, als dass Props nicht im Rahmen eines Konstruktors angelegt werden müssen (Listing 8).

<Button
    title="Los!"
    onPress={() => this._handlePress()}>
    </Button>
    </View>
    );
  }
}

Bei der Deklaration des Knopfs findet sich ein markanter Unterschied: Im Internet findet man immer wieder Beispiele, in denen der anzuzeigende Text des Knopfs zwischen dem Start- und dem End-Tag unterkommt. Bei der Arbeit unter Windows führt dieses Verhalten zu einem Fehler, weshalb wir stattdessen auf das Attribut title setzen.

Zu guter Letzt ist interessant, wie die im Fall einer Aktivierung aufzurufende Funktion aussieht:

class SUSWinProject extends Component {
  _handlePress(){ }

Zur Vermeidung von Fehlern während der Programmausführung müssen die in render() erstmals verwendeten Widgets in den Header der .js-Datei importiert werden. Ob Sie die Imports alphabetisch sortieren oder fehlende Klassen einfach am Ende der Liste antackern, bleibt hierbei komplett Ihrem Geschmack überlassen (Listing 9).

import {
  . . .
  Button,
  . . .
  TextInput, . . .
} from 'react-native';

Mit dem Code aus Listing 9 können Sie das Programm aktualisieren. Achten Sie darauf, dass die .js-Datei im Editor Ihrer Wahl gespeichert ist, und drücken Sie auf STRG + R. Solange der Server nicht durch eine Markierung blockiert ist, erscheint die neue Formularstruktur umgehend am Bildschirm.

Theoretisch könnten wir den Inhalt der Textbox verändern, indem wir einen Wert in textP einschreiben. Das würde sich beispielsweise nach folgendem Schema bewerkstelligen lassen:

handlePress(){
  this.props.textP="222";
}

Wer das Programm auf diese Art und Weise ausführt, stellt beim Anklicken des Buttons fest, dass nichts passiert. Das liegt daran, dass Props als statisch betrachtet werden; der GUI-Stack liest sie während der „Initialisierung“ des Steuerelementbaums aus, um sich nachher nicht mehr weiter mit ihnen abzugeben. Dynamische Inhalte werden stattdessen in einer Struktur namens state untergebracht – zu ihrer Nutzung müssen wir die drei Textelemente nach dem Schema in Listing 10 adaptieren.

<TextInput
editable = {true}
value = {this.state.textU}
/>
<TextInput
editable = {true}
value = {this.state.textI}
/>
<TextInput
editable = {true}
value = {this.state.textP}
/>

Beachten Sie, dass Änderungen an state nicht durch das direkte Beschreiben der Variablen erfolgen können. Stattdessen muss eine „Transaktion“ durchgeführt werden, was durch Code nach folgendem Schema erfolgt:

class SUSWinProject extends Component {
  handlePress(){
    this.setState({textP:"Hallo!"});
  }
}

Wie so oft, gilt auch hier, dass diese etwas umständliche Vorgehensweise auf eine Schwäche der JavaScript-Sprachspezifikation zurückzuführen ist: Die Programmiersprache sieht keinen Weg vor, über den sich ein Programm für Änderungen einer Variable anmelden kann. Das ist übrigens nicht unbedingt unsinnvoll, würde die Implementierung eines derartigen Features doch Unmengen von Rechenleistung verbrauchen.

International PHP Conference

Migrating to PHP 7

by Stefan Priebsch (thePHP.cc)

A practical introduction to Kubernetes

by Robert Lemke (Flownative GmbH)

API Summit 2018

From Bad to Good – OpenID Connect/OAuth

mit Daniel Wagner (VERBUND) und Anton Kalcik (business.software.engineering)

Rein theoretisch wäre das Programm in diesem Zustand ausführungsbereit; wer es tatsächlich probiert, wird mit der Fehlermeldung Unable to get property ‘textU’ of undefined or null reference abgefertigt. Das liegt daran, dass React Native beim Errichten einer statusbezogenen Steuerelementstruktur überprüft, ob die jeweiligen Elemente schon am Platz sind. Zur Behebung dieses Problems reicht es aus, dem Beispielprogramm einen Konstruktor einzuschreiben (Listing 11).

class SUSWinProject extends Component {
  constructor(props){
    super(props);
    this.state={
    textU:"22",
    textI:"2",
    textP:""
  };
}

Von besonderer Relevanz ist an dieser Stelle, dass wir die eingehenden Parameter unter Nutzung der Funktion super an den Konstruktor der Basisklasse übergeben – damit ist sichergestellt, dass alle Informationen auch dort ankommen, wo sie erforderlich sind. Sodann müssen wir nur noch die Berechnungsmethode anpassen, die in Listing 12 dargestellt ist.

handlePress(){
  var u=this.state.textU;
  var i=this.state.textI;
  var pAsString= u*i;
  this.setState({textP:pAsString.toString()});
}

React Native zeigt sich an dieser Stelle strenger als der JavaScript-Sprachstandard: Die an die Members von setState übergebenen Elemente müssen Strings sein; andernfalls wird zur Laufzeit eine Warnung ausgegeben. Sonst ist das Programm fürs Erste testbereit.

Magier der Komponente

Auch wenn unser Leistungsrechner an dieser Stelle funktioniert, erfüllt er nicht das Pflichtenheft. Spezifisch fehlen uns die Labels, die die derzeit farblosen Eingabefelder mit zusätzlichen Kontextinformationen ausstatten. Rein theoretisch könnten wir sie einfach antackern – interessanter wäre es, wenn wir dies als Anlass nähmen, um uns mit dem Components-System von React Native auseinanderzusetzen.

Entwickler können in diesem Framework eigene Steuerelemente kreieren, die sodann mit den im Framework enthaltenen Elementen gleichwertig sind und ihnen von der Einsetzbarkeit her in keiner Weise nachstehen. Erstellen Sie auf Ebene der Indexdatei ein weiteres File namens suscomponent.js und statten Sie es mit um die diversen Inklusionen gekürzten Code aus (Listing 13).

import PropTypes from 'prop-types';
export default class SUSComponent extends Component {
  render() {
    return (
      <Text>{this.props.mylabel}</Text>
    );
  }
}

Neben dem Laden diverser Komponenten müssen wir auch das PropTypes-Attribut bereitstellen; es handelt sich dabei um eine Gruppe von Konstanten, mit denen Sie die diversen Properties mit Datentypen verdrahten können:

SUSComponent.propTypes = {
  mylabel: PropTypes.string
};

AppRegistry.registerComponent('SUSComponent', () => SUSComponent);

Komponenten entstehen in React Native durch Aufruf der weiter oben kurz angesprochenen registerComponent-Methode: Sie meldet die übergebene Klasse unter dem jeweiligen String bei der Runtime an. Die in geschwungenen Klammern gesetzten Attribute realisieren Props, die im Rahmen der Invokation aus JSX heraus parametriert werden können.

Ein Ärgernis ist die Inklusion: Der React Native Bundler kann die fehlenden Komponenten nicht automatisch erreichen. Aus diesem Grund muss der Import-Befehl mit einem vollwertigen Pfad ausgestattet werden; die Qualifikation mit ./ ist notwendig:

import SUSComponent from './suscomponent.js';

Zu guter Letzt erfolgt die Inklusion in die render()-Funktion, bei der sich die Komponente wie erwartet verhält:

render() {
  return (
    <View style={styles.container}>
    <SUSComponent  mylabel="U"/>

Vor dem eigentlichen Deployment müssen Sie react-native start neu starten, um die Aktualisierung des Abhängigkeitsgraphen zu erzwingen. Ab diesem Zeitpunkt erscheint das Label auf dem Bildschirm – unsere erste (primitive) Komponente ist einsatzbereit.

Mach es nativ

Aus Platzgründen müssen wir die Besprechung von React Native an dieser Stelle beenden. Die Möglichkeit, durch nativen Code zusätzliche Funktionen einzubinden, verdient allerdings zumindest eine kurze Erwähnung: React Native erlaubt neben der Einbindung von Logik auch das Errichten von Wrappern, die ganze Steuerelemente für render()-Methoden ansprechbar machen. Weitere Informationen hierzu finden sich auf GitHub; alternativ dazu wird es in im Windows Developer in absehbarer Zeit einen Artikel zu diesem Thema geben.

Fazit

React Native und NativeScript unterscheiden sich beide insofern von PhoneGap, als dass sie statt einer Browserinstanz auf eine vollwertige JavaScript-Runtime setzen, die über proprietären Glue mit dem GUI-Stack des jeweiligen Zielbetriebssystems verbunden wird. Der wichtigste Unterschied der beiden Frameworks ist die Art der Realisierung von Benutzerschnittstellen: Während man im Hause Telerik auf separate XML-Dateien setzt, arbeitet der React-Nutzer normalerweise mit in den Rest des Codes eingebundenen XML-Strings.

Die Frage nach der besseren Vorgehensweise ist akademisch: Hat Ihr Unternehmen bereits existierendes geistiges Eigentum in React, so ist React Native mit Sicherheit die bessere Wahl. Im anderen Fall empfiehlt es sich, einen Zensus der Entwickler durchzuführen und das populärere Produkt zu wählen.

PHP Magazin

Entwickler MagazinDieser Artikel ist im PHP Magazin erschienen. Das PHP Magazin deckt ein breites Spektrum an Themen ab, die für die erfolgreiche Webentwicklung unerlässlich sind.

Natürlich können Sie das PHP Magazin über den entwickler.kiosk auch digital im Browser oder auf Ihren Android- und iOS-Devices lesen. In unserem Shop ist das Entwickler Magazin ferner im Abonnement oder als Einzelheft erhältlich.

Unsere Redaktion empfiehlt:

Relevante Beiträge

Hinterlasse einen Kommentar

Hinterlasse den ersten Kommentar!

avatar
400
  Subscribe  
Benachrichtige mich zu:
X
- Gib Deinen Standort ein -
- or -