Zeit zu reagieren!

React, ein neuer Player auf der Bühne der JavaScript-Frameworks
Kommentare

Facebook macht Open-Source-Software, soweit ist das nichts Neues. Und was von Facebook kommt, ist zumindest einen kurzen Blick wert, wie beispielsweise HHVM beweist. Facebook ist allerdings nicht nur im Bereich PHP aktiv, sondern hat auch eine JavaScript-Bibliothek veröffentlicht: React.

Viele große Unternehmen stellen ihre JavaScript-Eigenentwicklungen der Öffentlichkeit kostenlos zur Verfügung. Eines der besten Beispiele ist Twitter mit seinem Frontend-Framework Bootstrap und dem Paketmanager Bower. Aber auch Google muss sich mit seinem AngularJS-Framework nicht verstecken. Mit React veröffentlicht jetzt auch Facebook eine JavaScript-Bibliothek. Jetzt stellt sich nur noch die Frage: Was kann React für mich tun? Diese Frage ist schnell und einfach beantwortet: React ist eine Bibliothek, mit der Sie Benutzeroberflächen im Web erstellen können. React bedient allerdings nur einen kleinen Ausschnitt in der Webentwicklung, nämlich die Aufteilung und Gestaltung von Komponenten einer Webapplikation. Gehen Sie von einer klassischen MVC-Struktur im Client aus, übernimmt React die Aufgaben der View, also die Anzeige und die Kapselung der Anzeigelogik.

Installation und Einbindung

Bevor Sie React benutzen können, müssen Sie es natürlich erst in Ihre Applikation einbinden. Sie benötigen zunächst die beiden Dateien react.js und JSXTransformer.js. Beide Dateien erhalten Sie über das Paket, das Sie unter http://facebook.github.io/react/downloads.html herunterladen können. Alternativ können Sie auch Bower benutzen, um React für Ihr Projekt herunterzuladen. Der Befehl bower install react lädt alle erforderlichen Abhängigkeiten in Ihr lokales bower_components-Verzeichnis herunter. Haben Sie diese Voraussetzungen erfüllt, können Sie innerhalb eines Script-Tags Ihre React-Applikation aufbauen. Die folgenden Ausführungen gehen davon aus, dass Sie die JSX-Syntax von React verwenden. JSX ist eine XML-artige Syntax, mit der Sie React-Komponenten recht übersichtlich und mit wenig Aufwand schreiben können. Wichtig ist hierbei, dass Sie dem type-Attribut des Script-Tags den Wert text/jsx zuweisen. Der Nachteil dieser Vorgehensweise ist, dass Ihre komplette Applikation im HTML-Code Ihrer Applikation liegt. Also sollte Ihr Ziel eigentlich sein, dass Sie Ihren Quellcode in separate Dateien auslagern. Hierfür müssen Sie lediglich eine separate Datei erstellen, den Quellcode, der bisher im Script-Tag enthalten war, in diese Datei kopieren und mit dem src-Attribut des Script-Tags auf diese Datei verweisen. Sie müssen allerdings zwei weitere Voraussetzungen erfüllen. Das type-Attribut des Script-Tags muss den Wert text/jsx aufweisen und die eingebundene Datei muss mit dem Kommentar /** @jsx React.DOM */ beginnen. In beiden Varianten ist der JSXTransformer erforderlich, der dafür sorgt, dass die in JSX-Syntax verfassten Komponenten in valides JavaScript übersetzt werden. Sie können den Umweg über den JSXTransformer natürlich vermeiden, indem Sie die React.DOM-Methoden direkt verwenden, was allerdings wesentlich mehr Schreibaufwand und weniger übersichtlichen Quellcode bedeutet. Der Nachteil beim Einsatz des JSXTransformers besteht darin, dass die Transformation erst beim Laden der Seite durchgeführt wird, also grundsätzlich Performance kostet. Dieses Problem können Sie umgehen, indem Sie bereits die transformierten Quellen ausliefern. Zu diesem Zweck existieren die react-tools. Dieses Paket ist auf Basis von Node.js geschrieben und stellt Ihnen ein Kommandozeilenwerkzeug zur Transformation von JSX-Syntax in JavaScript zur Verfügung. Nachdem Sie das Paket mit dem Kommando npm install –g react-tools installiert haben, können Sie den Befehl jsx auf der Kommandozeile zur Transformation benutzen. Für den Entwicklungsprozess bietet jsx die Option –watch, mit der Sie Änderungen an Dateien überwachen können. Bei jeder Änderung wird automatisch für die betroffenen Dateien eine Transformation durchgeführt. Der Befehl jsx –watch src/ dest/ sorgt dafür, dass die Dateien im src-Verzeichnis überwacht und die transformierten Dateien im dest-Verzeichnis gespeichert werden.

Hello World

Nachdem Sie jetzt schon viel über JSX und Komponenten in React erfahren haben, ist es nun an der Zeit, dass Sie diese Elemente genauer kennenlernen und sehen, wie sie eingesetzt werden können. Sie beginnen zunächst mit der Erstellung einer Komponente, indem Sie die Methode React.createClass aufrufen. Die Variable, in der Sie den Rückgabewert des Aufrufs speichern, dient gleichzeitig als Name der Komponente. Als Argument erhält die Methode ein Objekt, das die Konfiguration der Komponente enthält. Das wichtigste Element einer Komponente ist die render-Funktion. Sie sorgt dafür, dass die Komponente korrekt dargestellt wird. Die render-Funktion gibt zu diesem Zweck eine HTML-Struktur zurück. In Listing 1 sehen Sie, wie eine einfache Komponente aussehen kann.

var HelloWorld = React.createClass({
    render: function() {
      return (
Hello World
); } });

Die Syntax, mit der Sie die Komponenten formulieren, ist etwas gewöhnungsbedürftig, da Sie HTML und JavaScript mischen, und die Abgrenzung teilweise unklar ist. Sobald Ihr Sourcecode allerdings durch den JSXTransformer umgewandelt wurde, handelt es sich um ganz normalen JavaScript-Quellcode. Nun, da Sie über eine erste einfache Komponente verfügen, müssen Sie diese nur noch darstellen. Komponenten werden von React in eine bestehende DOM-Struktur eingehängt. Mit der React.renderComponent-Methode geben Sie an, welche Komponente Sie an welche Stelle platzieren möchten. Dazu spezifizieren Sie im ersten Argument die Komponente und im zweiten den Zielknoten, wie Sie in Listing 2 sehen können.

React.renderComponent(
    ,
    document.getElementById('content')
);

Komponenten

Eine Applikation, die Sie mit React aufbauen, besteht aus einer Ansammlung von Komponenten. Eine Komponente ist im einfachsten Fall ein HTML-Element ohne weitere Funktionalität. Komponenten können allerdings auch weitere Komponenten enthalten und auf diese Weise eine Baumstruktur bilden, die das Frontend Ihrer Applikation nachbildet. In dieser Baumstruktur fließen die Daten dann zwischen den einzelnen Komponenten. Zu diesem Thema aber später noch mehr. Für den Erstellungsprozess einer Applikation empfiehlt Facebook ein Vorgehen in mehreren Schritten. Da es sich bei React um ein sehr anzeigelastiges Framework handelt, geht auch der Entwurfsprozess einer Applikation von der grafischen Oberfläche aus. Das bedeutet, dass Sie im Idealfall über ein Mockup der Benutzeroberfläche Ihrer Applikation verfügen. Alternativ reicht für diesen Schritt auch eine schematische Zeichnung der Oberfläche. Wichtig ist hierbei nur, dass Sie diese Visualisierung in die Lage versetzt, die einzelnen Komponenten Ihrer Applikation zu identifizieren.

Schritt 1: Komponentenhierarchie

Ausgehend von Ihrem Mockup versuchen Sie sinnvolle Komponenten zu identifizieren. Für die Definition einer Komponente können Sie davon ausgehen, dass eine Komponente ein Element Ihrer Applikation ist, das genau eine Funktion erfüllt. Also beispielsweise die Anzeige eines Datensatzes oder ein einfaches Formular. Sobald Sie feststellen, dass Ihre Komponenten zu umfangreich werden, sollten Sie dazu übergehen, sie in mehrere (Sub-)Komponenten zu unterteilen. Damit Sie später einen sinnvollen Datenfluss gewährleisten können, sollten Sie stets darauf achten, eine hierarchische Struktur der Komponenten zu erstellen. Die Navigation einer Seite könnte beispielsweise eine Oberkomponente sein. Jede Subnavigation ist eine weitere Komponente, ein einzelner Navigationspunkt ist schließlich ebenfalls eine Komponente.

Schritt 2: Statische Version in React

Haben Sie alle Komponenten identifiziert, können Sie dazu übergehen, diese Komponenten als React-Klassen zu schreiben und die Struktur schließlich anzuzeigen. In diesem Schritt erstellen Sie also den ersten Quellcode Ihrer Applikation in einer oder mehreren Dateien als eine Sammlung von Aufrufen von React.createClass.

Schritt 3: Minimale Version des UI-State

Eine Applikation ist natürlich mehr als eine Kollektion statischer Komponenten, die ineinander geschachtelt sind. Die Applikation erwacht erst durch die Interaktion eines Nutzers mit der Oberfläche und die daraus entstehenden Datenströme zum Leben. In React werden sämtliche Informationen, die sich im Laufe der Applikation ändern können, als Teil des state bezeichnet. In diesem Schritt legen Sie also fest, welche Daten ein Teil des state sind.

Schritt 4: Eigentümer des „state“ finden

Im Normalfall ist Ihre Applikation aufgebaut wie ein Baum. Das Wurzelelement bildet die Basis der Applikation und fächert auf in eine Kaskade von Komponenten. In Ihrer Applikation fließen die Daten über den state der Applikation. Betreffen veränderliche Daten mehrere Komponenten gleichzeitig, müssen Sie so lange eine Ebene in der Hierarchie nach oben gehen, bis Sie ein gemeinsames Elternelement gefunden haben, das den state speichert. Mehr zum Thema state folgt später.

Schritt 5: Inverser Datenfluss

Der state in Ihrer Applikation stellt sicher, dass die Informationen von der Wurzel nach oben fließen können. Damit Ihre Applikation jedoch ordnungsgemäß funktionieren kann, müssen Sie den Datenfluss auch in die andere Richtung gewährleisten. Dies müssen Sie allein aus dem Grund sicherstellen, da Modifikationen am gemeinsamen state immer an tiefer liegenden Komponenten vorgenommen werden müssen. Konkret geht es hier darum, dass Benutzerinteraktionen in Ihrer Applikation verteilt werden können. Klickt beispielsweise ein Benutzer auf einen Button, kann diese Aktion über Event-Handler-Funktionen verarbeitet werden (Listing 3).

var MyTable = React.createClass({
    render: function() {
      var tableRows = [];
      this.state.items.forEach(function(item) {
        tableRows.push();
      }.bind(this));

      return (
{tableRows}
); } });

Besonderheiten

Sie haben React jetzt installiert und wissen, wie Sie bei der Erstellung einer Applikation vorgehen sollten. Was aber macht React jetzt so besonders, dass Sie sich diese Library unbedingt ansehen sollten? Die Entwickler von React haben einem der in Webapplikationen am häufigsten auftretenden Probleme den Kampf angesagt: der schlechten Rendering-Performance. Moderne Webbrowser sind vor allem im Bereich der JavaScript Engines hoch optimiert, sodass die Engstellen häufig anderswo zu suchen sind. Was Ihre Applikation potenziell langsam machen kann, ist einerseits die Verbindung zum Server und auf der anderen Seite die Schnittstelle zum Benutzer, also die Anzeige von HTML. Fügen Sie ein neues HTML-Element in Ihrer Seite ein oder modifizieren Sie ein bestehendes Element, beginnt ein Prozess, der den Namen reflow trägt. Dieser Prozess bezeichnet die Berechnung der Position und Dimension von Elementen. Das Problem dabei ist, dass nicht nur das aktuelle Element betrachtet wird, sondern im schlimmsten Fall sämtliche Elemente neu berechnet werden. Da diese Operation blockierend wirkt, ist sie grundsätzlich schlecht für Ihre Applikation, und Sie sollten versuchen, derartige Operationen zu vermeiden. Und an genau dieser Stelle kommt React ins Spiel. Das Ziel dieser Library ist es, erforderliche DOM-Operationen möglichst zu bündeln, sodass so wenige reflows wie möglich gestartet werden. Wie Sie bereits wissen, werden veränderliche Daten in React im state gespeichert. Modifizieren Sie den state, führt dies dazu, dass die betroffenen Komponenten neu dargestellt werden, was wiederum die render-Methode der jeweiligen Komponente auf den Plan ruft. Und hier kommen wir zur Optimierung von React. Die Library basiert auf einem Konzept, das Virtual DOM genannt wird. Der Virtual DOM bezeichnet eine Repräsentation des eigentlichen DOMs Ihrer Applikation. Sämtliche Änderungen, also auch das Neuzeichnen einer Komponente, werden auf diesen Virtual DOM und nicht auf den tatsächlichen DOM angewandt. React vergleicht dann beide Stände, findet die Änderungen und modifiziert die erforderlichen Areale der Applikation in einer konzentrierten Aktion. So werden viele atomare DOM-Manipulationen, die zu ebenso vielen reflows führen, vermieden. Ähnlich verfährt React auch mit dem DOM-Event-Model. Um die Probleme, die durch unterschiedliche Browserimplementierungen entstehen, zu umgehen, verfügt React über sein eigenes Eventsystem. Die Browserevents werden von React übernommen und in das eigene System geleitet, das prinzipiell die gleichen Schnittstellen bietet, sich jedoch auf jedem Browser gleich verhält.

Datenfluss

Über die Daten in Ihrer Applikation wurde bereits einiges gesagt, ohne wirklich näher auf die Aspekte von state und props einzugehen. Viel wichtiger ist die Frage: Was sind jetzt schon wieder props? Wo state für dynamische Daten steht, sind props die statischen Gegenstücke. Props bieten Ihnen außerdem eine Schnittstelle, um auf die Attribute einer Komponente zuzugreifen. Übergeben Sie einer Komponente beispielsweise bei der Definition das Attribut name, können Sie auf den Wert über this.prop.name zugreifen und so das Rendering beeinflussen oder Berechnungen durchführen. Der Umgang mit state gestaltet sich etwas schwieriger als die Handhabung von props. Den initialen Wert von state setzen Sie über getInitialState. Achten Sie bei der Verwendung dieser Methode bitte darauf, dass Sie hier wirklich nur die Initialisierung vornehmen und keine Duplizierung von Code oder Berechnungen. Lesend greifen Sie innerhalb der Komponente über this.state. zu. Wobei den Namen einer konkreten Eigenschaft des state-Objekts bezeichnet. Das Setzen von Werten im state-Objekt geschieht immer über setState. Dieser Methode können Sie ein Objekt mit Key-Value-Paaren übergeben, die jeweils auf das state-Objekt angewandt werden. Modifizieren Sie bitte niemals das state-Objekt direkt. Der Umweg über setState sorgt dafür, dass die render-Methode korrekt aufgerufen wird. Wenn Sie eine Applikation mit React erstellen, sollten Sie äußerst sparsam mit state-Objekten umgehen. Versuchen Sie, wann immer es Ihnen möglich ist, props zu verwenden und die jeweiligen Werte zu rendern. Sinnvoll ist die Verwendung von state immer dann, wenn Sie mit Benutzereingaben oder Daten vom Server, die beispielsweise aus AJAX Callbacks stammen, umgehen müssen. Generell sollten Sie vermeiden, berechnete Daten im state zu speichern. Ein klassisches Beispiel hierfür sind zusammengesetzte Zeichenketten. Haben Sie einen derartigen Use Case, sollten Sie das Zusammensetzen in der render-Methode durchführen. Ähnliches gilt für Komponenten, diese haben nichts im state-Objekt zu suchen, sondern nur in der render-Methode. Möchten Sie in Ihrer Komponente eine Struktur untergeordneter Komponenten aufbauen, tun Sie dies im Rückgabewert der render-Methode. Nachdem Sie jetzt über statische und dynamische Daten in einer React-Applikation Bescheid wissen, erfahren Sie nun noch etwas über das Leben und Sterben von Komponenten, genauer gesagt über den Lebenszyklus von React-Komponenten.

Der Komponenten-Lifecycle

Eine Komponente durchläuft während ihrer Zeit innerhalb Ihrer Applikation verschiedene Phasen, vom Aufbau über die Darstellung bis hin zur Entfernung. In jede dieser Phasen können Sie sich einklinken und Callback-Funktionen ausführen, um entsprechend zu reagieren. Sie definieren diese Methoden auf dieselbe Weise wie schon die render-Methode im Objekt, das Sie an React.createClass übergeben.

componentWillMount

Diese Methode leitet den Lebenszyklus einer Komponente ein. Sie wird direkt vor dem ersten Aufruf der render-Methode ausgeführt und dient beispielsweise dazu, vorbereitende Berechnungen oder Initialisierungen vorzunehmen.

componentDidMount

Sobald die Komponente komplett dargestellt und bereit ist, wird die componentDidMount-Methode ausgeführt. Ein typischer Anwendungsfall für diese Methode ist das Nachladen von Daten vom Server über AJAX Requests. Innerhalb dieser Methode können Sie auch zum ersten Mal auf die DOM-Repräsentation der Komponente über this.getDOMNode() zugreifen. Diese Methode wiederum liefert Ihnen die Referenz auf das HTML-Element der Komponente.

componentWillReceiveProps

Ab diesem Zeitpunkt befinden Sie sich im regulären Lebenszyklus der Komponente. Sie ist jetzt dargestellt, wird angezeigt und wartet auf Interaktion. Die componentWillReceiveProps-Methode wird aufgerufen, sobald sich die props der Komponente ändern, nicht aber bei der initialen Darstellung der Komponente. Innerhalb dieser Methode haben Sie über this.props Zugriff auf die ursprünglichen props-Werte. Über das Argument, das dieser Methode übergeben wird, erhalten Sie Zugriff auf die neuen Werte, sodass Sie auf einfache Art und Weise Vergleiche anstellen und entsprechend darauf reagieren können.

shouldComponentUpdate

Im Gegensatz zur componentWillReceiveProps wird die shouldComponentUpdate-Methode vor jedem render-Aufruf ausgeführt. Hier haben Sie die Möglichkeit zu prüfen, ob die Ausführung der render-Methode überhaupt erforderlich ist. Ist der Rückgabewert dieser Methode false, wird die render-Methode nicht aufgerufen, der Virtual DOM dadurch nicht modifiziert, und es geht von dieser Komponente kein reflow aus. Damit Sie sinnvoll entscheiden können, ob der render-Aufruf erforderlich ist oder nicht, haben Sie über das erste Argument dieser Methode Zugriff auf die neue und gegebenenfalls geänderte Version der props, und über das zweite Argument können Sie auf die neue Version des state-Objekts zugreifen. Beachten Sie bei dieser Methode, dass sie ebenfalls nicht für den initialen Aufruf der render-Methode ausgeführt wird.

componentWillUpdate

Die componentWillUpdate-Methode ist der Einstiegspunkt, wenn Sie direkt vor dem Rendering-Prozess noch Dinge zu erledigen haben. Auch hier haben Sie wieder Zugriff auf die props– und state-Objekte. Außerdem wird diese Funktion ebenfalls nicht für das initiale Rendering ausgeführt. Diese Methode weist ferner eine weitere Besonderheit auf: Sie können setState hier nicht aufrufen.

componentDidUpdate

Was componentWillUpdate vor dem Rendering einer Komponente ist, ist componentDidUpdate nach dem Rendering. Das bedeutet, dass diese Methode ebenfalls nicht für den ersten Aufruf der render-Methode der Komponente ausgeführt wird, dafür allerdings dann für alle weiteren. In dieser Methode können Sie alle Operationen durchführen, die eine veränderte Darstellung der Komponente erfordern.

componentWillUnmount

Mit der componentWillUnmount-Methode sind wir auch schon am Ende des Komponentenlebens angekommen. Den Aufruf dieser Methode ist das Letzte, was eine Komponente in ihrem Dasein erlebt. Damit diese Methode aber auch wirklich ausgeführt wird, dürfen Sie Komponenten nicht einfach über eine DOM-Manipulation aus Ihrer Applikation entfernen, sondern müssen den Umweg über den Aufruf der unmountComponentAtNode-Methode gehen. Diese Methode akzeptiert einen DOM-Knoten als Argument und entfernt die darin gerenderte Komponente. Beachten Sie bei der Verwendung von jQuery, dass Sie dieser Methode kein Array von DOM-Knoten, sondern lediglich einen einzelnen DOM-Knoten übergeben können.

Ausgestattet mit diesem Wissen kommen Sie schon recht weit in der React-Welt. Sie können Komponentenhierarchien aufbauen, den Datenfluss innerhalb dieser Hierarchie steuern und sich in die verschiedenen Phasen des Lebenszyklus einer Komponente einklinken, um deren Verhalten zu beeinflussen. Was jetzt noch fehlt, ist ein Blick über den Tellerrand, also wie sich React im Zusammenspiel mit anderen Bibliotheken und Systemen verhält.

Formulare

Bevor Sie jedoch beginnen, mit Ihrem Server zu reden oder zusätzliche Frameworks in Ihre Applikation integrieren, sollten Sie noch einen kurzen Blick auf Formulare in Ihrer React-Applikation werfen. Diese weisen einige Besonderheiten auf, über die Sie Bescheid wissen sollten, da Sie ansonsten Schwierigkeiten bekommen. Formularelemente wie die input-, textarea- und option-Elemente stellen für React nichts weiter als Komponenten dar, React macht also mehr aus diesen Elementen. Sobald sich der Wert eines Eingabefelds beziehungsweise der Selektionszustand ändert, wird das change-Event ausgelöst, auf das Sie mit dem onChange Handler reagieren können und entsprechend den state Ihrer Komponente oder deren Elternkomponente beeinflussen können. Die eigentliche Besonderheit der Formularelemente unter React ist jedoch die Unterscheidung zwischen Controlled– und Uncontrolled-Komponenten. Eine Komponente gilt als Controlled, sobald Sie im Falle eines Textfelds das value-Attribut aufweist. So weit so gut, aber was bedeutet das konkret? Ein Controlled-Texteingabefeld reagiert nicht mehr auf Benutzereingaben. Die Erklärung hierfür ist recht einfach. Das Eingabefeld stellt den Wert der value-prop dar. Eine Benutzerinteraktion manipuliert allerdings nicht die React-eigenen props, sondern lediglich das value-Attribut des DOM-Knotens. Möchten Sie auf die Eingaben Ihres Benutzers reagieren, müssen Sie dies über die Eventbehandlung, also den onChange Handler und einen Aufruf von setState, tun. Möchten Sie es vermeiden, eine Controlled-Komponente zu erstellen, können Sie den initialen Wert auch einfach über das defaultValue-Attribut setzen. Eine Webapplikation lebt von der Kommunikation mit dem Server. Das Problem mit React ist, dass die Library die Kommunikation mit dem Server grundsätzlich nicht unterstützt.

Kommunikation mit dem Server

Aber auch für dieses Problem gibt es eine einfache Lösung. Sie können jQuery einbinden und dann die Möglichkeiten dieser Bibliothek nutzen. Das Feature, das Sie am häufigsten nutzen werden, ist die ajax-Methode, mit der Sie Anfragen an den Server schicken können. So können Sie Ihre Formulardaten abschicken, indem Sie eine Callback-Funktion auf den Submit-Button registrieren und innerhalb dieser Funktion die Werte der einzelnen Elemente einsammeln und anschließend über einen Aufruf der ajax-Methode zum Server senden. Über die success– oder failure-Callback-Funktionen können Sie dann Einfluss auf den state der Komponenten nehmen und die Änderungen über einen Aufruf der setState-Methode neu darstellen lassen. Interessant ist auch, wie neue oder veränderte Daten vom Server in die Applikation kommen. Typischerweise setzen sie lesende Aufrufe in die componentDidMount-Methode. In der Callback-Funktion des AJAX-Aufrufs können Sie dann die erhaltenen Daten über einen Aufruf von setState in Ihre Applikation einfügen.

componentDidMount: function() {
  $.get('/user).success(function(res) {
    this.setState({users: JSON.parse(res)});
  }.bind(this));
}

Routing in einer Applikation

Handelt es sich bei Ihrer Applikation um eine klassische Single-Page-Applikation, bewegen Sie sich innerhalb Ihrer Applikation über Links und URLs weiter, die Seite im Browser wird allerdings nicht neu geladen. Sie haben nun entweder die Möglichkeit, die erforderliche Steuerungslogik selbst zu implementieren, oder Sie greifen auf vorhandene Bibliotheken zurück. Ein Router, der diesen Anforderungen entspricht, ist der Director, die Router-Komponente des JavaScript-Frameworks Flatiron. Dieser Router erlaubt es Ihnen, innerhalb Ihrer Applikation über Hash-Routen zu navigieren. Die Callback-Funktionen, die Sie an die entsprechenden Routen binden, sorgen dann wiederum dafür, dass die korrekten Komponenten erstellt und eingebunden werden.  Jede Route stellt dann einen anderen Status der Applikation dar, der über den Aufruf eines URL wiederhergestellt werden kann.

React und Frameworks

Der leichtgewichtige Charakter und der Fokus auf die Anzeigelogik ermöglicht es Ihnen, React mit anderen Frameworks zu kombinieren und genau die Anzeige zu übernehmen. Eine sehr reibungslose Integration ist in Backbone.js möglich. Backbone.js ist ein relativ leichtgewichtiges MVC-Framework. Die View-Komponente von Backbone ist in zwei Teile unterteilt. Ein Teil der View ist in JavaScript formuliert und beinhaltet die Anzeigelogik. Der zweite Teil besteht aus dem konkreten Template. Sie formulieren die React-Komponenten wie gewohnt in separaten Dateien und transformieren die JSX-Syntax. In der Backbone-View-Komponente und hier im Speziellen in der render-Methode rufen Sie dann die React.renderComponent-Methode auf, um die Komponenten darzustellen.  Der Vorteil, den Sie durch diese Vorgehensweise gewinnen, ist, dass Sie den Router und die Models von Backbone erhalten und Ihre Applikation mit diesen Mitteln strukturieren. Backbone.js ist jedoch nicht das einzige Framework, das Sie mit React kombinieren können. Es ist außerdem möglich, dass Sie React-Komponenten in einer AngularJS-Applikation verwenden. Hier können Sie auf das Modul ngReact zurückgreifen, das Ihnen einiges an Arbeit abnimmt.

Fazit

Bei React handelt es sich um eine sehr spezialisierte Bibliothek, die nicht versucht, alles richtig zu machen, sondern sich auf einen beschränkten Ausschnitt einer Webapplikation konzentriert und dessen Probleme möglichst gut löst. Die Entwickler der Bibliothek haben drei der größten Probleme bei der Entwicklung grafischer Oberflächen im Web identifiziert und mit der Bibliothek eine Lösung entwickelt. Das vorrangige Problem ist natürlich die Rendering-Performance, die mit der Einführung des Virtual DOM gelöst wird. Die unterschiedliche Interpretation der Browser-Events deckt React durch die Abstraktion der Events und eine eigene, allgemeingültige Umsetzung ab. Der Datenfluss in einer Applikation wird über das state-Objekt und das Handling von Events abgedeckt. Um eine Problemstellung umfassend zu lösen, reicht React allein in den meisten Fällen nicht aus. In diesen Fällen müssen Sie zusätzliche Bibliotheken und Frameworks einbinden.

Aufmacherbild: Senior businessman reacting in alarm as he is struck by high winds raising his hands into the defensive position, conceptual of a calamity or natural disaster affecting business von Shutterstock / Urheberrecht: Instudio 68

Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -