Lassen Sie uns einige großartige Tools diskutieren, mit denen React-Entwickler produktiver arbeiten und die Qualität ihrer Arbeit verbessern können.
Wenn ich ein neues Projekt starte, verwende ich normalerweise meine eigene Vorlage für die Tools, die ich dieser Liste hinzugefügt habe. Ich arbeite auch mit anderen Tools wie Material UI. Ich habe sie studiert, mit ihrer Hilfe mehrere Anwendungen erstellt und einige kleine Projekte implementiert. Danach habe ich beschlossen, die Ergebnisse zu teilen.
Schauen wir uns also die endgültige Liste an.
ESLint
ESLint hat für jeden JavaScript-Entwickler, einschließlich React-Fans, eine Menge zu ändern. Der Dienst bietet intelligente Algorithmen, die den Code schnell analysieren und nach möglichen Fehlern suchen.
Darüber hinaus können Sie gefundene Probleme automatisch beheben, ohne die Syntax zu ändern.
Zu Beginn würde ich empfehlen, die von den Entwicklern von Airbnb vorgeschlagene Konfiguration zu verwenden. Es beinhaltet:
- Integrierte Unterstützung für die React-Bibliothek (z. B. Unterstützung für Regeln zur Verwendung von Hooks).
- Konzentrieren Sie sich auf Best Practices.
ESLint ist ein Muss für jedes Projekt, und die Airbnb-Konfiguration ist einer meiner Favoriten. Ich habe etwas hinzugefügt, aber 90% bleiben von der ursprünglichen Konfiguration übrig.
Bit
Bit bietet etwas, was React-Entwickler als Kollaborationsplattform benötigen. Es ermöglicht Teams, an einzelnen Komponenten zusammenzuarbeiten.
Es ist ein Befehlszeilenprogramm, mit dem Sie wiederverwendbaren Code schreiben können. Bit ist vollständig Open Source und dies ist einer der Gründe für seine Beliebtheit.
Die meisten Funktionen beziehen sich auf die Erstellung atomarer Komponenten, sodass sie problemlos mit anderen Entwicklern geteilt werden können. Darüber hinaus besteht die Möglichkeit, die Abhängigkeiten von Komponenten zu überprüfen und sie getrennt vom Hauptprojekt zu testen.
React App erstellen
Als React-Entwickler wissen Sie sehr gut, wie lange es dauert, ein neues Projekt zu starten. Um Zeit zu sparen, schlugen Facebook-Entwickler die Create React App vor .
Dies ist ein erster "Builder", mit dem Sie sich auf die Entwicklung und nicht auf das Anpassen von React konzentrieren können. Alles was Sie tun müssen, ist den Befehl npx create-react-app my-app auszuführen. Dann haben Sie eine vollständig konfigurierte Anwendung für das Projekt.
Die Create React App erhöht Ihre Effizienz erheblich, wenn Sie als React-Freiberufler für mehrere Kunden gleichzeitig arbeiten.
Reagiere auf Kosmos
React Cosmos ist eine Entwicklerumgebung, mit der skalierbare, qualitativ hochwertige Benutzeroberflächen erstellt werden können.
Der Service ermöglicht das einfache Prototyping und Testen einzelner Schnittstellenkomponenten. Darüber hinaus können Sie damit iterieren, ohne befürchten zu müssen, dass Ihr Code beschädigt wird. Es erleichtert den Debugging-Prozess, indem die Komponenten isoliert werden.
React Cosmos eignet sich am besten für die Arbeit mit Unternehmensanwendungen. Durch die Aufteilung eines Projekts in kleine, wiederverwendbare Komponenten kann Qualitätscode geschrieben werden, der einfach zu warten ist.
React Toolbox
Am Anfang dieses Artikels habe ich erwähnt, dass ich für die meisten Projekte die Material-Benutzeroberfläche verwende. Dafür gibt es einen Grund: Ich liebe Material Design und Material UI passt genau zu mir.
Es gibt aber auch Alternativen. Eine davon ist React Toolbox . Dies ist eine Sammlung häufig verwendeter Komponenten, die mit Material Design entwickelt wurden. Es verwendet CSS-Module für mehr Flexibilität.
Zum Zeitpunkt dieses Schreibens enthält die React Toolbox 28 Komponenten. Einige davon sind Application Drawer, Date Picker, Switcher und Snack Bar.
Reagiere auf Bootstrap
Mobile-freundliche Website ist ein moderner Standard. Benutzer erwarten, dass Ihre Site auf jedem Gerät eine gute Leistung erbringt. Websites mit reaktionsschnellem Design zeichnen sogar Suchmaschinen aus.
Viele Entwickler verwenden Bootstrap, um reaktionsschnelle, skalierbare Websites mit professionellem Design zu erstellen. Das Problem ist, dass Bootstrap mit nativen Komponenten geliefert wird, die nicht in React integriert sind.
Die Lösung ist das Open Source React Bootstrap- Paket . Alle Bootstrap-Komponenten wurden speziell für React-Entwickler geändert.
Slingshot reagieren
Möchten Sie die Entwicklung Ihrer React-App beschleunigen? Versuchen Sie, React Slingshot zu bewerten . Es ist eine Vorlage, die React, Redux und Babel kombiniert.
Das wichtigste Merkmal von Slingshot, das es von anderen Tools unterscheidet, ist sein schnelles Feedback. Diese Funktion automatisiert den Flusen-, Unit-Test- und Hot-Reload-Prozess bei jeder Aktualisierung der Anwendung. Auf diese Weise können Sie sich auf Geschäftslogik konzentrieren und nicht auf fremde Aufgaben.
Reaktid
Man sagt, ein Entwickler sei so gut wie sein Redakteur. Vielleicht stimmt das nicht ganz, aber der Herausgeber ist sehr hilfreich bei unserer Arbeit. Persönlich bin ich ein großer Fan von JetBrains und WebStorm. Meine Wahl ist IDE, aber ich versuche von Zeit zu Zeit Alternativen.
Zum Beispiel fand ich, dass Reactide eine IDE für React ist. Ich war sehr überrascht von diesem Fund und habe das Tool ausprobiert.
Es stellte sich heraus, dass es interessante Funktionen hat. Beispielsweise können Sie die Komponenten Ihres Projekts direkt in der IDE rendern. Es gibt auch einen eingebauten Node.js-Server, der in den Browsersimulator integriert ist.
Ein interessantes Tool, obwohl ich nicht glaube, dass ich komplett darauf umsteigen werde. Dies ist jedoch eine gute Option für diejenigen, die mit React arbeiten oder es lernen und auch während der Konfigurationsphase nicht auf Probleme stoßen möchten.
React Testing Library
"Tests zuerst!" - was ich ständig wiederhole.
Mit anderen Worten, es ist wichtig, über eine Reihe von Testwerkzeugen zu verfügen. Die React Testing Library ist eine kleine Bibliothek. Damit können Sie Ihren React-Code ohne allzu große Probleme testen Die Bibliothek ist einfach zu bedienen und erweitert Standardbibliotheken wie React-Dom und React-Dom / Test-Utils um Funktionen.
Dank der hervorragenden Dokumentation mit einigen guten Beispielen können Sie schnell loslegen.
Märchenbuch
Storybook bietet eine interaktive Entwicklungsumgebung, in der Sie neue Komponenten erstellen, testen oder vorhandene Komponenten aus einer Bibliothek auswählen können.
Storybook ist flexibel genug, um mit allen gängigen JavaScript-Frameworks zu arbeiten. Zum Beispiel React, Vue.js, Angular, Svelte, Marko und sogar rohes HTML.
Das Beste an Storybook ist, dass es verschiedene Add-Ons enthält. Hier sind einige Ergänzungen, die ich interessant finde:
- Google Analytics (fügt Google Analytics-Unterstützung für Komponenten hinzu);
- Scherz ;
- Storyshots (Überprüfen von Komponenten mithilfe von Snapshots);
- Ansichtsfenster (Ändern des Markups für reaktionsfähige Komponenten)
Ich hoffe, Sie werden diese Liste zu schätzen wissen. Wenn Sie andere coole Tools verwenden, die im Text nicht erwähnt werden, schreiben Sie darüber in den Kommentaren!