7 erstklassige Tools für React-Entwickler

Facebooks JavaScript-UI-Bibliothek hat ein Ökosystem von Begleitwerkzeugen und Frameworks geschaffen. [...]

Die von Facebook entwickelte React JavaScript-Bibliothek, eine deklarative, komponentenbasierte Technologie zur Erstellung von Web-UIs, hat in den letzten Jahren bei Entwicklern an Attraktivität gewonnen.

React-aka React.js wurde erstmals im Mai 2013 der Öffentlichkeit vorgestellt und bietet Entwicklern hohe Effizienz und Flexibilität. Seitdem wurde die Open-Source-Bibliothek mehr als 135.000 Mal auf GitHub gestartet und mehr als 25.000 Mal geforkt.

Es ist nicht überraschend, dass um React herum ein Ökosystem von Begleitwerkzeugen entstanden ist, einschließlich einer IDE und einer Reihe von Frameworks. Hier sind 7 wichtige Werkzeuge für Entwickler, die bei der Erstellung ihrer Webanwendungen auf React zurückgreifen wollen.

React Sight

React Sight ist eine Erweiterung des Chrome-Browsers, die eine Live-Ansicht des Komponenten-Hierarchiebaums einer React-Anwendung bietet. Sie unterstützt React Router und Redux. React Sight sucht nach React-Renderern und patcht den Renderer, um Daten über Zustandsänderungen zu sammeln. Die Entwickler von React Sight haben das Tool entwickelt, weil sie den Bedarf für ein Tool sahen, das eine visuelle Darstellung der Struktur einer Anwendung ermöglicht. Da React Sight einfach zu bedienen sein soll, enthält es Filter, die es Ihnen ermöglichen, nur die Komponenten anzuzeigen, die Sie sehen möchten.

Sie können React Sight über den Chrome-Webshop installieren.

React Developer Tools

Vom React-Team bei Facebook ermöglicht das React Developer Tools die Inspektion des React-Baums einschließlich der Komponentenhierarchie und des Status. React Developer Tools 4 wurde im August 2019 veröffentlicht und ist für Chrome, Firefox und (Chrom-)Edge verfügbar. Facebook hat in der neuen Version erhebliche Performancesteigerungen und eine verbesserte Navigation versprochen. Die Funktionen umfassen:

Volle Unterstützung für React Hooks, die es Ihnen ermöglichen, State und andere React-Funktionen zu nutzen, ohne eine Klasse zu schreiben. Es wird auch Unterstützung für die Inspektion verschachtelter Objekte angeboten.

Ein Mechanismus zum Filtern von Komponenten im Baum, so dass es einfacher ist, auch durch tief verschachtelte Hierarchien zu navigieren. Host-Knoten wie HTML <div> sind standardmäßig ausgeblendet, aber der Filter kann deaktiviert werden.

7 häufige IT-Fehler, die den Grundstein für zukünftigen Erfolg legen können

React Developer Tools ist als Browser-Erweiterung für Chrome und Firefox verfügbar. Es kann auch über NPM mit Hilfe der eigenständigen Shell installiert werden:

npm installieren -g react-devtools@^4

Reactide

Reactide ist eine dedizierte IDE für die Web-Entwicklung mit React. Mit einem integrierten Node.js-Server und einem benutzerdefinierten Browsersimulator müssen sich die Benutzer von Reactide nicht mit der Konfiguration von Servern oder der Erstellung von Tools herumschlagen. Sie müssen auch nicht zwischen dem Browser, der IDE und dem Server hin- und herwechseln. Mit einer Live-Nachladefunktion können Entwickler Änderungen direkt in der Entwicklungsumgebung verfolgen. Weitere Funktionen sind:

• Ein visueller Komponentenbaum zur Verwaltung des Status einer Anwendung.
• Ein integriertes Terminal zur Ausführung von Befehlen in bash für Unix und cmd für Windows.
• Sofort einsatzbereites Nachladen von Modulen.

Sie können Reactide von der Projekt-Website herunterladen. Reactide ist für MacOS, Windows und Debian oder Ubuntu Linux verfügbar.

Redux

Als vorhersehbarer Zustandscontainer für JavaScript-Anwendungen hilft Redux Entwicklern beim Schreiben von Anwendungen, die in verschiedenen Umgebungen, einschließlich Web-Client, Web-Server und nativen Anwendungen, konsistent ausgeführt werden. Redux arbeitet mit React und jeder anderen Ansichtsbibliothek. Einschließlich der Abhängigkeiten ist Redux 2 KB groß und greift auf ein Ökosystem von Add-Ons zurück. Zu den Eigenschaften von Redux gehören:

• Zentralisierung von Anwendungsstatus und -logik, Ermöglichung von Funktionen wie Do/Redo und Zustandspersistenz.
• Nachverfolgung, wann, warum, wo und wie sich ein Anwendungsstatus geändert hat.
• „Zeitreise-Debugging“, das Fehlerberichte an einen Server senden kann.

Sie können Redux über NPM installieren:

npm install -save redux

Next.js

Next.js wird als „React-Framework fürs Unternehmen“ bezeichnet und bietet Funktionen wie serverseitiges Rendering, datei-systembasiertes Routing und den Export statischer Sites. Das Framework ist für kleinere Builds und eine schnellere Kompilierung optimiert. Entwickler können den Webpack-Modul-Bundler und den Babel-JavaScript-Compiler verwenden. Next.js 9 wurde im Juli 2019 veröffentlicht und bietet die folgenden Funktionen:

• Dateisystembasiertes dynamisches Routing für Anwendungen.
• Zero-Config TypeScript-Unterstützung.
• API-Routen für die Erstellung von Back-End-Anwendungsendpunkten bei gleichzeitiger Nutzung von Hot-Reload und einer einheitlichen Build-Pipeline.

Anweisungen für die Einrichtung von Next.js finden Sie auf GitHub.

Warum datengesteuerte Unternehmen einen Datenkatalog brauchen

Evergreen

Evergreen ist ein React-UI-Framework für die Erstellung von Webanwendungen auf „Unternehmensebene“. Es kombiniert eine Reihe von zusammensetzbaren React-Komponenten, die auf den React-UI-Primitiven aufbauen, mit einer eigenen UI-Designsprache. Das Framework basiert auf dem Prinzip, dass zukünftige Anforderungen nie vorhergesagt, sondern nur vorbereitet werden können. Die meisten Komponenten sind auf einem Box-Primitiv implementiert, das eine Anpassung ermöglicht. Evergreen fördert die Entwicklung von Systemen, die neue Anforderungen vorwegnehmen.

Sie können Evergreen von GitHub herunterladen.

Craft.js

Craft.js ist ein React-Framework für den Aufbau erweiterbarer Drag-and-Drop-Seiteneditoren. Seiteneditoren ermöglichen eine hervorragende Benutzererfahrung, aber laut den Entwicklern hinter Craft.js kann der Aufbau eines solchen Editors eine „schreckliche“ Erfahrung sein. Craft.js wurde entwickelt, um diesen Prozess zu erleichtern.

Craft.js modularisiert die Bausteine eines Seiteneditors, fügt ein Drag-and-Drop-System hinzu und regelt, wie Benutzerkomponenten gerendert, verschoben und aktualisiert werden. Entwickler entwerfen den Editor auf dieselbe Weise wie jede andere Frontend-Anwendung in React und haben genaue Kontrolle über das genaue Verhalten und Aussehen des Seiteneditors. Es wird eine API zur Verfügung gestellt, um den Zustand des Editors zu erhalten und zu bearbeiten.

Sie können Craft.js von GitHub herunterladen.

*Paul Krill ist Redakteur bei InfoWorld, dessen Tätigkeit sich auf die Anwendungsentwicklung konzentriert.