React.js

React ist eine JavaScript-Bibliothek zur Ausgabe von Benutzer-Interface Komponenten.

Genauso wie bei Vue.js oder Angular.js werden diese Komponenten hierarchisch aufgebaut. Das bedeutet, dass es eine Root-Komponente gibt, die alle anderen Komponenten enthält. Diese Komponenten können ihrerseits weitere Komponenten enthalten.

Unidirektionaler Datenfluss

Anders als seine Konkurrenten, die einen Bidirektionalen Datenfluss zulassen, setzt React jedoch auf einen rein Unidirektionalen Datenfluss. Das heisst: Man kann Daten auf direktem Weg nur von der Parent Komponente in die Child Komponenten weitergeben. Um Daten von den Child Komponenten in der Hierarchie in übergeordnete Komponenten zu schicken muss man auf Callbacks oder State-Management Systeme wie z.B. Redux zurückgreifen.

Dadurch kann man schwer aufzufindende Fehlerquellen durch unsachgemäßem Zugriff auf Bidirektionale Datenschnittstellen der Komponenten vermeiden. Dies erkauft man allerdings mit erhöhtem Entwicklungsaufwand.

Dynamischer Seitenaufbau

Wie Vue.js oder Angular.js erzeugt der React Code die Komponente nicht aus statischen HTML und CSS Dateien, die unverändert vom Server übernommen werden. Der erzeugte Code baut sie dynamisch im Webbrowser selbst auf.

Dass es sich bei React um ein reines JavaScript Framework handelt, sieht man dem Code bereits auf den ersten Blick an. Im Gegensatz zu Vue oder Angular stehen bei React HTML, CSS und JavaScript Syntax nicht getrennt nebeneinander. Stattdessen ist in der erweiterten JavaScript Syntax von React (in Dateien mit dem Mime-Type '.jsx') die HTML ähnliche Syntax in den Code von JavaScript Funktionen eingebettet.

Hier ein Codebeispiel, das einen einfachen Counter realisiert:

var ButtonCounter = React.createClass({
  getInitialState: function() { // (1)
    return({count: 0});
  },

  add: function() {
    this.setState(
      {count: this.state.count + 1}); // (2)
  },

  render: function() {
    return(
      <div>
        <button onClick={this.add}>
          +
        </button>
        <p>Count: {this.state.count}</p>
      </div>
    );
  }
});

Anstelle von getrennten CSS Dateien übergibt man in der React Welt die Informationen zur Formatierung der Elemente gerne an deren Style-Attribut als sogenannte Inline-Styles.

Daraus ergibt sich auch ein häufig gegen React vorgebrachter Kritikpunkt: Markup und Logik sind anders als bei einer Unterteilung in HTML (oder eigenständigen Templates) und JavaScript eng miteinander verzahnt. Das erschwert es Designern ohne Programmiererfahrung ungemein, Änderungen am Markup vorzunehmen, ohne dabei unbeabsichtigt die Logik der Komponenten durcheinander zu bringen.

Ohne die JSX Erweiterung kann man React auch als reinen JavaScript Code schreiben.