React

aus Wikipedia, der freien Enzyklopädie
Wechseln zu: Navigation, Suche
React
Maintainer Facebook
Entwickler Facebook, Instagram und die Gemeinschaft
Erscheinungsjahr 2013
Aktuelle Version 16.2.0[1]
(28. November 2017)
Betriebssystem Plattformunabhängigkeit
Programmiersprache JavaScript
Kategorie Webframework
Lizenz MIT[2]
reactjs.org

React ist eine JavaScript-Softwarebibliothek[3], die ein Grundgerüst für die Ausgabe von User-Interface-Komponenten von Webseiten zur Verfügung stellt (Webframework). Komponenten werden in React hierarchisch aufgebaut und in dessen Syntax als selbst definierte HTML-Tags repräsentiert.[4] Das Modell von React verspricht durch die Konzepte des unidirektionalen Datenflusses und des „Virtual DOM“ den einfachen, aber trotzdem performanten Aufbau auch komplexer Anwendungen. React bildet typischerweise die Basis für Single-Page-Webanwendungen, kann jedoch auch mittels Node.js serverseitig (vor-)gerendert werden.

Geschichte[Bearbeiten | Quelltext bearbeiten]

React wurde ursprünglich von Jordan Walke, einem Softwareingenieur bei Facebook, entwickelt und 2011 erstmals für Facebooks Newsfeed und später 2012 für Instagram eingesetzt. Im Mai 2013 wurde von Facebook angekündigt, React zukünftig als Open-Source-Projekt weiterführen zu wollen. Im Oktober 2014 wurde die Lizenz von der anfangs Apache-Lizenz auf die BSD-Lizenz mit zusätzlicher Patentlizenz geändert, welche den Widerruf der Lizenz bei Klagen gegen oder bei Patentstreitigkeiten mit Facebook vorbehält.[5] Diese unkonventionelle Klausel führte zu einer kontroversellen Diskussion.[6] Eine Umformulierung dieses Patentklausel im April 2015[7] beendete die Auseinandersetzung nicht. Im Juli 2017 kündigte die Apache Software Foundation an, keine Apache-Projekte mehr mit dieser Zusatzlizenz zu erlauben.[8] Entgegen anfänglichen Angaben, nicht von der Klausel abrücken zu wollen,[9] veröffentliche Facebook im September 2017 React in der Version 16.0.0 unter der MIT-Lizenz.[10][11]

Kernkonzepte[Bearbeiten | Quelltext bearbeiten]

Unidirektionaler Datenfluss[Bearbeiten | Quelltext bearbeiten]

In Kombination mit der deklarativen Natur der Komponentendefinition in React soll mittels eines unidirektionalen Datenflussmodells der Aufbau und die Wechselwirkungen zwischen Komponenten vereinfacht werden. Anders als beispielsweise mittels komplexem Event Handling erhält eine Komponente Daten nur über statische Eigenschaften, die dieser übergeben wurden. Eine Komponente kann ihr übergebene Eigenschaften in diesem Modell nicht abändern. Eigenschaften können jedoch übergebene Callback-Funktionen sein und somit die übergeordneten Komponenten beeinflussen.

Virtual DOM und DOM-Diffing[Bearbeiten | Quelltext bearbeiten]

Die Kernidee von React besteht in der Annahme, dass der komplette der betroffenen Komponente untergeordnete Anwendungsbaum bei jeder Änderung einer Eigenschaft der Komponente neu aufgebaut wird. Da es in der Praxis performanceintensiv sein kann, dies z. B. im Webbrowser innerhalb des DOM durchzuführen, wurde das Konzept des „Virtual DOM“ geschaffen. Die damit verbundene Technik des „DOM-Diffing“ beschreibt das selektive Aktualisieren des DOM auf Basis eines Vergleichs zwischen ursprünglichem und geänderten Virtual DOM.

Als Beispiel kann ein Entwickler bei einer Messaging-Anwendung in einer Inbox davon ausgehen, dass die Auflistung aller Nachrichten und der untenstehende Zähler der Nachrichtenanzahl bei jeder neuen Nachricht komplett neu aufgebaut werden. Das DOM-Diffing sorgt in diesem Fall dafür, dass lediglich die veränderten Teile (in diesem Fall das Ergänzen der neuen Nachricht und das Aktualisieren des Zählers) im DOM aktualisiert werden.

JavaScript syntax extension (JSX)[Bearbeiten | Quelltext bearbeiten]

Mit Hilfe der eingebauten, an XML angelehnten Template-Sprache JSX (Javascript XML) steht optional eine Syntax für die Deklaration von React-Komponenten zur Verfügung, welche es erlaubt, Javascript-Logik, HTML und CSS in eine React-Komponente einzukapseln und modular in Web-Applikationen einzusetzen.[12][13]

Kritik[Bearbeiten | Quelltext bearbeiten]

Anders als bei strikten MVC-Modellen wird in React ein komponentenzentriertes Modell vorgeschlagen, welches Logik für Interaktion und Darstellung innerhalb eines Objekts bündelt. Dies wird insbesondere durch die weitverbreitete strikte Trennung zwischen Markup und Logik in Form von Templating-Systemen oft kritisch gesehen.

Weblinks[Bearbeiten | Quelltext bearbeiten]

Referenzen[Bearbeiten | Quelltext bearbeiten]

  1. api.github.com. (abgerufen am 28. November 2017).
  2. React v16.0 (en) 26. September 2017.
  3. A JavaScript library for building user interfaces - React. Abgerufen am 13. April 2017.
  4. Multiple Components.
  5. BSD + PATENTS · facebook/react@dcf415c. Abgerufen am 28. September 2017 (englisch).
  6. Berkana: A compelling reason not to use ReactJS. In: Bits and Pixels. 24. Mai 2015; abgerufen am 28. September 2017 (englisch).
  7. Update Patent Grant · facebook/react@b8ba8c8. Abgerufen am 28. September 2017 (englisch).
  8. Julia Schmidt: Apache Software Foundation will keine Projekte mit Facebook-Lizenz unter ihrem Dach. Hrsg.: heise Online. 21. Juli 2017 (heise.de).
  9. Julia Schmidt: Facebook wird nicht von seiner Open-Source-Lizenz abrücken. Hrsg.: heise Online. 21. August 2017 (heise.de).
  10. Julia Schmidt: React bekommt doch neue Lizenz. Hrsg.: heise Online. 25. September 2017 (heise.de).
  11. Andrew Clark: React v16.0. In: Facebook (Hrsg.): React Blog. 26. September 2017 (englisch, github.io): “React 16 is available under the MIT license.”
  12. JSX in Depth. Abgerufen am 6. September 2016.
  13. Draft: JSX Specification. Abgerufen am 6. September 2016.