Was man über React wissen sollte
Was ist React? Kurz gefasst handelt es sich bei React um eine Bibliothek zur Entwicklung grafischer Oberflächen für Webanwendungen. Doch was gibt es darüber hinaus über React zu wissen?
- Golo Roden
Was ist React? Kurz gefasst handelt es sich bei React um eine Bibliothek zur Entwicklung grafischer Oberflächen für Webanwendungen. Doch was gibt es darüber hinaus über React zu wissen?
React wird häufig im Zusammenhang mit Web-UI-Frameworks wie Vue.js oder Angular genannt – tatsächlich handelt es sich bei React aber nicht um ein Framework im eigentlichen Sinne. Stattdessen ist React lediglich eine verhältnismäßig kleine und einfache Bibliothek zum Rendern grafischer Oberflächen. Anders als UI-Frameworks verzichtet React auf Konzepte für Datenbindung, Routing, Dependency-Injection und Ähnliches. Das macht React zunächst einmal viel "leichtgewichtiger" als viele der Alternativen.
Das war in den Anfangstagen von React im Jahr 2013 revolutionär, vor allem im Vergleich zum damaligen Platzhirsch Angular 1, das zwar komfortabel zu benutzen, aber aufgrund einer mäßigen Performance und der fehlenden Skalierbarkeit kaum in der Lage war, komplexe UIs abzubilden. Genau diese Probleme hat React damals bereits adressiert und führte zu dem Zweck verschiedene Konzepte aus der funktionalen Programmierung in die UI-Welt ein, beispielsweise Unveränderlichkeit von Datentypen oder den sogenannten unidirektionalen Datenfluss.
Ein wesentlicher Grund für das Verwenden dieser funktionalen Konzepte ist, dass sie den Einsatz des sogenannten Virtual-DOMs ermöglichen, einer In-Memory-Kopie des DOMs, die von React mit extrem hoher Performance bearbeitet werden kann und die erst nach Abschluss aller Prüfungen und Anpassungen mit dem echten DOM synchronisiert wird. Natürlich sind die funktionalen Konzepte an sich nicht neu, aber React bringt sie stärker in das Bewusstsein von Entwicklerinnen und Entwicklern.
Bemerkenswert an React ist zudem, dass React von vornherein sehr stark auf Komponentenorientierung gesetzt hat. Inzwischen gibt es hierzu sogar zwei Möglichkeiten, nämlich zum einen die sogenannten klassenbasierten, zum anderen die funktionalen Komponenten. Prinzipiell ist die Verwendung der beiden annähernd gleichwertig möglich, allerdings erfährt der funktionale Ansatz zunehmend mehr Aufmerksamkeit, weshalb es in neuen Projekten durchaus ratsam ist, diesem Weg zu folgen.
Maßgeblich entwickelt wurde und wird React von Facebook, tatsächlich sogar für den Eigengebrauch: Facebook verwendet React, um die UI von Facebook zu entwickeln. Anfangs war ein großer Kritikpunkt in Bezug auf React die verwendete Lizenz, die durch proprietäre und Facebook-spezifische Erweiterungen auffiel – das ist aber seit einigen Jahren passé und React steht unter der gängigen MIT-Lizenz zur Verfügung.
Empfohlener redaktioneller Inhalt
Mit Ihrer Zustimmmung wird hier ein externes YouTube-Video (Google Ireland Limited) geladen.
Ich bin damit einverstanden, dass mir externe Inhalte angezeigt werden. Damit können personenbezogene Daten an Drittplattformen (Google Ireland Limited) übermittelt werden. Mehr dazu in unserer Datenschutzerklärung.
React-State verwalten
Ein wesentlicher Bestandteil von React ist der Umgang mit dem sogenannten State, also dem aktuellen Zustand der Anwendung. Da State per Definition veränderlich sein muss, ist es besonders interessant, wie ein UI-Framework beziehungsweise eine UI-Bibliothek mit diesem Thema umgeht. In React gibt es zu diesem Zweck nicht nur den State als Objekt, sondern auch dedizierte Funktionen, um ebendiesen State zu ändern. Die Verwendung dieser Funktionen ähnelt dabei dem Einsatz des Command-Patterns.
Es ist ratsam, diese Funktionen fachlich und nicht technisch zu benennen, um mehr Semantik in der Anwendung ausdrücken zu können und weniger die gängige, aber schädliche CRUD-Denkweise zu verwenden. Zu diesem Zweck bieten die funktionalen Komponenten einen Hook namens useState, der ein State-Objekt erzeugt und zurückgibt sowie außerdem eine Funktion erzeugt, mit der sich dieser State neu setzen lässt. Wichtig hierbei ist, dass der State durch den Aufruf der entsprechenden set-Funktion tatsächlich im Sinne der Unveränderlichkeit von Objekten ersetzt und nicht modifiziert wird. Dieser Ansatz findet sich inzwischen auch in zahlreichen anderen Modulen zur State-Verwaltung.
Allerdings ist es nicht ratsam, in jeder Komponente State zu halten. Stattdessen unterscheidet man üblicherweise zwischen Stateless- und Stateful-Komponenten, wobei erstere lediglich zur Präsentation von Daten dienen, aber nicht über eigene Logik verfügen. Sie findet sich ausschließlich in den Stateful-Komponenten, die tendenziell in der Hierarchie der UI weiter oben angesiedelt sind. Der State wird also in der Hierarchie der UI-Komponenten von oben nach unten durchgereicht.
Die untersten Komponenten lösen allerdings in Reaktion auf Aktionen der Anwenderin oder des Anwenders Ereignisse aus, die umgekehrt zum State von unten nach oben wandern – und schließlich zu einer Änderung des States führen, was dann wiederum durch die Hierarchie nach unten durchgereicht wird. Da Komponenten in React letztlich nichts anderes als Funktionen sind, geht es also letztlich um die Komposition und Orchestrierung von Funktionen.
Empfohlener redaktioneller Inhalt
Mit Ihrer Zustimmmung wird hier ein externes YouTube-Video (Google Ireland Limited) geladen.
Ich bin damit einverstanden, dass mir externe Inhalte angezeigt werden. Damit können personenbezogene Daten an Drittplattformen (Google Ireland Limited) übermittelt werden. Mehr dazu in unserer Datenschutzerklärung.
JSX in React verwenden
Zum Anordnen der Komponenten gibt es in React eine eigene Sprache namens JSX. Dabei handelt es sich um eine von Facebook entwickelte Erweiterung von JavaScript, die XML als zusätzlichen Datentyp verarbeiten kann. Auf dem Weg lässt sich in einer JSX-Datei nicht nur JavaScript-Code unterbringen, sondern auch HTML, sodass man die semantische Gliederung der Komponente und deren Verhalten in einer gemeinsamen Datei verwalten kann.
Fügt man zusätzlich noch eine JSS-Lösung, beispielsweise styled-components, hinzu, lässt sich auch das für eine Komponente erforderliche CSS in einer JSX-Datei unterbringen. Auf dem Weg hat man alle drei Perspektiven einer Komponente gemeinsam in einer Datei gekapselt, die dann als eigenständiges Artefakt weitergegeben und verwendet werden kann.
Das Besondere an diesem Ansatz ist, dass er eine fachliche Anordnung von Code ermöglicht, und nicht – wie die klassische Webentwicklung – eine Trennung von Sprachen vorschlägt: Die historisch bedingte Unterscheidung von HTML, CSS und JavaScript ist nämlich eine ebensolche "Separation of Languages", die technischen Kriterien folgt, wohingegen eine fachliche Trennung gemäß "Separation of Concerns" viel sinnvoller und nachhaltiger wäre.
Empfohlener redaktioneller Inhalt
Mit Ihrer Zustimmmung wird hier ein externes YouTube-Video (Google Ireland Limited) geladen.
Ich bin damit einverstanden, dass mir externe Inhalte angezeigt werden. Damit können personenbezogene Daten an Drittplattformen (Google Ireland Limited) übermittelt werden. Mehr dazu in unserer Datenschutzerklärung.
Warum React?
Wenn man sich nun mit der Frage beschäftigt, warum man React anstelle anderer UI-Ansätze verwenden sollte, gibt es im Wesentlichen zwei Gründe, auf die man immer wieder stößt. Der erste Grund ist, dass React wie bereits erwähnt sehr spezialisiert und leichtgewichtig ist, sodass man es als einen Baustein von vielen betrachten kann. Da man React zwingend mit anderen Modulen kombinieren muss, um eine vollständige Anwendung zu entwickeln, kann React nicht zu einer systemrelevanten Größe heranwachsen.
Natürlich wird auch ein Austausch von React gegen eine andere Technologie aufwendig werden, aber es müssen eben, wenn die Anwendung vernünftig und sauber strukturiert ist, nur jene Komponenten überarbeitet werden, die tatsächlichen UI-Bezug haben. Das klingt zunächst so, als ob das ohnehin alle Komponenten wären – aber ein Frontend enthält letztlich weitaus mehr Code als nur solchen mit direktem UI-Bezug.
Das ist bei Frameworks, die über das reine Rendern hinaus gehen und zahlreiche weitere Dienste für das Frontend bereitstellen, weitaus schwieriger, da sie viel stärker in die Struktur der gesamten Anwendung eingreifen. Insofern lässt sich React besser entkoppeln. Der Nachteil dabei ist allerdings, dass React naturgemäß stets mit anderen Modulen kombiniert und integriert werden muss, hier hat man beispielsweise bei Angular weniger Aufwand. Letztlich lässt sich nicht pauschal sagen, das eine sei besser oder schlechter als das andere – es sind am Ende einfach unterschiedliche Philosophien.
Der zweite Grund, der häufig als Argument für React genannt wird, ist die enge Integration mit JavaScript. Anders als zum Beispiel in Vue.js oder Angular gibt es in React keinen proprietären Weg, um eine Schleife, eine Bedingung oder eine Datenbindung herzustellen. Stattdessen verwendet React hierfür schlichtweg die Konstrukte, die es in JavaScript ohnehin gibt, weshalb die Beschäftigung mit React dazu beiträgt, generell eine bessere JavaScript-Entwicklerin oder ein besserer JavaScript-Entwickler zu werden – und umgekehrt.
Im Gegensatz dazu lernt man bei Vue.js und Angular lediglich Framework-spezifische, proprietäre Vorgehensweisen, die man außerhalb des jeweiligen Frameworks nicht anwenden kann.
Empfohlener redaktioneller Inhalt
Mit Ihrer Zustimmmung wird hier ein externes YouTube-Video (Google Ireland Limited) geladen.
Ich bin damit einverstanden, dass mir externe Inhalte angezeigt werden. Damit können personenbezogene Daten an Drittplattformen (Google Ireland Limited) übermittelt werden. Mehr dazu in unserer Datenschutzerklärung.
Next.js und Redux
Da React mit anderen Modulen kombiniert werden muss, ist es gut, etablierte und gut funktionierende Module zu kennen. Erwähnenswert sind hier vor allem Next.js und Redux.
Next.js ist eine Laufzeitumgebung für React, die zahlreiche Aufgaben bereits übernimmt, darunter das serverseitige Rendern, das Generieren und Exportieren einer statischen Webseite, die Internationalisierung, das Optimieren von Bildern, und vieles anderes mehr. Wer React mit Next.js kombiniert, erspart sich eine Menge Arbeit und kann sich primär auf das Entwerfen und Entwickeln der eigentlichen Komponenten konzentrieren. Insofern bildet Next.js eine hervorragende Grundlage für die Arbeit mit React.
Redux ist im Gegensatz dazu ein sogenannter State-Container, also ein Modul, das sich auf die Verwaltung von State spezialisiert hat. Der Umgang mit State ist in React zwar prinzipiell von Haus aus schon enthalten, Redux professionalisiert diesen Ansatz aber nochmals und führt einige eigene Konstrukte ein, die vor allem für den Einsatz in großen und komplexen Anwendungen sinnvoll sind. Dazu zählt das zentrale Verwalten eines Stores sowie vorgegebener Pfade, wie diese Stores zu aktualisieren sind.
Beide Werkzeuge, Next.js und Redux, sollten React-Entwicklerinnen oder -Entwickler daher kennen und ein grundlegendes Verständnis für sie aufweisen, um sie im Bedarfsfall einschätzen und verwenden zu können.
Empfohlener redaktioneller Inhalt
Mit Ihrer Zustimmmung wird hier ein externes YouTube-Video (Google Ireland Limited) geladen.
Ich bin damit einverstanden, dass mir externe Inhalte angezeigt werden. Damit können personenbezogene Daten an Drittplattformen (Google Ireland Limited) übermittelt werden. Mehr dazu in unserer Datenschutzerklärung.
Fazit
Insgesamt lässt sich festhalten, dass React eine äußerst gelungene UI-Bibliothek darstellt, mit der sich auch umfangreiche, komplexe und anspruchsvolle grafische Oberflächen entwickeln lassen. Mit React wird insbesondere glücklich, wer funktionale Programmierung und die damit verbundenen Konzepte schätzt, und wer die Modularisierung des Frontends mehr wertschätzt als eine vollständig integrierte All-in-One-Lösung, wie sie Angular bietet. Wie bereits gesagt gibt es hier kein pauschales Richtig und Falsch – React und Angular bedienen letztlich unterschiedliche Philosophien.
Der Einstieg in React fällt zunächst auf Grund von JSX nicht ganz leicht, wirkt die Syntax doch zunächst gewöhnungsbedürftig. Hat man sich aber an JSX und die dahinterstehende Denkweise gewöhnt, will man den Ansatz zum Integrieren aller Aspekte einer Komponente nicht mehr missen.
Einen großen Anteil an der effizienten und effektiven Entwicklung mit React hat nicht zuletzt auch das Ökosystem, das neben zahlreichen anderen Modulen vor allem mit Next.js und Redux zwei hervorragende Ergänzungen hervorgebracht hat. ()
