Facebook React: ein erster Blick auf den JavaScript-Konkurrenten zu Angular.js

Facebook nutzt eine Menge JavaScript, um die Inhalte seiner Website zu generieren und zu aktualisieren. Neue Statusmeldungen sehen, einen Post absetzen, ein „Gefällt mir“ geben – alles passiert, ohne dass die Seite neu geladen werden muss. Realisiert werden diese Aktionen mit der hauseigenen JavaScript-Bibliothek „React“, die das Unternehmen nun jedem Entwickler für eigene Projekte zugänglich gemacht hat. Es gibt nicht wenige, die React sogar dem heimlichen Platzhirschen Angular.js vorziehen.

Anzeige

Schnellstart: JavaScript-Dateien und optional JSX einbinden

Bevor es losgeht, muss die JavaScript-Bibliothek React in das HTML-Dokument eingebunden werden. Es gibt – wie bei solchen Bibliotheken üblich – eine Entwicklungs- sowie eine komprimierte Produktivbibliothek. Außerdem muss man sich überlegen, ob man „React“ mit oder ohne JSX verwendet. Per JSX ist es möglich, „React“ mit XML-Syntax auszuzeichnen. Wer lieber die übersichtliche XML-Auszeichnung nutzen möchte, muss eine zusätzliche JavaScript-Datei einbinden, welche JSX entsprechend interpretiert. Optional gibt es zudem noch eine AddOn-Datei mit zusätzlichen Werkzeugen.

<script src="http://fb.me/react-0.12.2.min.js"></script>
<script src="http://fb.me/react-with-addons-0.12.2.min.js"></script>
<script src="http://fb.me/JSXTransformer-0.12.2.js"></script>

Je nach Konfiguration müssen also eine bis drei Dateien eingebunden werden. Statt auf die bei Facebook gehosteten Dateien zu verweisen, besteht natürlich auch die Möglichkeit, die Bibliothek herunterzuladen. Es steht ein Starterkit zur Verfügung, welches alle notwendigen und optionalen Dateien sowie einige kleine Beispiele bereithält. So fällt der Start relativ leicht.

Website von React

Erste Schritte mit „React“

Ist die Einbindung erledigt, kann der erste Quelltext per „React“ ausgegeben werden. Es stehen unterschiedliche Methoden zur Verfügung, mit denen Elemente erzeugt und mit Inhalten gefüllt werden können. Die Methode „createElement()“ erstellt dabei neue Elemente. Diese lassen sich mit Eigenschaften versehen und mit beliebig vielen Kindelementen ausstatten.

Anzeige

var person = React.createElement("strong", null, " Manfred");
var willkommen = React.createElement("p", {className: "willkommen"}, "Willkommen", person, "!");

Im Beispiel wird per „createElement()“ zunächst ein „<strong>“-Element erzeugt. Über den zweiten Parameter der Methode können optional Eigenschaften für das Element angegeben werden. Ab dem dritten Parameter werden Kindelemente definiert. Jedes Kindelement wird dabei einfach als zusätzlicher Parameter der Methode übergeben.

Im Beispiel wird dem „<strong>“-Element ein einfacher Textknoten als Kind übergeben. In der zweiten Zeile des Beispiels wird ein „<p>“-Element erzeugt. Die Attribute für das Element – in Beispiel wird eine Klasse zugewiesen – sind als Objektliteral hinterlegt. Es folgen drei Kindelemente: zunächst ein Textknoten, gefolgt vom „<strong>“-Element, welches in der Zeile darüber darüber definiert wurde, und einem weiteren Textknoten.

Im nächsten Schritt erzeugt man per „createClass()“-Methode eine sogenannte Klassenkomponente. Diese erhält den zuvor definierten Inhalt. Der Methode werden als Objektliteral eine oder mehrere Eigenschaften übergeben. Die Eigenschaft „render“ sorgt dafür, dass der zuvor definierte DOM-Knoten gerendert und anschließend im DOM-Baum platziert werden kann.

var ausgabe = React.createClass({
  render: function() {
    return willkommen;
  }
});

Zuletzt bringen wir per „render()“-Methode den Knoten im DOM-Baum unter.

React.render(React.createElement(ausgabe), document.body);

Im Beispiel erfolgt die Platzierung schlicht innerhalb des HTML-Bodys. Möglich ist es ebenso, den DOM-Knoten innerhalb eines bestehenden Elementes des HTML-Dokumentes unterzubringen – beispielsweise per „document.getElementId()“.

Einfachere Auszeichnung per JSX

Statt relativ umständlich per „createElement()“ einzelne HTML-Elemente zu erzeugen und mit Attributen und Kindelementen auszustatten, erlaubt die Auszeichnung per JSX einen wesentlich einfacheren Weg. Hier wird der Quelltext schlicht, wie man es gewohnt ist, als solcher geschrieben.

var Ausgabe = React.createClass({
  render: function() {
    return (
      <p className="willkommen">Willkommen <strong>Manfred</strong>!</p>
    )
  }
});
React.render(<Ausgabe />, document.body);

Zwei Dinge muss man beachten, wenn man die JSX-Syntax verwendet. Zunächst muss das „<script>“-Element, in welches der „React“-Quelltext eingebunden ist, das „type“-Attribut mit dem Wert „text/jsx“ enthalten. Außerdem müssen Variablennamen, die später als Element übergeben werden – im Beispiel ist es die Variable „Ausgabe“ – zwingend mit einem Großbuchstaben beginnen. So unterscheidet „React“ jene Variablen, die als HTML-Element genutzt werden, von anderen. Das Attribut „className“ wird durch das Rendern als korrektes HTML-Attribut „class“ dargestellt. Hier muss man immer wenig darauf achten, welches die korrekte „React“-Schreibweise ist; diese unterscheidet sich zuweilen von der HTML-Schreibweise.

Bei der Ausgabe in den DOM-Baum erhält jedes erzeugte HTML-Element das Data-Attribut „data-reactid“. Texte werden jeweils mit einem „<span>“-Element umschlossen, welches dieses Attribut besitzt. So wird für jeden Knoten eine eindeutige „React“-ID vergeben, mit der er referenziert werden kann.

Mit Events und Platzhaltern arbeiten

„React“ ist ja vor allem für Seiten gedacht, bei denen ein besonderes Maß an Interaktion vorgesehen ist. Dementsprechend gibt es die Möglichkeit, mit verschiedenen Event-Handlern die Ausgabe von HTML zu steuern. Dank Platzhalter können Inhalte einfach innerhalb eines DOM-Knotens untergebracht werden.

Mit der Eigenschaft „getInitialState“ hat man die Möglichkeit, einen beliebigen Status zu definieren. Dieser kann anschließend über einen Event-Handler – zum Beispiel per Click-Event – verändert werden. Je nach Status lässt sich so die HTML-Ausgabe beeinflussen.

var Ausgabe = React.createClass({
  getInitialState: function() {
    return {
      gefaelltmir: false
    };
  },
  handleClick: function(e) {
    this.setState({
      gefaelltmir: !this.state.gefaelltmir
    });
  },
  render: function() {
    var text = this.state.gefaelltmir ? "Schön, dass dir das gefällt." : "Klicke, wenn dir das gefällt.";
    return (
      <p onClick={this.handleClick}>{text}</p>
    )
  }
});
React.render(<Ausgabe />, document.body);

Im Beispiel wird zunächst der Status „gefaelltmir“ definiert und auf „false“ gesetzt. Es folgt ein Event-Handler, der den Status bei jedem Klick umkehrt. Beim ersten Klick wird er also auf „true“ gesetzt, beim erneuten Klick wieder auf „false“. In der „render“-Eigenschaft wird der Inhalt der Variable „text“ je nach Status von „gefaelltmir“ unterschiedlich definiert. Über Platzhalter, die jeweils in geschwungenen Klammern stehen, werden das Click-Event sowie der Inhalt der Variablen „text“ im „<p>“-Element platziert. Anschließend wird alles wie gehabt per „render()“-Methode im DOM-Baum ausgegeben.

Zuerst erscheint im Browser also der Text „Klick, wenn dir das gefällt.“. Sobald der Text angeklickt wird, ändert sich der Text in „Schön, dass dir das gefällt.“.

Viele Möglichkeiten und eigene Developer-Tools

„React“ bietet noch weitaus mehr Möglichkeiten, um dynamischen per JavaScript generierten Quelltext auszugeben. Auf der Website gibt es ein Tutorial für Einsteiger sowie verschiedene thematische Führungen. Außerdem existiert natürlich eine umfassende Dokumentation der einzelnen Methoden und Eigenschaften von „React“ – samt kleiner Beispiele.

Mit den Add-ons von „React“ lassen sich unter anderem Animationen auf per „React“ erstellte HTML-Elemente anwenden. Außerdem gibt es in den Add-ons einige Methoden, die einem helfen, Events zu simulieren, sowie solche, welche die Performance von „React“ testen. Ein Blick in die Facebook-Bibliothek lohnt sich also – auch für jene, die sich dafür interessieren, wie Facebook seine eigene Website programmiert hat.

Aufgrund der Komplexität der Bibliothek muss man sich zunächst einmal ein bisschen einlesen. Hat man das Grundprinzip und die wichtigsten Methoden verstanden und verinnerlicht, lassen sich recht schnell erste Ergebnisse realisieren.

Um das Debuggen innerhalb der „React“-Programmierung zu vereinfachen, gibt es für Chrome eigene „React“-Developer-Tools als Erweiterung. So lassen sich Fehler in der Programmierung einfach finden und beheben.

Facebook hat „React“ unter der BSD-Lizenz veröffentlicht. Diese erlaubt die kostenfreie Nutzung der Bibliothek, auch zu kommerziellen Zwecken.