React ist eine JavaScript-Programmbibliothek 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. 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 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. Diese unkonventionelle Klausel f├╝hrte zu einer kontroversen Diskussion. Eine Umformulierung dieser Patentklausel im April 2015 beendete die Auseinandersetzung nicht. Im Juli 2017 k├╝ndigte die Apache Software Foundation an, keine Apache-Projekte mehr mit dieser Zusatzlizenz zu erlauben. Entgegen anf├Ąnglichen Angaben, nicht von der Klausel abr├╝cken zu wollen, ver├Âffentlichte Facebook im September 2017 React in der Version 16.0.0 unter der MIT-Lizenz.


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. 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.


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.


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.


Weblinks


  • Offizielle Webseite

  • React auf GitHub

  • ReactJS.DE : deutsche React Community

  • Awesome React. A collection of awesome React libraries, resources and shiny things. auf GitHub

  • 5 Practical Examples For Learning The React Framework React-Praxisbeispiele auf tutorialzine.com (2014)

  • React Hooks: Einf├╝hrung (2019)

Einzelnachweise

React

















Metaprime Studio

Send a

message

Wir sind hier, um jede deiner Fragen zu beantworten.

Email : info@metaprime.at

Kostenloses Website Strategiegespr├ĄchÔÇő

In einem kostenlosen Web Strategiegespr├Ąch, decken wir ungenutztes Potenziale Ihrer Webseite auf und erarbeiten eine Strategie, damit Du mit Deiner Webseite auf Google erfolgreicher wirst