React ist eine JavaScript-Softwarebibliothek, 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 können in dessen Syntax als selbst definierte HTML-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. [Wiki: https://de.wikipedia.org/wiki/React]
React wird heute häufig für modernen Webanwendungen / Projekte verwendet, von kleinen und einfachen (z.B. Single Page Application) bis hin zu großen und komplexen. Es ist sehr flexibel und kann für UI-Projekte jeder Größe und Plattform verwendet werden, einschließlich mobiler, Web- und Desktop-Entwicklung. Viele weltbekannte Unternehmen, wie z.B. Instagram und Airbnb, setzen daher bei ihren Produkten auf React.
Performance ist die größte Herausforderung der heutigen dynamischen Webanwendungen. Um dynamische Webseiten zu ermöglichen, wird im Browser ein DOM (Document Object Model) aufgebaut, das alle auch noch so kleinen Elemente in einer Baumstruktur speichert, um auf diesen dann Operationen wie das Berechnen von Positionen oder Eigenschaften wie Farbe, Größe etc. auszuführen. Sollen das DOM oder einzelne seiner Eigenschaften verändert werden, muss das DOM neu berechnet werden. Dazu wird typischerweise jQuery genutzt, welches die Operationen über das Browser DOM ausführt. Da sich die Elemente auf unterschiedlichste Art gegenseitig beeinflusst können, sind diese Änderung bzw. Berechnungen ziemlich aufwändig.
In React löst Virtual DOM dieses Problem: Indem das DOM im Memory gespeichert und nur selektiv aktualisiert wird, ist es sehr schnell änderbar und die Anzahl an Aktualisierungen im Browser wird minimiert.
Komponenten erlauben dir deine Benutzeroberfläche in unabhängige, wiederverwendbare Teile aufzubrechen und jedes Teil isoliert zu betrachten. Die Komponenten sind JavaScript-Funktionen oder -Klassen (seit ES6) mit einer render-Methode.
React überträgt die Daten nur in eine Richtung, zu den Komponenten hin. Damit wird das Debugging vereinfacht.
Ein fundamentales Konzept von React ist JSX. JSX ist eine Erweiterung der Programmiersprache JavaScript und ermöglicht es, HTML-ähnliche Elemente nahtlos in JavaScript zu verwenden. Mit JSX wird React einfach mit der Darstellung (View Layer) verbunden. Die Idee hinter JSX ist, nicht mehr nach Technologie, sondern nach Zuständigkeit zu trennen. Dieses Konzept wird Separation of Concerns (SoC) genannt. Dadurch, dass eine Komponente nicht mehr aus zwei Entitäten kombiniert werden muss, trägt JSX dazu bei, in sich geschlossene Komponenten zu schreiben, die ihrerseits sehr gut wiederverwendbar sind.
React hat eine sehr steile Lernkurve, denn es ist sehr einfach, damit Komponenten zu bauen. Eine Komponente ist in React nicht viel mehr als eine JavaScript-Klasse, welche die gesamte Logik zur Darstellung der Komponente enthält. Um eine Komponente zu schreiben, muss man nicht einmal eine Template-Sprache lernen, denn der UI-Teil einer Komponente wird in React mit JavaScript geschrieben. JSX verbessert die Lesbarkeit, insbesondere durch die Vereinfachung beim Schreiben von DOM-Elementen.
Der Kern von React sind Komponenten und ihre Komposition zu einer Anwendung. Die Komponenten sind in Klassen unterteilt, die leicht erweitert und übertragen werden können. Dadurch können skalierbare und flexible Applikationen entwickelt werden. Außerdem kann der Komponentenstatus jederzeit durch die React-API übergeprüft und verändert werden.
Ein weiterer großer Vorteil von React ist die JSX-Syntax-Erweiterung, die eine hervorragende Wiederverwendbarkeit bietet. Die Standardmechanik bei React schlägt vor, standardisierte Inline-Stile zu verwenden, die mit JavaScript-Objekten beschrieben sind. JSX verbindet HTML und CSS in einem JavaScript-Code und befreit von dem Schmerz, die Links zu anderen Dateien über Attribute einfügen zu müssen. Jede Komponente kann überall im Projekt frei definiert werden, indem ihr ein bestimmter einzigartiger Status zugewiesen wird.
React mit seinem Ökosystem ist eine Art flexibles Framework. Man selbst kann Bibliotheken aussuchen und zum Kern der Anwendung hinzufügen.
[1] Bild des Blogbeitrags: React Native Logo, https://commons.wikimedia.org/wiki/File:React_Native_Logo.png (abgerufen am 27.11.2019)
