© saicle/Shutterstock.com
React, ein neuer Player auf der Bühne der JavaScript-Frameworks

Zeit zu reagieren!


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 [1]. 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 JSX Transformer erforderlich, der dafür sorgt, dass die in JSX-Syntax verfassten Komponenten in valides JavaScript übersetzt werden. Sie können den Umweg über den JSX Transformer 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 JSX Transformers 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.

Listing 1: Komponente in React

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

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 JSX Transformer 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.

Listing 2: Rendern einer Komponente

React.renderComponent( <HelloWorld />, 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 Benut...

Neugierig geworden? Wir haben diese Angebote für dich:

Angebote für Gewinner-Teams

Wir bieten Lizenz-Lösungen für Teams jeder Größe: Finden Sie heraus, welche Lösung am besten zu Ihnen passt.

Das Library-Modell:
IP-Zugang

Das Company-Modell:
Domain-Zugang