© Liashko/Shutterstock.com
Das React-Ökosystem im Überblick

Quer durch die Webwelt


React ist für sich allein genommen ausreichend für einfache Webanwendungen. Wer mehr aus einem React-Projekt machen möchte, dem steht ein reiches Ökosystem zur Verfügung. Ob für das Styling von Komponenten oder das Routing: Für alles gibt es eine Bibliothek. Dieser Artikel gibt einen Überblick über die vielfältigen Optionen zur Erweiterung von React.

React fokussiert sich auf den View-Layer in Webapplikationen und wird als Basis zur Erstellung von User Interfaces mit Komponenten genutzt. Oft wird React nachgesagt, dass es alleine ausreichend sei, um Webanwendungen zu erstellen. Wie ich in meinem eigenen Buch „The Road to Learn React“ [1] zeige, kann dies wirklich so umgesetzt werden. Vor allem um React zu erlernen, ist es von Vorteil, sich nur auf React zu konzentrieren, aber auch in kleineren Anwendungen kann es vollkommen ausreichend sein, nur React zu benutzen. Wenn es aber um die Implementierung einer größeren und komplexeren Anwendung geht, braucht man doch noch ein paar weitere Bibliotheken rund um React.

Entwickler, die zuvor mit Frameworks wie Angular oder Ember gearbeitet haben, tun sich oft schwer damit, die nötigen Bibliotheken zu identifizieren, die für eine technisch ausgefeilte Webanwendung auf Basis von React notwendig sind. Wer vorher mit einem Framework gearbeitet hat, ist daran gewöhnt, dass alle Funktionen unmittelbar verfügbar sind. Daran zeigt sich, dass React einfach nur eine Bibliothek für den View-Layer ist. Demnach muss man sich selbst um alle anderen Bibliotheken kümmern. Das ist aber auch einer der zentralen Vorteile von React. Es ermöglicht eine flexible Auswahl der weiteren Bibliotheken, die man seiner Anwendung hinzufügt. Man selbst bleibt aber unabhängig von einem Framework.

React mit seinem Ökosystem ist eine Art flexibles Framework. Man selbst sucht Bibliotheken aus, die zum Kern der Anwendung hinzugefügt werden können. Der folgende Artikel stellt eine subjektive Auswahl dieser Bibliotheken in verschiedenen Themenbereichen vor, die nützlich für kleinere, aber auch komplexe React-Anwendungen sind. Natürlich muss am Ende jeder selbst seine Wahl treffen und das passende Set an Bibliotheken für seine Zwecke zusammenstellen. Die hier vorgestellte Auswahl soll vor allem Einsteigern ins React-Ökosystem einen Überblick über die verschiedenen Optionen geben.

Die Wahl des richtigen Starter-Projekts

Die Entscheidung für das richtige Starter-Projekt, auch Boilerplate-Projekt genannt, für eine React-Anwendung fällt vielen Entwicklern schwer. In der modernen Webentwicklung hört man schnell von Tools wie Babel und webpack. Etliche Boilerplate-Projekte für React stehen online zur Auswahl, und jedes davon ist auf einen bestimmten Anwendungsfall zugeschnitten und benutzt verschiedenste Konfigurationen beispielsweise für Babel und webpack. Die Auswahl reicht von minimalistischen Ansätzen bis hin zu beinahe schon überladenen Projekten. Letztere machen leider die Mehrheit der online auffindbaren Projekte aus, zu Ungunsten von Neuankömmlingen im React-Ökosystem.

Im Folgenden möchte ich auf das Boilerplate-Projekt Create React App [2] eingehen, das ein weithin akzeptierter Communitystandard ist. Es handelt sich um ein konfigurationsfreies Starter-Projekt, mit dem eine minimalistische lauffähige React-Anwendung out of the box erstellt werden kann. Dabei bleibt der Nutzer erst einmal verschont von Tools wie Babel und webpack. Auch im Nachhinein kann das zugrunde liegende Toolset über eine sogenannte eject-Funktionalität angepasst werden. Demzufolge ist Create React App das Go-To-Projekt für React-Neuankömmlinge, weil es möglich ist, sich hierbei ausschließlich auf React zu konzentrieren.

Eine ähnliche Lösung wie Create React App stellt Next.js [3] dar. Auch dabei handelt es sich um ein konfigurationsfreies Boilerplate-Projekt für React, allerdings für serverseitig gerenderte Anwendungen. Gatsby ist eine weitere Alternative und eine großartige Wahl für statische Websites (z. B. Blogs) mit React.

Wer ein individuelles Boilerplate-Projekt für den eigenen Zweck einsetzen will, sollte zuerst die eigenen Anforderungen an die Anwendung eingrenzen. Ein Boilerplate-Projekt sollte so minimalistisch wie möglich sein und nicht zu viele Aufgaben auf einmal erfüllen. Die Wahl eines Projekts, das es schon online gibt, oder das Erstellen eines eigenen Projekts sollte auf die spezifischen Anforderungen zugeschnitten sein.

Empfehlungen für Projekt-Boilerplates

  • Create React App

  • Gatsby [4] für statische Websites in React

  • Next.js für serverseitig gerendertes React

  • Bei guten React-Kenntnissen: eigene minimalistische Boilerplate erstellen

  • Ansonsten: Anforderungen definieren, minimalistische Lösung finden

Utility-Bibliotheken für React

JavaScript bringt ab ES6 unzählige eingebaute Funktionen für die Arbeit mit Arrays, Objekten, Integern und Strings mit. In React ist die Methode map() für Arrays [5] eine der am häufigsten genutzten Standardfunktionen von JavaScript. Warum? Weil in Komponenten oft eine Liste von Dingen gerendert werden muss. Und da JSX eine Mischung aus HTML und JavaScript ist, kann man JavaScript nutzen, um über diese Liste mit map() zu iterieren, um jeden einzelnen Wert als Element in JSX zurückzugeben.

const List = ({ list }) => <div> {list.map(item => <div key={item.id}>{item.title}</div>)} </div>

Falls die JavaScript-Funktionen komplexer werden sollten, bietet sich eine Utility-Bibliothek an. Persönlich würde ich dafür zwei Bibliotheken empfehlen, die exklusiv verwendet werden sollten.

Meine erste Empfehlung ist Lodash [6], der Nachfolger von Underscore und die am weitesten verbreitete Utility-Bibliothek für JavaScript. Lodash ermöglicht es, Arrays zu sortieren, zu filtern oder zu gruppieren, aber auch mehrere Funktionen miteinander zu verketten oder zusammenzustellen. Der Funktionsumfang geht weit über die angebotenen Funktionen von nativem JavaScript für Arrays und Objekte hinaus.

Mein zweiter Tipp ist Ramda [7]. Wer in die Richtung der funktionalen Programmierung (FP) in JavaScript gehen möchte, kommt nicht an dieser Utility-Bibliothek vorbei. Obwohl Lodash ein eigenes Derivat für die funktionale Programmierung besitzt (Lodash FP [8]), würde ich bei funktionaler Programmierung eher zu Ramda tendieren. In dieser Bibliothek steht das FP einfach im Vordergrund.

Wenn man eine Utility Libary zu seiner React-Applikation hinzufügen will, kann man also Lodash oder Ramda nehmen. Lodash ist dabei eine eher bodenständige Bibliothek für jeden JavaScript-Entwickler, während Ramda mit einem starken Fokus auf die funktionale Programmierung daher kommt.

Empfehlungen für Utility Libraries

  • JavaScript ES6 und höher

  • Lodash

  • Ramda für funktionale Programmierung

Styles in Re...

Neugierig geworden? Wir haben diese Angebote für dich:

Angebote für Gewinner-Teams

Wir bieten Lizenz-Lösungen für Teams jeder Größe: Finden Sie heraus, welche Lösung am besten zu Ihnen passt.

Das Library-Modell:
IP-Zugang

Das Company-Modell:
Domain-Zugang