Einführung
Was ist React.js?
React.js ist eine JavaScript-Bibliothek, zur Erstellung von Oberflächen für Webanwendungen. React.js wird seit 2011 von Facebook entwickelt und ist derzeit eine der populärsten Bibliotheken zur Entwicklung von Webanwendungen. React.js abstrahiert vom DOM und ermöglicht so eine einfachere Oberflächenprogrammierung und eine bessere Performance. React.js verwendet außerdem ein hierarchisches Komponentenmodell und das Konzept des unidirektionalen Datenflusses und ermöglicht so eine gute Wiederverwendbarkeit von Oberflächenkomponenten und einen einfachen strukturierten Aufbau auch komplexer Webanwendungen. Nach anfänglichen Schwierigkeiten und Diskussionen um die Lizenzierung, steht React.js seit 2017 unter der MIT-Lizenz.
Verwendete Technologien
JavaScript
JavaScript ist eine Skriptsprache, die 1995 von Netscape entwickelt wurde. Mit JavaScript kann der Inhalt von Webseiten generiert, verändert und nachgeladen und so dynamisch zur Laufzeit auf Benutzerinteraktionen reagiert werden. React.js ist eine JavaScript-Bibliothek für die Entwicklung von Webanwendungen mit Hilfe von vorgefertigten JavaScript-Modulen.
JSX
JSX (JavaScript Syntax eXtension) ist eine Syntax-Erweiterung für JavaScript, die es ermöglicht HTML-Tags in JavaScript zu verwenden. JSX ermöglicht es, das Aussehen und die Logik mit einer Sprache zu entwickeln. Damit lassen sich mit JSX und React.js abgegrenzte Komponenten in einer einzigen Datei implementieren. Dabei ist JSX kein Muss bei der Entwicklung mit React.js, es wird lediglich empfohlen und bietet sich an.
Node.js
Node.js ist eine serverseitige JavaScript-Plattform zur Realisierung von Webservern, die in der JavaScript-Laufzeitumgebung „V8“ ausgeführt werden. Node.js wurde 2009 vom Webentwickler Ryan Dahl veröffentlicht und ist auf verschiedenen Plattformen als Open-Source-Software unter der MIT-Lizenz verfügbar. Node.js kann verwendet werden, um React.js-Anwendungen serverseitig zu rendern. Außerdem wird npm, der Paketmanager von Node.js, für die Installation der React.js-Pakete und die Ausführung von React.js-Anwendungen verwendet.
Architektur
Komponenten
Mit React.js werden Anwendungen aus einzelnen in sich geschlossenen Komponenten entwickelt. Das hat den Vorteil, dass die einmal erstellten Komponenten in anderen Anwendungen wiederverwendet werden können. Außerdem ermöglicht das Komponenten-Design von React.js, dass bei Änderungen in der Oberfläche immer nur die Komponenten aktualisiert werden müssen, die sich auch geändert haben, anstelle jedes mal die gesamte Anwendung zu aktualisieren. Die Komponenten müssen daher alle notwendigen Infor-mationen zu ihrem Aussehen (HTML und ggf. CSS) und ihrer Logik (JavaScript) enthalten.
Unidirektionaler Datenfluss
React.js erlaubt in der Komponentenhierarchie nur einen unidirektionalen Datenfluss, was die Struktur von komplexen Anwendungen und den Datenaustausch zwischen den Komponenten verständlicher machen soll. Realisiert wird der unidirektionale Datenfluss mit Hilfe der sog. Flux-Architektur. Dabei lösen die Komponenten Aktionen aus, die an einen Dispatcher weitergegeben werden, der wiederum die Aktionen an sog. Stores verteilt. Die Stores rendern dann ggf. die Komponenten neu, welche auf ein bestimmtes Store lauschen.
Virtual-DOM
Das DOM (Document Object Model) ist eine vom W3C (World Wide Web Consortium) definierte plattform- und sprachenunabhängige Schnittstelle, die es Skripten erlaubt, dynamisch auf Dokumente zuzugreifen und deren Inhalt, Struktur und Aussehen zu verändern. Beim Laden einer Webseite erstellt der Browser aus dem HTML-Dokument das DOM, eine Baumstruktur von Objekten, basierend auf den HTML-Elementen des HTML-Dokuments. Die Elemente im DOM können dann mit Hilfe von JavaScript angesprochen, manipuliert und gelöscht werden. React.js verwendet einen virtuellen DOM anstelle des regulären DOM, was zu einer Verbesserung der Performance führt.
Versionierung
React.js liegt seit September 2017 in der 17ten Version vor. Die derzeit aktuellste Version, mit ihren jeweiligen Anpassungen kann auf der Seite „https://reactjs.org/versions/“ von „https://reactjs.org/“ eingesehen werden.