6 Best Practices für die Entwicklung skalierbarer React-Projekte

Wenn Sie mit der Arbeit an einem neuen React-Projekt beginnen, wird empfohlen, Anweisungen zu formulieren, die Sie befolgen können, um eine gut skalierbare Anwendung zu erstellen. In diesem Beitrag möchte ich das Wissen teilen, das ich über die React-Entwicklung im Laufe der Jahre mit dieser Bibliothek gewonnen habe. Sie helfen Ihnen dabei, Ihren eigenen React-Verhaltenskodex zu erstellen.

1. Verteilen Sie Daten rational zwischen dem lokalen und dem globalen Anwendungsstatus

React ist eine Bibliothek, die für die Verwaltung der Benutzeroberfläche basierend auf dem aktuellen Status der Anwendung verantwortlich ist. Die Aufgabe des Programmierers ist es, die Arbeit mit dem Staat rational zu organisieren. Einige Entwickler bevorzugen es, alle ihnen zur Verfügung stehenden Daten im Redux-Repository zu speichern. Dadurch können sie die zentrale Verarbeitung aller Anwendungsdaten organisieren.



Wenn Sie jedoch darüber nachdenken, welche Daten in den Status der Anwendung aufgenommen werden sollen, sollten Sie überlegen, ob Sie eine Aktion an das Statusverwaltungssystem übergeben müssen, um beispielsweise ein einfaches Dropdown-Menü zu öffnen. Gleiches gilt beispielsweise für die vom Benutzer in das Feedback-Formular eingegebenen Daten. Müssen alle Teile der Anwendung wissen, was in einem solchen Formular eingegeben wird? Wenn es darum geht, was in ein Formular eingegeben wird, werden solche Daten normalerweise von der Anwendung innerhalb eines relativ kurzen Zeitraums verarbeitet. Darüber hinaus werden sie nur von der Komponente verwendet, die für die Anzeige des Formulars auf dem Bildschirm verantwortlich ist.



Anstatt den Redux-Speicher zum Speichern aller Daten zu verwenden, mit denen die Anwendung arbeitet, ist es besser, einige Daten im lokalen Status der Komponenten zu speichern. Dadurch wird eine Überkomplikation der Anwendungsarchitektur vermieden.



Wenn Sie überlegen, wo genau Sie einige Daten speichern müssen, sollten Sie sich folgende Fragen stellen :

• Benötigen Sie Zugriff auf diese Daten in verschiedenen Teilen der Anwendung?
• Benötigen Sie die Fähigkeit, anhand dieser Daten etwas Neues zu bilden?
• Verwenden verschiedene Komponenten dieselben Daten?
• Ist es für Sie wertvoll, den Status der Anwendung, die diese Daten enthält, wiederherstellen zu können und sie in die Form zu bringen, in der sie sich zu einem bestimmten Zeitpunkt befand (dh möchten Sie mit der Möglichkeit debuggen, sich entlang des Codeausführungspfads in die entgegengesetzte Richtung zu bewegen)?
• Planen Sie, diese Daten zwischenzuspeichern (dh den vorhandenen Status zu verwenden, wenn die Anwendung ihn bereits hat, anstatt ihn neu zu laden)?
• Muss ich diese Daten behalten, wenn Komponenten im laufenden Betrieb neu geladen werden (während dieses Vorgangs kann der interne Status der Komponenten verloren gehen)?

Positive Antworten auf die obigen Fragen weisen darauf hin, dass die Daten außerhalb der Komponente verwendet werden. Dies bedeutet, dass es sinnvoll ist, sie im globalen Status der Anwendung zu speichern. Es sollte jedoch beachtet werden, dass Komponenten, die den lokalen Status verwenden, unabhängiger und vorhersehbarer sind.

2. Erfahren Sie, wie Sie Anwendungen testen und Ihre Projekte von Anfang an mit Tests ausstatten

Das Erstellen automatisierter Tests ist sehr wichtig. Tatsache ist, dass zu einem bestimmten Zeitpunkt in der Arbeit an einem React-Projekt das manuelle Testen viel Zeit und Ressourcen in Anspruch nimmt.



Zu Beginn eines Projekts, wenn seine Codebasis noch relativ klein ist, ist es sehr einfach zu entscheiden, dass Sie keine Tests dafür schreiben müssen. Wenn eine Anwendung fünf bis zehn Komponenten enthält, sieht das Erstellen automatisierter Tests wie eine fast sinnlose Routineaufgabe aus. Wenn ein Projekt jedoch auf mehr als 50 Komponenten anwächst und viele Komponenten höherer Ordnung enthält, kann das manuelle Testen einen ganzen Arbeitstag dauern. Und selbst bei diesem Ansatz können Fehler verbleiben, die niemand bemerken wird.



Darüber hinaus hilft das Schreiben von Tests dabei, die Struktur Ihres Codes zu verbessern, indem es in Module unterteilt wird. Auf diese Weise können Sie Fehler schneller finden und das Projekt vor Produktionsfehlern schützen. Der Punkt des automatisierten Testens besteht darin, dass ein wachsendes Projekt in einem Stadium entwickelt wird, in dem manuelle Tests nicht mehr bestätigen können, dass der Code ordnungsgemäß funktioniert.



Wenn Sie nicht die Gewohnheit haben, Tests zu erstellen, können Sie bei einem ziemlich großen Projekt diese nicht sofort schreiben. Deshalb müssen Sie von Anfang an mit dem Schreiben von Tests beginnen. Wenn Sie sich nicht sicher sind, wo Sie mit dem Testen Ihres Projekts beginnen sollen, beginnen Sie mit Integrationstests . Der wichtigste Punkt beim Testen ist, zu bestätigen, dass Ihre Komponenten korrekt miteinander interagieren.

3. Wenden Sie zusätzliche Tools an, die bei der Skalierung der Anwendung helfen

Normalerweise ist zu Beginn des Entwicklungsprozesses von React-Projekten keine große Anzahl von Hilfswerkzeugen erforderlich. Da es sich jedoch um Projekte handelt, die sehr umfangreich werden können, ist es erwähnenswert, dass spezielle Tools die Arbeit an ihnen erheblich erleichtern. Hier ist eine Beschreibung einiger von ihnen:

• Die Verwendung von Prettier und ESLint hilft Programmierern in einem Team, konsistenten Code zu schreiben. Diese Tools können dazu beitragen, die Syntax und andere Fehler in Ihrem Code zu reduzieren. Die Verwendung von Hilfsbibliotheken wie React Router , Date-Fns und React -Hook-Form kommt auch Projekten zugute .
• TypeScript Redux , , . , .
• - , React , .
• Mit Bit können Sie die Arbeit mit Komponenten organisieren, die als unabhängige Bausteine ​​einer Anwendung dargestellt werden. Dies bedeutet, dass Sie Komponenten isoliert testen und rendern können. Dieser Ansatz für die Arbeit mit Komponenten erleichtert deren Wartung und Wiederverwendung.
• Anstelle der App "create-react-app" können Sie die entsprechenden Next.js- Tools verwenden, um neue React-Anwendungen zu erstellen .

Mit diesen Tools können Sie eine große Codebasis für React-Anwendungen verwalten. Beachten Sie jedoch bei der Auswahl der Tools, dass jedes einzelne die Komplexität des Projekts erhöht. Bevor Sie etwas in Ihr Projekt aufnehmen, studieren Sie alles gut und treffen Sie eine fundierte Entscheidung.

4. Achten Sie auf die Struktur der Projektdatei

Einer der besten Tipps für die Entwicklung skalierbarer React-Apps ist, dass das Organisieren und kluge Benennen Ihrer Projektdateien die Dinge beschleunigen kann. Einige Entwickler oft als die Hauptdatei in den Ordnern , die in dem Verzeichnis gespeichert werden components, verwendet wird index.js.





Dateien verschiedener Komponenten werden gleich benannt.



Dieser Ansatz zum Organisieren eines Projekts erscheint durchaus sinnvoll, da beim Importieren einer Komponente in eine Datei die entsprechende Anweisung recht einfach ist:

import Button from '../components/Button';

Was aber, wenn Sie die Dateien solcher Komponenten in einem Editor öffnen?





Überall - nur index.js



Es wird unpraktisch sein, darin zu navigieren . Es ist nicht einfach zu bestimmen, zu welcher Komponente jede gehörtindex.js. Wenn Sie diese Dateien jedoch so umbenennen, dass sie mit den Komponentennamen übereinstimmen, sehen die Importanweisungen weniger attraktiv aus:

import Button from '../components/Button/Button';

Wie kann man in dieser Situation sein? Zum Beispiel kam mein Team zu der folgenden Lösung: Im Komponentenordner befindet sich eine Datei mit einem Code, dessen Name dem Komponentennamen entspricht, und daneben index.jsdiejenige, die die Komponente exportiert.





Komponentencodedatei und index.js, die die Komponente exportieren



Wir legen auch CSS- und Komponententestdateien im Komponentenverzeichnis ab. Bei diesem Ansatz enthält jedes Komponentenverzeichnis alles, was für die entsprechende Komponente relevant ist.





In sich geschlossene Komponente

5. Erstellen Sie eine Komponentenbibliothek

Beginnen Sie am besten früh in Ihrem Projekt mit dem Aufbau einer Komponentenbibliothek, anstatt darauf zu warten, dass sie wächst. Komponenten, die gerade bearbeitet werden, können als eigenständige Blöcke ausgeführt werden, die für die wiederholte Verwendung geeignet sind. Sie können mit Bit eine Komponentenbibliothek erstellen, indem Sie entweder die Ressource bit.dev verwenden oder das System zu Hause bereitstellen.

6. Trennen Sie die Logik der Komponenten mithilfe von Hooks von sich

Wenn Ihr Projekt wächst, stellen Sie möglicherweise fest, dass die Logik einiger Komponenten an verschiedenen Stellen immer wieder verwendet wird. Sie können proprietäre Hooks verwenden, um die gemeinsame Nutzung der Komponentenlogik zu organisieren.



Zum Beispiel haben wir eine Anwendung zum Berechnen von Punkten in einem Basketballspiel.





Anwendung für die Wertung in einem Basketballspiel



Wenn Sie sich den Code für diese Anwendung ansehen, wird er in den Dateien angezeigtHomeTeam.jsundAwayTeam.jsverwendet dieselbe Logik, um mit dem Messgerät zu arbeiten. In einer solchen Situation können Sie, wenn derselbe Code zum Verwalten der Schnittstelle verwendet wird, diesen Code von der Komponente trennen und in eine separate Datei einfügen.



Hier habe ich den Code zum Speichern des Zählerstatus und die Logik zum Erhöhen des Zählers in eine separate Datei getrenntutil.js. Diese Datei wird in Komponenten importiert.



Hooks sind im Wesentlichen gewöhnliche Funktionen, die einen bestimmten Wert zurückgeben. Mit ihrer Hilfe können Sie Code formatieren, der in verschiedenen Komponenten wiederverwendet werden soll.

Ergebnis

Denken Sie immer daran, dass die Entwicklung umfangreicher React-Anwendungen eine komplexe Aufgabe ist, bei der Entscheidungen getroffen werden müssen, die die Interessen der Benutzer und Entwickler solcher Anwendungen berücksichtigen. Die Auswahl der Empfehlungen, die bei der Arbeit an einem bestimmten Projekt sinnvoll sind, hängt davon ab, wie gut die Empfehlungen für diejenigen sind, die das Projekt nutzen, und für diejenigen, die es entwickeln.



Bei der Auswahl der Werkzeuge und Techniken für die Projektentwicklung lohnt es sich, damit zu experimentieren. Auf diese Weise können Sie genau auswählen, was Ihrer React-Anwendung zugute kommt. Ich hoffe, dass die Tipps, die ich Ihnen heute gegeben habe, für Sie nützlich sind.



Welche Entwicklungswerkzeuge und -techniken verwenden Sie beim Erstellen von React-Projekten, die gut skaliert werden müssen?