React

React

React
Basisdaten

HauptentwicklerMeta Platforms (vormals Facebook Inc.)
EntwicklerFacebook Inc., Instagram und die Open Source Community
Erscheinungsjahr2013
Aktuelle Version18.3.1[1]
(26. April 2024)
BetriebssystemPlattformunabhängig
Programmier­spracheJavaScript
KategorieBibliothek
LizenzMIT[2]
reactjs.org

React ist eine JavaScript-Programmbibliothek[3] zur Erstellung von webbasierten Benutzeroberflächen. Komponenten werden in React hierarchisch aufgebaut und können in dessen Syntax als selbst definierte JSX-Tags repräsentiert werden.[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 mit Node.js serverseitig (vor-)gerendert werden.

Geschichte

React wurde ursprünglich von Jordan Walke, einem Softwareentwickler 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 Februar 2015 wurde React Native, mit welchem unter anderem die Entwicklung nativer Android-, iOS-, und UWP-Applikationen mit React ermöglicht wurde, auf der React Conf von Facebook vorgestellt und im folgenden Monat ebenfalls als Open-Source-Projekt veröffentlicht.

Im April 2017 kündigte Facebook React Fiber an, ein neuer Satz interner Algorithmen für das Rendering, welcher den alten Rendering-Algorithmus „Stack“ ersetzen sollte. React Fiber sollte die Grundlage für zukünftige Verbesserungen und Weiterentwicklungen der React-Bibliothek schaffen.[5]

Releasefrequenz, Support und Abwärtskompatibilität

React Releases folgen dem Konzept des Semantic Versionings. Es wird zwischen Major-, Minor- und Bugfix-Releases unterschieden. Es wird versucht nicht abwärtskompatible Major Release zu vermeiden und neue Features primär in Minor Releases zu veröffentlichen.[6] Bislang gab es Major Releases alle ein bis drei Jahre. Long Term Support (LTS) gibt es offiziell keinen. Sobald eine Major Release ausgeliefert wird, werden für frühere Releases keine Bugfixes mehr geliefert. Eine Ausnahme dazu dürften kritische Sicherheitsfehler darstellen. In diesem Fall werden Bugfix-Releases für die letzten Minor-Releases ausgeliefert.[7]

Lizenzierung

Die initiale Veröffentlichung von React im Mai 2013 nutzte die Apache-Lizenz Version 2.0. Im Oktober 2014 wurde dies 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.[8] Diese unkonventionelle Klausel führte zu einer kontroversen Diskussion innerhalb der Nutzergemeinschaft von React.[9] Eine Umformulierung dieser Patentklausel im April 2015[10], durch welche diese freizügiger und weniger zweideutig werden sollte, beendete die Auseinandersetzung nicht. Im Juli 2017 kündigte die Apache Software Foundation an, keine Apache-Projekte mehr mit dieser Zusatzlizenz zu erlauben. Sie erachtete diese Lizenzbedingungen als unvereinbar mit ihren eigenen Lizenzierungsrichtlinien, da ein unverhältnismäßiges Risiko auf den Lizenznehmer übertragen werde.[11][12] Entgegen anfänglichen Angaben, nicht von der Klausel abrücken zu wollen,[13] veröffentlichte Facebook im September 2017 React in der Version 16.0.0 unter der MIT-Lizenz.[14][15] Mit der Veröffentlichung von React 15.6.2 wurde die Umstellung auf die MIT-Lizenz auch auf React 15 zurückportiert.[16]

Kernkonzepte

Unidirektionaler Datenfluss

In Kombination mit der deklarativen Natur der Komponentendefinition in React sollen 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 ändern. Eigenschaften können jedoch übergebene Callback-Funktionen sein und somit die übergeordneten Komponenten beeinflussen.

Virtual DOM und DOM-Diffing

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ändertem 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 die ergänzte neue Nachricht und der aktualisierte Zähler) im DOM aktualisiert werden.

JavaScript syntax extension (JSX)

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, die es erlaubt, Javascript-Logik, HTML und CSS in eine React-Komponente einzukapseln und modular in Web-Applikationen einzusetzen.[17][18]

Kritik

Anders als bei strikten MVC-Modellen wird in React ein komponentenzentriertes Modell vorgeschlagen, welches Logik für Interaktion und Darstellung innerhalb einer Funktion bündelt. Dies wird insbesondere aufgrund der weitverbreiteten strikten Trennung zwischen Markup und Logik in Form von Templating-Systemen oft kritisch gesehen.

Einzelnachweise

  1. ↑ registry.npmjs.com.
  2. ↑ React v16.0. In: React Blog. 26. September 2017; (englisch).
  3. ↑ A JavaScript library for building user interfaces - React. Abgerufen am 13. April 2017.
  4. ↑ Multiple Components. In: React Documentation. Abgerufen am 6. September 2016 (englisch).
  5. ↑ Facebook announces React Fiber, a rewrite of its React framework. In: TechCrunch. Abgerufen am 21. Mai 2024 (englisch).
  6. ↑ Versioning Policy. Abgerufen am 5. Dezember 2021 (englisch).
  7. ↑ Dan Abramov: Major version LTS dates. 24. Februar 2019, abgerufen am 6. Dezember 2021 (englisch).
  8. ↑ BSD + PATENTS · facebook/react@dcf415c. Abgerufen am 28. September 2017 (englisch).
  9. ↑ Berkana: A compelling reason not to use ReactJS. In: Bits and Pixels. 24. Mai 2015, abgerufen am 28. September 2017 (englisch).
  10. ↑ Update Patent Grant · facebook/react@b8ba8c8. Abgerufen am 28. September 2017 (englisch).
  11. ↑ Julia Schmidt: Apache Software Foundation will keine Projekte mit Facebook-Lizenz unter ihrem Dach. Hrsg.: heise Online. 21. Juli 2017 (heise.de).
  12. ↑ ASF Legal Previously Asked Questions. In: apache.org. Abgerufen am 21. Mai 2024 (englisch).
  13. ↑ Julia Schmidt: Facebook wird nicht von seiner Open-Source-Lizenz abrücken. Hrsg.: heise Online. 21. August 2017 (heise.de).
  14. ↑ Julia Schmidt: React bekommt doch neue Lizenz. Hrsg.: heise Online. 25. September 2017 (heise.de).
  15. ↑ Andrew Clark: React v16.0. In: Facebook (Hrsg.): React Blog. 26. September 2017 (englisch, github.io): “React 16 is available under the MIT license.”
  16. ↑ Nathan Hunzaker: React v15.6.2. In: React Blog. Facebook, abgerufen am 21. Mai 2024 (englisch): „Switch from BSD + Patents to MIT license“
  17. ↑ JSX in Depth. In: React Documentation. Abgerufen am 6. September 2016 (englisch).
  18. ↑ Draft: JSX Specification. In: JSX Specification. Abgerufen am 6. September 2016 (englisch).

Auf dieser Seite verwendete Medien

React-icon.svg
The logo for the React open source JavaScript library