Hinzufügen von Funktionen zu Ihrer React-App: Tools für verschiedene Fälle

Einführung

React — obwohl es als einfaches Tool zur Generierung von Komponenten begann, wuchs es im Laufe der Jahre zu einem leistungsstarken Satz von Tools, die leicht mit Plugins von Drittanbietern erweitert werden können.

Welche Tools sollten Sie wählen, um Funktionen bereitzustellen, die Ihr Unternehmen benötigt?

In diesem Artikel geben wir allgemein anerkannte Tipps und Tools für die Implementierung von:

• staatliche Verwaltung,
• Kommunikation in Echtzeit,
• Geolokalisierung,
• Zahlungen.

In jedem Abschnitt erklären wir, welches Tool Ihr Team verwenden kann, um die erforderliche Funktion bereitzustellen, warum es als die beste Lösung angesehen wird und wie es funktioniert.

Zustandsmanagement — Reagieren Sie mit Redux

Das am häufigsten verwendete Tool für die Datenverwaltung in React-Apps ist zweifellos Redux.

Es ist so beliebt, dass viele Leute, die von React gehört haben, glauben, dass es nur mit Redux verwendet werden kann. In Wirklichkeit ist die Bibliothek eine komplette eigenständige Bibliothek (wiegt nur 2 KB) und kann zusammen mit jedem JS-Framework verwendet werden.

Redux ist sehr einfach zu implementieren und ermöglicht das Hinzufügen von Erweiterungen wie redux-persist (wird verwendet, um sich den Status nach einer Rückkehr zu merken) oder ImmutableJS.

Dank seiner Einfachheit und einfachen Integration erfreute es sich großer Beliebtheit bei Entwicklern. Infolgedessen viele Debugging-Tools ausschließlich für Redux gebaut wurden erstellt.

In Redux kann der Status nur geändert werden durch Aktionen versenden (direkte Statusänderung ist nicht möglich), sodass der Ablauf einer Funktion in der Anwendung anhand der Liste der ausgelösten Aktionen beobachtet werden kann. Dies vereinfacht das Debuggen, da Entwickler nach jeder Aktion den aktuellen Status der App einsehen können.

Einige Entwickler behaupten, dass es unpraktisch ist, in Redux zu schreiben, da selbst die einfachsten Aktionen (z. B. das Ändern des Status eines Modals auf Schließen/Öffnen) Folgendes erfordern:

• Erstellen eines Aktionserstellers (das ist der Name der Aktion),
• Aktions-Dispatcher,
• Funktion, die einen neuen Zustand mit dem neuen Wert zurückgibt,
• Selektor zum Abrufen des aktuellen Status des Modals, um ihn an die Benutzeroberfläche zu übergeben
• eine Brücke zwischen Redux und React schaffen

<span class="colorbox1" fs-test-element="box1"><p>Hinweis: React-Komponenten werden immer dann aktualisiert, wenn sich der Status, die Hooks oder die Requisiten der Komponente ändern, sodass sie nicht auf Änderungen reagieren, die woanders passiert sind. Daher ist die Bridge erforderlich</p></span>.

Redux-Toolkit lindert die meisten dieser Schmerzen.

In Redux wiederholt sich ein Großteil des Codes, aber wenn Entwickler das React-Toolkit verwenden, können sie ihn automatisieren und so die Codebasis erheblich reduzieren.

Wie bereits erwähnt, ermöglicht Redux Erweiterbarkeit.

Entwickler können eine bestehende Lösung für asynchrone Aufrufe hinzufügen oder eine eigene erstellen.

Wenn sie beispielsweise Daten vom Server abrufen, können sie eine Aktion auslösen, die für den Start eines Serveraufrufs verantwortlich ist (dem oft _STARTED angehängt wird, z. B. FETCH_PHOTOS_OF_CATS_STARTED).

Nach Abschluss des Abrufs können sie eine weitere Aktion ausführen, diesmal mit dem Suffix _SUCCESS, wenn der Aufruf erfolgreich war, oder z. B. _REJECTED, wenn der Aufruf fehlgeschlagen ist.

Redux-Toolkit hilft, diesen sich wiederholenden Prozess zu vereinfachen.

Chat-/Video-Chat-App in Echtzeit — Socket.io mit React

Das Schreiben einer Chat-Anwendung mit beliebten Webanwendungsstacks wie LAMP (PHP) ist schwierig. Es beinhaltet das Abfragen des Servers nach Änderungen, das Verfolgen von Zeitstempeln und es ist viel langsamer, als es Entwicklern und Unternehmen lieb ist.

Buchsen waren traditionell die Lösung, auf der die meisten Echtzeit-Chat-Systeme aufgebaut sind.

Warum?

Das liegt daran, dass sie einen bidirektionalen Kommunikationskanal zwischen einem Client und einem Server bereitstellen, also Server kann Nachrichten pushen für Kunden.

Die Idee ist, dass der Server immer dann, wenn eine Chat-Nachricht gesendet wird, sie empfängt und an alle anderen verbundenen Clients weiterleitet.

Das beliebteste Tool für diesen Zweck ist socket.io. Es funktioniert auf jeder Plattform, jedem Browser oder Gerät und konzentriert sich gleichermaßen auf Zuverlässigkeit und Geschwindigkeit.

Wenn es um Chat-Nachrichten in Echtzeit geht, stellt React keine Hindernisse dar. Sobald die Verbindung hergestellt ist, können ein Client und der Server frei miteinander kommunizieren.

Der einzige Zweck von React besteht hier nur darin, die bereitzustellen Benutzeroberfläche zum Bereitstellen neuer Daten vom Server und ermöglichen dem Benutzer (optional), seine/ihre Nachrichten zu senden.

Bemerkenswert ist, dass es auch mit React Native sofort funktioniert.

<span class="colorbox1" fs-test-element="box1"><p>Gut zu wissen: React Native ist ein beliebtes Spin-off der React-Bibliothek, das zur Erstellung nativer mobiler Anwendungen verwendet wird. In einigen Fällen ermöglicht es Entwicklern, die Codebasis (einschließlich socket.io) zwischen Web- und Mobilanwendungen gemeinsam</p></span> zu nutzen.

Geolokalisierung

Um eine Funktion im Zusammenhang mit der Geolokalisierung in einer React-App zu implementieren, müssen Entwickler die Geolokalisierungs-API. Es ruft die Standorte der Benutzer ab, die später verwendet werden können ihre Positionen anzeigen mithilfe einer Mapping-API.

Da es auf dem Markt keine weit verbreiteten Bibliotheken gibt, die für diese Funktion empfohlen werden könnten, erweist es sich in den meisten Fällen als am besten, eine maßgeschneiderte Lösung zu erstellen, die an die spezifischen Anforderungen des Projekts angepasst ist.

Zahlungen

Das Thema Zahlungen ist breit gefächert. Auf dem Markt gibt es mehrere Drittanbieter für Zahlungen wie Stripe oder PayPal, aber keine Universallösung.

Berücksichtigen Sie bei der Auswahl eines Anbieters für Ihr Produkt Ihre Geschäftsvision, die Bedürfnisse Ihrer Kunden und die Standards in Ihrer Branche.

Hinzufügen von Funktionen zu React-Apps — Cheat-Liste

Das Schöne an React ist, dass es schmerzlos erweiterbar und zwingt die Entwicklungsteams nicht, bestimmte Tools zu verwenden.

Die React-Community hat viele robuste Lösungen für typische Anwendungsfälle wie Styling, Routing oder Statusmanagement entwickelt, sodass Unternehmen Bibliotheken von Drittanbietern, die sie implementieren möchten, frei wählen können.

<span class="colorbox1" fs-test-element="box1"><h3>Welche React-Tools könnten Sie verwenden und wann?</h3> <ul><li>Datenmanagement — Redux, Redux-Toolkit und Redux DevTools.</li> <li>Datenübertragung in Echtzeit zwischen dem Server und dem Client — Socket.io.</li> <li>Geolokalisierung — es ist eine einfache API, es müssen keine zusätzlichen Tools verwendet werden.</li> </ul></span><li>Zahlungen — kein offensichtlicher Marktführer, die Lösung, die Sie wählen, hängt von den Anbietern ab, die Ihr Unternehmen unterstützt.</li>