Du hast deinen AdBlocker an?

Es wäre ein Traum, wenn du ihn für t3n.de deaktivierst. Wir zeigen dir gerne, wie das geht. Und natürlich erklären wir dir auch, warum uns das so wichtig ist. Digitales High-five, deine t3n-Redaktion

Entwicklung & Design

Was ist eigentlich „React“ von Facebook?

    Was ist eigentlich „React“ von Facebook?

React: Das V in MVC. (Screenshot: Facebook)

Jeder spricht von Facebooks React, doch was ist das eigentlich? Was React mit „Seperation of Concerns/Technology“ zu tun hat und was ihr damit machen könnt, lest ihr in diesem Artikel.

Schon wieder ein neues Framework? Reichen nicht Ember, Angular oder Backbone? Nicht ganz. Mit React hat Facebook einen neuen View-Layer erschaffen, nicht mehr und nicht weniger.

Aus diesem Grund ist es auch kaum sinnvoll, nach „Backbone vs. React“ zu suchen, denn die gängigen Frameworks sind nicht mit React vergleichbar – obwohl sie meistens im selben Atemzug genannt werden. Und genau das sorgt für Verwirrung, die ich auflösen will.

Buzzword React: Was kann es?

In einem Satz: Du kannst mit React alleine keine umfassende Web-Applikation bauen – du kannst HTML, sprich UI-Views, rendern. React stellt dir mit JSX eine Template-Sprache zur Verfügung, mit der du deine Views bauen kannst. Dabei kannst du React auch mit vanilla JavaScript nutzen, JSX macht den Umgang mit React aber einfacher. Und so sieht React mit JSX aus:

var MarkdownEditor = React.createClass({
  getInitialState: function() {
    return {value: 'Type some *markdown* here!'};
  },
  handleChange: function() {
    this.setState({value: React.findDOMNode(this.refs.textarea).value});
  },
  render: function() {
    return (
      <div className="MarkdownEditor">
        <h3>Input</h3>
        <textarea
          onChange={this.handleChange}
          ref="textarea"
          defaultValue={this.state.value} />
        <h3>Output</h3>
        <div
          className="content"
          dangerouslySetInnerHTML={{
            __html: marked(this.state.value, {sanitize: true})
          }}
        />
      </div>
    );
  }
});

React.render(<MarkdownEditor />, mountNode);

Um rauszufinden, was sich hinter dem neuen Hype-Buzzword „React“ verbirgt, habe ich mich einige Tage damit beschäftigt – und komme zu dem Schluss, dass React durchaus einen Blick wert ist. Im Folgenden lest ihr warum:

Anzeige

1. Reacts „Code-Suppe“

Klassischerweise trennst du deinen View von der Funktionalität oder: HTML von JavaScript. Das führt in aller Regel zu großen JavaScript-Dateien die alle Funktionen beinhalten, was manchmal Schwierigkeiten dabei verursacht, den „gesamten“ Code im Überblick zu behalten – oder beim Debugging. Kurzum: React nimmt die Komplexität aus dem View-Layer.

Facebook versucht die Funktionalität direkt da zu platzieren, wo sie auch dargestellt wird – und aus dieser Perspektive ergibt diese „Code“-Suppe aus HTML, JavaScript und den UI-Komponenten Sinn.

React nimmt Komplexität

Du erkennst eindeutig, was der Code macht – ähnlich wie bei Angular-Templates. Ein einfaches Beispiel: Du willst den Usernamen im header anzeigen lassen:

<header>  
    <div class=„name“>
        Not Logged In
    </div>
</header>  
$.post(‚/login‘, credentials, function( user ) {
    // Modify the DOM here
    $(‚header .name‘).text( user.name );
});

Mit React könnte das Selbe so aussehen:

render: function() {  
    return <header>
        { this.state.name ?
            this.state.name :
            <span>Not Logged In</span> }
    </header>;
}

React lässt den Server rendern

Du kannst React direkt am Server ausführen, beziehungsweise rendern lassen. Umfangreiche Applikationen ausschließlich auf dem Client rendern zu lassen, kann zu Performance-Einbußen führen – dagegen können sich Projekte, die ausschließlich am Server gerendert werden, um ein Vielfaches „schneller“ anfühlen.

Fazit: React ist cool – und uncool

Wenn deine Applikation nicht mit sehr vielen dynamische Seiten umgehen muss, ist React das falsche Mittel. Genauso, wenn du nicht bereit bis, Features nachzuentwickeln. Dinge wie Lightboxes und Dropdown-Menüs müssen von Anfang an neu entwickelt werden – denn sie existieren in dem relativ jungem React schlichtweg noch nicht.

React ist gut in Teams zu nutzen, nicht nur, weil es UI-Workflows unterstützt, sondern auch, weil React in UI-Komponenten „denkt“. Desweiteren ist es einfach, React-Code zu debuggen und zu warten.

Allerdings ist React ziemlich groß – vor allem im Vergleich zum Nutzen. Die Größe von einer nutzbaren React-Library entspricht ziemlich genau der von Angular – allerdings ist Angular ein komplettes Framework und React ist nur das V in MVC.

Noch ein Wort zur Browserkompatibilität: React ist nur dann einsetzbar, wenn deine Applikation in Browsern laufen muss, die nicht älter sind als IE8. Darüber hinaus hat React eine relativ steile Lernkurve – die mittelmäßige Dokumentation hilft nicht wirklich. Wenn du dir der oben genannten Punkte bewusst bist, wirst du mit React allerdings glücklich werden.

React kannst du hier runterladen Wer sich mit React beschäftigen will, sollte sich dieses Cheatsheet ansehen und diesen grandiosen Artikel lesen. Es hat sich übrigens auch schon die erste deutsche React-Community gebildet, die ihr hier findet.

Habt ihr schon React eingesetzt?

Finde einen Job, den du liebst

3 Reaktionen
beingcovers
beingcovers

informative post. For Facebook Covers http://beingcovers.com

Antworten
Lars
Lars

Die Links im letzten Absatz sind defekt( stehen in Anführungszeichen)

Antworten
Florian Scholz
Florian Scholz

Als Ergänzung dazu noch: Facebook hat für React noch eine Softwarearchitektur namens Flux entwickelt. Wenn man diese verwendet um den Code zu organisieren der die Restliche Funktionalität wie Datenhandling Server-Client-Kommunikation etc. beinhaltet, kann react mit nur unwesentlich mehr Größe auch die Restlichen Aufgaben von Angular (und noch manches mehr) mit übernehmen.
(mehr Informationen: https://facebook.github.io/flux/docs/overview.html)

Ich würde denken in den meisten Fällen wo React sinnvoll ist, dürfte auch die verwendung von Flux Sinn ergeben, da man dadurch ohne weitere unter Umständen große Libraries auskommt.

Antworten
Bitte melde dich an!

Du musst angemeldet sein, um einen Kommentar schreiben zu können.

Jetzt anmelden

Hinweis

Du hast gerade auf einen Provisions-Link geklickt und wirst in Sekunden weitergeleitet.

Bei Bestellung auf der Zielseite erhalten wir eine kleine Provision – dir entstehen keine Mehrkosten.


Weiter zum Angebot