React Native

React
Basisdaten

Entwickler Meta und die Open Source Community
Erscheinungsjahr 2015[1]
Aktuelle Version 0.86.0[2]
(11. Juni 2026)
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

Bearbeiten

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

Bearbeiten

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

Bearbeiten

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

Bearbeiten

Literatur

Bearbeiten

Einzelnachweise

Bearbeiten
  1. a b React Native: Bringing modern web techniques to mobile. 26. März 2015, abgerufen am 9. September 2023 (englisch).
  2. Release 0.86.0. 11. Juni 2026 (abgerufen am 12. Juni 2026).
  3. Android Release for React Native. 14. September 2015, abgerufen am 9. September 2023 (englisch).
  4. 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).
  5. Building For TV Devices · React Native. In: reactnative.dev. Abgerufen am 9. September 2023 (englisch).
  6. 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).
  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. Martin Konicek: React Native: A year in review. In: Engineering at Meta. Meta, 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).

📚 Artikel Terkait di Wikipedia

Svelte (Framework)

sich reaktive Single-Page-Webanwendungen erstellen. Im Gegensatz zu Frameworks wie React oder Vue.js greifen Svelte-Applikationen zur Laufzeit auf keine

React

announces React Fiber, a rewrite of its React framework. In: TechCrunch. Abgerufen am 21. Mai 2024 (englisch).  Maika Möbus: Open Source: Neue React Foundation

Next.js

Next.js ist ein quelloffenes Webframework, mit welchem sich React-basierte Web-Anwendungen mit serverseitigem Rendering entwickeln lassen sowie ein

Webentwicklung

statt. Bekannte serverseitige Frameworks sind Laravel, Ruby on Rails und Django. Populäre JavaScript-Frameworks sind React, Angular und Vue.js. Wiktionary:

Mobile App

geschrieben. Frameworks für die Cross-Plattform-Entwicklung sind die „Xamarin Plattform“ von Xamarin, Appcelerators „Titanium Mobile“ und React Native von

JSX (JavaScript)

Syntax-Erweiterung für JavaScript (Syntaktischer Zucker). JSX wurde für das Framework React entwickelt und wird als Auszeichnungssprache für Komponenten verwendet

Single-Page-Webanwendung

wird ein Webclient über ein Framework, wie Apache Cordova, eingebettet. Die Art und Weise der Implementierung einer solchen Web-App erfolgt clientnah und

Liste von Webframeworks

objektorientiertes JavaScript-Framework eZ Publish / eZ Components – PHP-basierendes Web Development Framework unter der GPL Flask – Micro-Framework – verbindet Jinja2