React

Was ist React?

Es kann als Basis für die Entwicklung von Einzelseiten- oder mobilen Anwendungen genutzt werden. Komplexe React-Anwendungen erfordern normalerweise die Verwendung zusätzlicher Bibliotheken für die Zustandsverwaltung, das Routing und die Interaktion mit einer API (= Schnittstelle für die Anwendungsprogrammierung).

Entwicklung

React wurde von Jordan Walke, einem Software-Ingenieur bei Facebook, entwickelt. Er wurde von XHP beeinflusst, einem HTML-Komponenten-Framework für PHP (= Scriptsprache; an C und Perl angelehnte Syntax). Es wurde erstmals im Jahr 2011 auf Facebooks Newsfeed und später auf Instagram im Jahr 2012 eingesetzt. Im Mai 2013 wurde es bei JSConf US als Open-Source bereitgestellt.

React Native, das die native Android-, iOS- und UWP-Entwicklung mit React ermöglicht, wurde im Februar 2015 auf der Webseite von Facebook React.js Conf angekündigt und im Monat darauf als Open-Source-Produkt veröffentlicht.

Im April 2017 kündigte Facebook React Fiber an, einen neuen Kernalgorithmus der die Framework-Bibliothek zum Erstellen von Benutzeroberflächen ermöglichte. Dieser Kernalgorithmus sollte die Grundlage für zukünftige Verbesserungen und die Entwicklung von Features für das Framework werden.

Grundlegende Verwendung

Die sogenannte Greeter-Klasse ist eine Komponente, die eine Eigenschaftenbegrüßung akzeptiert. Die ReactDOM.render-Methode erstellt eine Instanz der Greeter-Komponente, legt die Begrüßungseigenschaft auf z. B. “Hallo Freunde” fest und fügt die gerenderte Komponente als untergeordnetes Element in das OM-Element mit der ID myReactApp ein. Bei der Anzeige in einem Webbrowser wird z. B. folgendes Ergebnis angezeigt:

Hallo Freunde

Bemerkenswerte Funktionen

JSX (JavaScript XML)

JSX (JavaScript XML) ist eine Erweiterung der JavaScript-Sprachsyntax. Ähnlich wie HTML, bietet JSX eine Möglichkeit, das Komponenten-Rendering mit einer Syntax zu strukturieren, die vielen Entwicklern vertraut ist. React-Komponenten werden normalerweise mit JSX geschrieben, obwohl dies nicht unbedingt erforderlich ist (Komponenten können auch in reinem JavaScript geschrieben sein). JSX ähnelt einer anderen Erweiterungssyntax, die von Facebook für PHP erstellt wurde, nämlich XHP.

Verschachtelte Elemente

Mehrere Elemente auf derselben Ebene müssen in ein einzelnes Containerelement (z. B. ) eingeschlossen sein oder als Array zurückgegeben werden.

Attribute

JSX bietet eine Reihe von Elementattributen, die die von HTML bereitgestellten Elemente widerspiegeln. Benutzerdefinierte Attribute können auch an die Komponente übergeben werden. Alle Attribute werden von der Komponente als Requisiten empfangen.

JavaScript-Ausdrücke

JavaScript-Ausdrücke (aber keine Anweisungen) können in JSX mit geschweiften Klammern {} verwendet werden:

Bedingte Anweisungen

Wenn-Anweisungen können nicht in JSX verwendet werden. Stattdessen können jedoch bedingte Ausdrücke verwendet werden. Beispiel: {i ===1? ‘wahr’: ‘falsch’} als Zeichenfolge ‘wahr’, weil i gleich 1 ist.

In JSX geschriebener Code erfordert die Konvertierung mit einem Tool wie Babel, bevor er von Webbrowsern verstanden werden kann. Diese Verarbeitung wird im Allgemeinen während eines Prozesses in der Softwareerstellung durchgeführt, bevor die Anwendung bereitgestellt wird.

Architektur jenseits von HTML

Die grundlegende Architektur von React gilt nicht nur für das Rendern von HTML im Browser. Beispielsweise verfügt Facebook über dynamische Diagramme, die in -Tag gerendert werden und Netflix und PayPal verwenden universelles Laden, um auf dem Server und auf dem Client identischen HTML-Code darzustellen.

Gemeinsame Besonderheiten

React versucht nicht, ein vollständiges “Anwendungs-Framework” bereitzustellen. Es wurde speziell für die Erstellung von Benutzeroberflächen entwickelt und enthält daher nicht viele der Tools, die einige Entwickler für die Erstellung einer Anwendung als notwendig erachten. Dies ermöglicht die Auswahl an Bibliotheken, die der Entwickler für die Ausführung von Aufgaben wie Netzwerkzugriff oder lokalen Datenspeicher bevorzugt. Mit der Reife der Bibliothek haben sich gängige Nutzungsmuster herausgebildet.

Verwendung der Flux-Architektur

Zur Unterstützung des React-Konzepts des unidirektionalen Datenflusses (der möglicherweise dem bidirektionalen Fluss von Angular JS gegenübergestellt wird), stellt die Flux-Architektur eine Alternative zur gängigen Model-View-Controller Architektur dar.

Flux-Funktionen, die über einen zentralen Dispatcher an ein Geschäft gesendet werden sowie Änderungen an dem Geschäft werden an die Ansicht zurückgegeben. Bei Verwendung mit React wird diese Ausbreitung über Eigenschaften der Komponenten erreicht. Der Fluss kann als eine Variante des Beobachtermusters betrachtet werden.

Eine React-Komponente unter der Flux-Architektur sollte keine direkt an sie übergebenen Requisiten direkt modifizieren, sondern Rückruffunktionen übergeben, die Aktionen erstellen, die vom Dispatcher zum Ändern des Speichers gesendet werden.

Bei der Aktion handelt es sich um ein Objekt, dessen Aufgabe darin besteht, das Geschehene zu beschreiben. Beispielsweise könnte eine Aktion, die beschreibt, dass ein Benutzer einem anderen folgt, eine Benutzer-ID, eine Zielbenutzer-ID und den Typ USER_FOLLOWED-ANOTHER-USER enthalten. Die Filialen (die man sich als Modelle vorstellen kann) können sich in Reaktion auf vom Dispatcher erhaltene Aktionen ändern.

React Native

React Native wurde erstmals 2015 von Facebook angekündigt und verwendete die Architektur für native Android-, iOS- und UWP-Anwendungen.

Die Arbeitsprinzipien von React Native sind im Wesentlichen die gleichen, mit der Ausnahme, dass das DOM nicht über Virtual DOM, sondern einige native Ansichten manipuliert. Es läuft in einem Hintergrundprozess (der das von den Entwicklern geschriebene JavaScript interpretiert) direkt auf dem Endgerät und kommuniziert mit der nativen Plattform über eine serialisierbare, asynchrone und gestapelte Bridge.

Es ist zu erkennen, dass Facebook den Fehler korrigiert hat, den Mark Zuckerberg im Jahr 2012 erwähnt hat. Es setzt HTML5 überhaupt nicht ein, alles ist in JavaScript geschrieben und basiert auf nativen SDKs.