React Native
React Native ist ein quelloffenes UI-Framework zur Erstellung von Anwendungen für Android,[3][4] Android TV,[5] iOS,[4] macOS,[6] tvOS,[7] Web,[8] Windows[6] und UWP[9], welches von Meta Platforms, Inc.[10] entwickelt wird. Es ermöglicht Entwicklern, native Systemfunktionen bei der Entwicklung mit der React-Bibliothek zu verwenden.[11] Es wird unter anderem bei Facebook, Microsoft und Shopify zur Entwicklung der eigenen Android- und iOS-Apps verwendet.[12] GeschichteIn 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.[13][14] 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.[15] Nach Monaten der Entwicklung veröffentlichte Facebook 2015 die erste Version auf der React JavaScript Configuration Konferenz. Während einer technischen Keynote[16] 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.[1] ImplementierungDie 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.[17][18] 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.[19] Obwohl das Styling in React Native eine ähnliche Syntax zu CSS nutzt, verwendet es kein HTML oder CSS. [20] 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.[6] „Hello World!“ BeispielEin „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 auchLiteratur
Einzelnachweise
|
||||||||||||||||||||||
