React Native

React Native ist ein quelloffenes UI-Framework zur Erstellung von Anwendungen für Android, Android TV, iOS, macOS, tvOS, Web, Windows und UWP, welches von Meta Platforms, Inc. entwickelt wird. Es ermöglicht Entwicklern, native Systemfunktionen bei der Entwicklung mit der React-Bibliothek zu verwenden. Es wird unter anderem bei Facebook, Microsoft und Shopify zur Entwicklung der eigenen Android- und iOS-Apps verwendet.

Geschichte

In 2012 kommentierte Mark Zuckerberg: „Der größte Fehler, den wir als Unternehmen gemacht haben, war zu sehr auf HTML5 statt auf native Entwicklung zu setzen“. Die Nutzung von HTML5 in der mobilen Facebook-App sorgte laut eigener Aussage für Instabilität und eine insgesamt langsamere Anwendung. Er versprach zugleich, Facebook würde bald eine bessere mobile Nutzungserfahrung schaffen.

Jordan Walke, ein Softwareentwickler bei Facebook, fand einen Weg, UI-Elemente in iOS aus einem JavaScript-Thread, welcher im Hintergrund läuft, zu erzeugen. Dies wurde zur Basis für das React-Framework. Facebook entschied sich dazu, einen internen Hackathon abzuhalten, um aus dem Prototyp ein produktiv einsetzbares Framework zu machen und künftig native Mobile-Apps mit der Technologie entwickeln zu können.

Nach Monaten der Entwicklung veröffentlichte Facebook 2015 die erste Version auf der React JavaScript Configuration Konferenz. Während einer technischen Keynote erklärte Christopher Chedeau, dass Facebook React Native bereits produktiv in einigen der eigenen Apps, namentlich der Group App und der Ads Manager App, verwendete.

Implementierung

Die Funktionsweise von React Native ist quasi identisch zu React, mit der Ausnahme, dass React Native nicht den DOM über den „Virtual DOM“ manipuliert. Der vom Entwickler geschriebene JavaScript-Code wird in einem Hintergrundprozess direkt auf dem Endgerät interpretiert. Die Kommunikation zwischen dem JavaScript-Code und dem Betriebssystem erfolgt über serialisierte Daten, welche gestapelt über eine asynchrone Brücke ausgetauscht werden.

React-Komponenten abstrahieren den nativen Code und interagieren mit System-APIs mittels dem deklarativem UI-Programmierparadigma von React sowie JavaScript. TypeScript wird bei der Entwicklung moderner React Native Apps aufgrund der erhöhten Typsicherheit jedoch oft gegenüber JavaScript bevorzugt.

Obwohl das Styling in React Native eine ähnliche Syntax zu CSS nutzt, verwendet es kein HTML oder CSS. Stattdessen werden den React-Komponenten die Styling-Regeln direkt im JavaScript-Code in Form eines Attributs zugewiesen.

React Native ist auch für Windows und macOS verfügbar. Die entsprechenden Entwicklungswerkzeuge werden jeweils von Microsoft entwickelt.

„Hello World!“ Beispiel

Ein „Hello World!“ Programm mit einem einfachen Zähler kann in React Native wie folgt implementiert werden:

import { AppRegistry, Text, View, Button } from 'react-native';
import * as React from 'react';

const HelloWorldApp = () => {
  const [count, setCount] = React.useState(0);

  const incrementCount = () => {
	setCount(count + 1);
  };

  return (
    <View>
        <Text>Hello World!</Text>
        <Text>{count}</Text>
		<Button onPress={incrementCount} title="Zähler erhöhen" />
    </View>
  );
}

export default HelloWorldApp;

AppRegistry.registerComponent('HelloWorld', () => HelloWorldApp);

Siehe auch

Literatur

Bonnie Eisenman: Learning React Native. Hrsg.: O'Reilly. 2016, ISBN 978-1-4919-2900-1 (englisch).

Einzelnachweise