Coding

13 min des Lesens

20 React Development Tools, die du kennen musst

Geschrieben von

Talent Garden

Don't you want to read? Try listening to the article in audio mode 🎧

React ist derzeit in aller Developers-Munde. Doch bevor wir einen Blick auf die 20 wichtigsten Tools 2019 werfen, hier nochmal ein kurzer Überblick, was React denn überhaupt ist.

React? React!

React ist eine kompakte JavaScript-Bibliothek, die ursprünglich von Facebook erstellt wurde und deren Beliebtheit in den letzten Jahren stetig gewachsen ist. Vereinfacht ausgedrückt, ermöglicht es die Erstellung von schönen Benutzeroberflächen durch die Bereitstellung von isolierten und wiederverwendbaren Bausteinen, die als Komponenten bezeichnet werden. React verfügt mittlerweile über ein riesiges Ökosystem, das hauptsächlich von Drittentwicklern erstellt wurde. Es umfasst verschiedenste Tools, Komponentenbibliotheken, IDEs, Erweiterungen für Code-Editoren und Webbrowser, Boilerplates und noch vieles mehr. Wer sich vor der Lektüre der wichtigsten Tools einmal generell mit der Programmiersprache JavaScript auseinandersetzen möchte, dem empfehlen wir unseren definitiven Leitfaden für Javascript: die wichtigste Programmiersprache. Die Frage wie du am besten deine Karriere als Frontend Developer starten kannst, haben wir auch schon in einem eigenen Artikel beantwortet. So zurück zum Thema: In diesem Artikel erwarten dich die 20 besten Tools und Ressourcen sowohl für Anfänger als auch erfahrene React-Entwickler. Das Weiterlesen lohnt sich also - let the countdown begin!

Alles, was dein React-Projekt wirklich braucht

20 | React-Bootstrap

Bootstrap ist derzeit das beliebteste Frontend-Framework. Dank der React-Bootstrap-Komponentenbibliothek kannst du es auch weiterhin mit React verwenden. Das Tool liefert Komponenten für das gesamte Bootstrap-Framework, sodass React-Apps mit dem bekannten Erscheinungsbild von Bootstraps erstellt werden können. Derzeit existieren Komponenten für Bootstrap 3, aber es wird bereits aktiv an der Unterstützung von Bootstrap 4 gearbeitet.

19 | Atom React Plugin

Als Atom-User kannst du mithilfe des Atom React-Plugins deine React-Entwicklung auf die nächste Stufe heben. Es fügt dem Atom-Editor einen JSX-Syntax-Textmarker, automatische Einrückung und Code-Faltung hinzu, damit der Code schneller und mit weniger Fehlern geschrieben werden kann. Es enthält auch React Code-Snippets und einen HTML-zu-JSX-Konverter, mit dem du deine alten HTML-Dateien nach JSX portieren kannst.

18 | React Boilerplate

Diese 22K-Startbibliothek ist ein hoch skalierbares Offline-First-React-Setup, bei dem Entwicklererfahrung und Anwendungsleistung im Vordergrund stehen. Seine DX-Ausrichtung zeigt sich beispielsweise darin, dass deine gespeicherten Änderungen an CSS und JS übernommen werden, ohne dass die Seite aktualisiert werden muss. Es automatisiert sogar die Erstellung von Komponenten, Containern, Routen, Selektoren und Sagen - und deren Tests - direkt über die CLI.

17 | Atellier

Atellier ist eine React-Komponente, mit der du auf einfache Weise mit jeglicher Komponentenbibliothek interagieren kannst. Die Github-Community bezeichnet es als den intelligentesten Weg, interaktive Komponenten mit anderen Teammitgliedern zu teilen. Es eignet sich besonders gut zur Visualisierung der erstellten bzw. verwendeten Komponenten.

16 | React Studio

Hier haben wir genau das Richtige für Screen-Designer. React Studio ist ein großartiges Tool, um React-Apps, ohne jegliche Programmierkenntnisse zu erstellen. Dabei erlaubt dieses visuelle Designertool die Erstellung von React-Komponenten und App-Flows, basierend auf den vorhandenen Designs. In React Studio sind außerdem Zeichentools und ein mobiler Viewer integriert, mit denen sogar Sketch-Dateien importiert werden können.

15 | Razzle

Mit diesem Tool können servergerenderte universelle JavaScript-Anwendungen mit sehr wenig Konfigurationsaufwand erstellt werden. Razzle fasst die für SSR erforderliche komplexe Konfiguration in einer einzigen Abhängigkeit zusammen, sodass du die Möglichkeit hast, eine App zu erstellen, zu reagieren und den Rest der Architekturentscheidungen deiner App zu überlassen. Razzle funktioniert mit React, aber auch mit Reason, Elm, Vue und Angular. Es bietet Universal Hot Module Replacement, ES6-Unterstützung, CSS-Setup von CRA und funktioniert mit vielen Tools. Versuch es einfach!

14 | Grommet

Grommet ist ein auf React basierendes Framework, das Zugänglichkeit, Modularität, Reaktionsfähigkeit und Theming in einem übersichtlichen Paket anbietet. Auf Github wird es vor allem wegen seiner besonders schönen React-UI-Komponenten gefeiert. Diese bestechen durch ihr schlichtes aber zeitlos elegantes Design.

13 | React Styleguidist

Dieses Tool bietet eine interaktive Umgebung für die Entwicklung isolierter React-Komponenten. Dank Styleguidist können sich Entwickler darauf konzentrieren, jeweils eine Komponente zu erstellen, alle Varianten anzuzeigen und mit Hot-Reload schneller zu arbeiten. Infolgedessen kann ein Team mehrere Komponenten auf einfache Weise gemeinsam nutzen und zur besseren Übersicht an einem Ort aufbewahren. Die Tools arbeiten mit der sofort einsatzbereiten Create React App und unterstützen ES6, Flow und TypeScript.

12 | Storybook

Storybook ist eine UI-Entwicklungsumgebung für React-Komponenten, die in der Produktion von Unternehmen wie Coursera, Squarespace und Lonely Planet verwendet wird. Seine Hauptfunktionalität liegt darin einzelne Komponenten interaktiv zu entwickeln und zu testen. Mit Storybook lassen sich die verschiedenen Zustände der einzelnen Komponenten anzeigen und unabhängig von deiner App entwickeln, was zu einer besseren Wiederverwendbarkeit führt.

11 | React Toolbox

Die React Toolbox ist eine Sammlung von React-Komponenten, die nach den Grundsätzen von Googles Material Design erstellt wurden. Die Komponenten nutzen fortschrittliche Frontend-Technologien wie CSS-Module, Webpack und ES6. Aus diesem Grund können die einzelnen Komponenten der React Toolbox problemlos zum Webpack-Workflow hinzugefügt werden. React Toolbox bietet auch einen Online-Spielplatz, auf dem du überprüfen kannst, wie deine Komponenten live aussehen.

10 | Hooks!

Mit dieser Option können benutzerdefinierte Hooks erstellt werden, um Zustände in Funktionskomponenten zu verwalten. Es ermöglicht darüber hinaus Tools wie Bit zu verwenden, um eine wiederverwendbare Hooks-Sammlung einfach freizugeben und sie in deinen Apps zu laden. Die Entwicklung von Komponenten wird so beschleunigt und der gesamte Prozess vereinfacht.

9 | Enzyme

Enzyme ist ein JavaScript-Testprogramm für React by Airbnb. Laut den Entwicklern hilft Enzyme bei der Verwaltung aller React Komponenten, indem es das Durchlaufen, Manipulieren und Durchsetzen erleichtert. Außerdem ahmt die API von Enzyme die APIs von jQuery für die DOM-Überquerung und -Manipulation nach. Dadurch wirkt dieses Tool sehr flexibel und intuitiv. Enzyme ist mit allen gängigen Assertion-Bibliotheken kompatibel.

8 | React Cosmos

Wenn du nach multifunktionalen React-Entwicklungstools suchst, dann gehört React Cosmos definitiv auf deine Liste. Das Hauptziel dieses Tools ist es, Entwicklern bei der Erstellung wiederverwendbarer Komponenten zu helfen. Es durchsucht jedes React-Projekt nach Komponenten und kann diese mit einer beliebigen Kombination aus Requisiten, Kontext und Status rendern. Mit React Cosmos lassen sich ebenfalls externe Abhängigkeiten wie API-Antworten oder localStorage nachahmen, sodass du in Echtzeit den Status deiner App verfolgen kannst. Das Tool wird laufend von einer aktiven Developer-Community vorangetrieben und bietet somit in jedem Update neue nützliche Features und Fixes.

7 | Reactide

Reactide ist eine dedizierte IDE (integrierte Entwicklungsumgebung) für die Entwicklung von React-Anwendungen. Es ist ein plattformübergreifendes Tool, mit dem React-Komponenten ohne Build- oder Serverkonfiguration gerendert werden können. Reactide führt einen integrierten Nodeserver und einen benutzerdefinierten Browsersimulator aus. Es ermöglicht auch die Visualisierung des Zustandsflusses. Noch praktischer geht es fast nicht mehr.

6 | React Developer Tools for Chrome

React Developer Tools ist eine Erweiterung von Google Chrome, die vom Facebook-Team selbst erstellt wurde. Hier kannst du die Hierarchie der React-Komponenten, einschließlich der Requisiten und des Status der Komponenten direkt in Chrome anzeigen. Die Erweiterung fügt den Chrome DevTools eine neue Registerkarte mit dem Namen "React" hinzu. Es zeigt wie sich die Änderungen einer Komponente auf andere Komponenten auswirkt und erlaubt es so eine ordnungsgemäße Komponentenstruktur zu entwerfen.

5 | Bit

React Bits ist eine voll gepackte Bibliothek für ReactJS-Entwickler, die Techniken, Tricks, Tipps, Muster und andere nützliche Daten enthält. Es dient als umfassender Online-Leitfaden für Anfänger und erfahrene React-Entwickler. ReactJS wächst rasend schnell. Doch dieses JS Development Framework kann als Open-Source-Technologie mit einer riesigen Userbase ohne Zweifel als vertrauenswürdig eingestuft werden. Für Teams: Alle Komponenten, die ein Team freigegeben hat, sind sofort verfügbar und können in der bit.dev-Komponenten-Cloud gefunden und ausgewählt werden. Komponenten können dabei in Sammlungen organisiert, nach Parametern wie Bündelgröße und Abhängigkeiten durchsucht und gerenderte Beispiele schnell angezeigt werden.

4 | Redux

Redux ist ein vorhersehbarer Statuscontainer für JavaScript-Apps. Mit Redux kann der Status jeder Anwendung auf einfache Art und Weise verwaltet werden. Der besondere Reiz dieses Tools liegt darin, dass die Benutzeroberfläche als Funktion des Status beschreibbar ist und Redux Statusaktualisierungen somit als Reaktion auf Aktionen ausgibt. Generell empfiehlt sich die Verwendung von Redux, wenn sich im Laufe der Zeit eine angemessene Datenmenge ändert, du eine einzige Informationsquelle benötigst und feststellst, dass Ansätze wie das Beibehalten des Status einer React-Komponente auf oberster Ebene nicht mehr ausreichen.

3 | React Context API

Context bietet die Möglichkeit, Daten durch den Komponentenbaum zu leiten, ohne dass Requisiten auf jeder Ebene manuell übergeben werden müssen und die Arbeitsersparnis ist enorm. In einer typischen React-Anwendung werden Daten über Requisiten von oben nach unten (übergeordnet zu untergeordnet) weitergegeben. Dies kann jedoch für bestimmte Arten von Requisiten (z. B. Gebietsschema, UI-Thema), die von vielen Komponenten in einer Anwendung benötigt werden, umständlich sein. Mit Context können jetzt Werte wie diese zwischen Komponenten ausgetauscht werden, ohne explizit eine Requisite durch jede Ebene des Baums führen zu müssen.

2 | Gatsby

Gatsby ist ein Site-Generator für React, mit einem umfassenden Daten-Plugin-Ökosystem. Auf diese Weise lassen sich Daten aus verschiedenen Quellen (einer oder mehreren) zum Erstellen deiner Websites verwenden. Beispielsweise ist es möglich Daten von Saas-Diensten, CMSs, Datenbanken, APIs oder deinem Dateisystem abzurufen. Die vorab erstellten Webseiten werden in eine globale Server-Cloud verschoben und sind so in kürzester Zeit für jeden Benutzer einsatzbereit.

1 | Facebook’s Create React App

Es dauert einige Zeit, um eine Umgebung für ein neues React-Projekt mit allen Anforderungen einzurichten. Um Entwicklern zu helfen, hat Facebook sein Projekt "Create React App" auf Github veröffentlicht. Es handelt sich um ein einziges Befehlszeilentool, das eine neue React-App in Rekordzeit zum Laufen bringt. Es bietet eine Frontend-Build-Pipeline, richtet eine Entwicklerumgebung ein und optimiert die React-App für die Produktion. Es funktioniert ohne Konfiguration und kann mit jeder Backend-Sprache verwendet werden.

In wenigen Wochen vom Amateur-Coder zum Code Master

Das intensive CodeMaster Online Bootcamp der Talent Garden Innovation School ermöglicht dir das Erlernen und die Nutzung der aktuellsten Coding-Tools, die der Markt zu bieten hat. Da es beim Programmieren nur um das Anwenden und Üben geht, konzentriert sich der Kurs auf praktische Arbeitssitzungen, in denen du verschiedene, echte Projekte entwickeln wirst. Das so erstellte Portfolio wird potenziellen Arbeitgebern, Partnern und Kunden dein Fachwissen demonstrieren und dir einen entsprechenden Vorsprung auf deinem Karriereweg verschaffen.

Artikel aktualisiert am: 09 August 2023