Ratgeber

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:

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?

Bitte beachte unsere Community-Richtlinien

Wir freuen uns über kontroverse Diskussionen, die gerne auch mal hitzig geführt werden dürfen. Beleidigende, grob anstößige, rassistische und strafrechtlich relevante Äußerungen und Beiträge tolerieren wir nicht. Bitte achte darauf, dass du keine Texte veröffentlichst, für die du keine ausdrückliche Erlaubnis des Urhebers hast. Ebenfalls nicht erlaubt ist der Missbrauch der Webangebote unter t3n.de als Werbeplattform. Die Nennung von Produktnamen, Herstellern, Dienstleistern und Websites ist nur dann zulässig, wenn damit nicht vorrangig der Zweck der Werbung verfolgt wird. Wir behalten uns vor, Beiträge, die diese Regeln verletzen, zu löschen und Accounts zeitweilig oder auf Dauer zu sperren.

Trotz all dieser notwendigen Regeln: Diskutiere kontrovers, sage anderen deine Meinung, trage mit weiterführenden Informationen zum Wissensaustausch bei, aber bleibe dabei fair und respektiere die Meinung anderer. Wir wünschen Dir viel Spaß mit den Webangeboten von t3n und freuen uns auf spannende Beiträge.

Dein t3n-Team

3 Kommentare
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
Lars
Lars

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

Antworten
beingcovers
beingcovers

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

Antworten

Melde dich mit deinem t3n Account an oder fülle die unteren Felder aus.

Bitte schalte deinen Adblocker für t3n.de aus!

Hey du! Schön, dass du hier bist. 😊

Bitte schalte deinen Adblocker für t3n.de aus, um diesen Artikel zu lesen.

Wir sind ein unabhängiger Publisher mit einem Team bestehend aus 65 fantastischen Menschen, aber ohne riesigen Konzern im Rücken. Banner und ähnliche Werbemittel sind für unsere Finanzierung sehr wichtig.

Danke für deine Unterstützung.

Digitales High Five,
Stephan Dörner (Chefredakteur t3n.de) & das gesamte t3n-Team

Anleitung zur Deaktivierung