React

React

┬ę Copyright Shutterstock / fatmawati achmad zaenuri

Was ist React?

In Computing ist React (auch bekannt als React.js oder ReactJS) eine JavaScript-Bibliothek zum Erstellen von Benutzeroberfl├Ąchen. Es wird von Facebook und einer Community aus einzelnen Entwicklern und Unternehmen gepflegt.

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.

Wenn Sie noch Fragen bez├╝glich Framework haben, dann k├Ânnen Sie gerne den jeweiligen Glossar dazu besuchen und sich ├╝ber das Thema informieren.

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

Eigenschaften (im allgemeinen Requisiten oder aus dem Englischen “Props”) werden von der ├╝bergeordneten Komponente an eine andere Komponente ├╝bergeben. Sie erhalten Requisiten als einen einzigen Satz mit unver├Ąnderlichen Werten (ein JavaScript-Objekt).
Zust├Ąnde erhalten Werte in der gesamten Komponente und k├Ânnen ├╝ber Requisiten an untergeordnete Komponente ├╝bergeben werden.
Eine weitere bemerkenswerte Funktion ist die Verwendung eines “virtuellen Dokumentobjekt-Modells” oder eines “virtuellen DOM“. React erstellt einen Zwischenspeicher f├╝r die Datenstruktur im Arbeitsspeicher, berechnet die resultierenden Unterschiede und aktualisiert das angezeigte DOM des Browsers effizient. Dadurch kann der Programmierer den Code so schreiben, als w├╝rde die gesamte Seite bei jeder ├änderung gerendert, w├Ąhrend die React-Bibliothek nur Unterkomponenten darstellen, die sich tats├Ąchlich ├Ąndern.
LifeCycle Methoden (Lebenszyklusmethoden) sind Hooks, die die Ausf├╝hrung von Code an Sollwerten w├Ąhrend der Lebensdauer der Komponente erm├Âglichen:

  • Mit shouldComponentUpdate kann der Entwickler ein unn├Âtiges erneutes Rendering einer Komponente verhindern, indem er false zur├╝ckgibt, wenn kein Rendering erforderlich ist.
  • componentDidMount wird aufgerufen, sobald die Komponente “eingeh├Ąngt” wurde (d. h. die Komponente wurde in der Benutzeroberfl├Ąche erstellt, h├Ąufig durch Zuordnen zu einem DOM-Knoten). Dies wird normalerweise verwendet, um das Laden von Daten von einer entfernten Quelle ├╝ber eine API auszul├Âsen.
  • Rendern ist die wichtigste LifeCycle Methode und die einzige erforderliche Methode in einer Komponente. Sie wird normalerweise jedes Mal aufgerufen, wenn der Status der Komponente aktualisiert wird. Dies spiegelt ├änderungen in der Benutzeroberfl├Ąche wider.

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:

    • {9+1}
    • Nach dem Rendern:
    10

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.

Tipp

Wenn Sie noch Fragen bez├╝glich eines Online Marketing Themas haben, dann k├Ânnen Sie gerne unseren Glossar besuchen und sich ├╝ber das Thema informieren, wo Sie noch speziell Fragen haben.


Sie haben noch Fragen?

Kontaktieren Sie uns

Kostenloser SEO-Check der OSG


Weitere Inhalte