React Native

React Native
Basisdaten
Entwickler	Meta und die Open Source Community
Erscheinungsjahr	2015[1]
Aktuelle Version	0.76.1[2] (29. Oktober 2024)
Betriebssystem	Android, Android TV, iOS, macOS, tvOS, Web, Windows, UWP, und VR
Programmier­sprache	JavaScript, Java, C++, Objective-C, Python
Kategorie	Application Framework
Lizenz	MIT-Lizenz
reactnative.dev

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]

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.^[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]

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.^[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!“ 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

• React
• NativeScript
• Xamarin
• Titanium SDK
• Apache Cordova
• Flutter
• Qt (Bibliothek)

Literatur

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

Einzelnachweise

1. React Native: Bringing modern web techniques to mobile. 26. März 2015, abgerufen am 9. September 2023 (englisch). 
2. github.com.
3. Android Release for React Native. 14. September 2015, abgerufen am 9. September 2023 (englisch). 
4. Stephen Shankland: Mozilla's radical open-source move helped rewrite rules of tech. In: CNET. 29. März 2018, abgerufen am 9. September 2023 (englisch). 
5. Building For TV Devices · React Native. In: reactnative.dev. Abgerufen am 9. September 2023 (englisch). 
6. React Native for Windows + macOS · Build native Windows & macOS apps with Javascript and React. In: microsoft.github.io. Abgerufen am 9. September 2023 (englisch). 
7. React Native for Apple TV. In: GitHub. Abgerufen am 23. Mai 2024 (englisch). 
8. React Native for Web. In: GitHub. Abgerufen am 9. September 2023 (englisch). 
9. Windows Apps Team: React Native on the Universal Windows Platform. In: blogs.windows.com. 13. April 2016, abgerufen am 9. September 2023 (englisch). 
10. Chapter 1. What Is React Native? In: oreilly.com. O’Reilly Media, Inc., abgerufen am 9. September 2023 (englisch). 
11. Out-of-Tree Platforms. In: reactnative.dev. Facebook, Inc., abgerufen am 9. September 2023 (englisch). 
12. React Native Showcase. In: reactnative.dev. Abgerufen am 9. September 2023 (englisch). 
13. Christina Warren: Zuckerberg's Biggest Mistake? 'Betting on HTML5'. Mashable, 11. September 2012, abgerufen am 9. September 2023 (englisch). 
14. Jürgen Vielmeier: Mark Zuckerberg kündigt Facebook-Suchmaschine an, nennt HTML 5 einen strategischen Fehler. BASIC thinking, 12. September 2012, abgerufen am 9. September 2023. 
15. React Native: A year in review. 13. April 2016, abgerufen am 9. September 2023 (englisch). 
16. Christopher Chadeau: A Deep Dive into React Native. In: YouTube. Abgerufen am 9. September 2023 (englisch). 
17. Tadeu Zagallo: Bridging in React Native. 14. Oktober 2015, abgerufen am 9. September 2023 (englisch). 
18. How we build React Native app: 7 things which save your development time. Part 2. Abgerufen am 9. September 2023 (englisch). 
19. Using TypeScript. In: reactnative.dev. Meta Platforms, Inc., abgerufen am 9. September 2023 (englisch). 
20. React Native Style. In: reactnative.dev. Abgerufen am 9. September 2023 (englisch).