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
Literatur
- Bonnie Eisenman: Learning React Native. Hrsg.: O'Reilly. 2016, ISBN 978-1-4919-2900-1 (englisch).
Einzelnachweise
- ↑ a b React Native: Bringing modern web techniques to mobile. 26. März 2015, abgerufen am 9. September 2023 (englisch).
- ↑ Release 0.86.2. 27. Juli 2026 (abgerufen am 28. Juli 2026).
- ↑ Android Release for React Native. 14. September 2015, abgerufen am 9. September 2023 (englisch).
- ↑ a b 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).
- ↑ Building For TV Devices · React Native. In: reactnative.dev. Abgerufen am 9. September 2023 (englisch).
- ↑ a b c React Native for Windows + macOS · Build native Windows & macOS apps with Javascript and React. In: microsoft.github.io. Abgerufen am 9. September 2023 (englisch).
- ↑ React Native for Apple TV. In: GitHub. Abgerufen am 23. Mai 2024 (englisch).
- ↑ React Native for Web. In: GitHub. Abgerufen am 9. September 2023 (englisch).
- ↑ Windows Apps Team: React Native on the Universal Windows Platform. In: blogs.windows.com. 13. April 2016, abgerufen am 9. September 2023 (englisch).
- ↑ Chapter 1. What Is React Native? In: oreilly.com. O’Reilly Media, Inc., abgerufen am 9. September 2023 (englisch).
- ↑ Out-of-Tree Platforms. In: reactnative.dev. Facebook, Inc., abgerufen am 9. September 2023 (englisch).
- ↑ React Native Showcase. In: reactnative.dev. Abgerufen am 9. September 2023 (englisch).
- ↑ Christina Warren: Zuckerberg's Biggest Mistake? 'Betting on HTML5'. Mashable, 11. September 2012, abgerufen am 9. September 2023 (englisch).
- ↑ 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.
- ↑ Martin Konicek: React Native: A year in review. In: Engineering at Meta. Meta, 13. April 2016, abgerufen am 9. September 2023 (englisch).
- ↑ Christopher Chadeau: A Deep Dive into React Native. In: YouTube. Abgerufen am 9. September 2023 (englisch).
- ↑ Tadeu Zagallo: Bridging in React Native. 14. Oktober 2015, abgerufen am 9. September 2023 (englisch).
- ↑ How we build React Native app: 7 things which save your development time. Part 2. Abgerufen am 9. September 2023 (englisch).
- ↑ Using TypeScript. In: reactnative.dev. Meta Platforms, Inc., abgerufen am 9. September 2023 (englisch).
- ↑ React Native Style. In: reactnative.dev. Abgerufen am 9. September 2023 (englisch).
