React-Grundlagen

Auf diser Seite habe ich Einsteiger-Infos zu React zusammengestellt. Weiterführende Infos gibt es in der React-Snippet-Sammlung.

React ist eine Bibliothek, kein Framework. Wird oft für Views in einer MVC-Architektur verwendet.

Und für den Rest von MVC?

Redux
Flux - siehe Artikel Flux und React TODO
Backbone - siehe Artikel Backbone und React oder Todo-App-Beispiel TODO

Links:

TODO Code-Beispiele mit ES6-Klassen statt React.createClass. Siehe React-Snippets.

Rendering und JSX

Beispiel-Komponente:

var MyComponent = React.createClass({
  render: function() {
    return <div>
      <button onClick={this.onMyButtonClick}>Click here</button>
    </div>
  },
  onMyButtonClick: function() {
    ...
  }
});

TODO Autobinding durch React.createClass

Die Methode render verwendet ein JSX-Template. Dieses wird in JavaScript-Code transformiert - während der Entwicklung direkt im Browser (mit dem JSX Transformer), im Produktivsystem wird vorkompiliert (z.B. mit Babel).

Obiges Beispiel sieht transformiert so aus:

React.DOM.div({},
  React.DOM.button({onClick: this.onMyButtonClick}, 'Click here'));

JSX ist dabei nur ein Vorschlag. Man kann React auch mit einer anderen Template-Engine verwenden.

Die Ideen hinter JSX:

Entwickler sollen keine neue Templating-Sprache lernen.
JSX ist nur eine dünne Abstraktion normaler JavaScript-Aufrufe und erlauben vollen JavaScript-Einsatz - im Gegensatz zu logikfreien Template-Sprachen wie Handlebars.
Die Trennung von HTML, CSS und JavaScript ist keine sinnvolle Auslegung von separation of concerns. Es ist besser, die Anwendung nach Komponenten zu separieren und alles was zu einer Komponente gehört in eine Datei zu schreiben (Siehe: Vortrag React: Rethinking best practices). Damit ist in erster Linie HTML und JavaScript gemeint. Es gibt allerdings auch Leute, die CSS direkt einbinden.

Der State

Der Zustand einer Komponente wird im Attribut state festgehalten. Der state ist in der Komponente gekapselt.

React macht kein dirty-checking wie Angular. Das Rendering wird durch den expliziten Aufruf von setState ausgelöst.

Beispiel:

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

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

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

Props

Props werden einer Komponente von außen übergeben und können auch nur von außen verändert werden.

Beispiel:

var ColorBar = React.createClass({
  style: function() {
    return {
      width: 50,
      backgroundColor: this.props.color
    };
  },

  render: function() {
    return <div style={this.style()}></div>
  }
});

var App = React.createClass({
  getInitialState: function() {
    return {colors: ['red', 'green', 'blue']};
  },

  render: function() {
    function createBar(color) {
      return <ColorBar color={color} />
    }

    return <div>{this.state.colors.map(createBar)}</div>
  },

  componentDidMount: function() {
    var me = this
    window.setInterval(function() {
      var colors = me.state.colors;
      me.setState({colors: [ colors[1], colors[2], colors[0]]});
    }, 500);
  }
});

React.render(<App />,
  document.querySelector('#react-container'));

Virtueller DOM

Siehe: Artikel Virtuelles DOM mit React.js - Details zur Implemetierung des virtuellen DOM

Die render-Methoden ändern nicht das echte DOM, sondern ein virtuelles DOM. Das virtuelle DOM ist eine Struktur aus einfachen JavaScript-Objekten. Siehe: Beispiel-Code, der virtuelles DOM ausgibt.

Bei jedem Tick werden Unterschiede zum bisherigen virtuellen DOM ermittelt. Dadurch muss nicht jede geänderte View komplett gerendert werden, das echte DOM wird nur an den Stellen angepasst, an denen sich wirklich etwas getan hat.