Erstellen Sie eine React -App mit einem Laravel -Back -Ende: Teil 2, reagieren

Dies ist der zweite und letzte Teil der Serie zum Aufbau einer Reaktionsanwendung mit einem Laravel-Back-End. Im ersten Teil der Serie haben wir eine erholsame API erstellt, die Laravel für eine grundlegende Produktlistenanwendung unter Verwendung von Laravel erstellt hat. In diesem Tutorial werden wir das vordere Ende mit React entwickeln. Sie müssen Teil 1 der Serien nicht verfolgt haben, um dieses Tutorial zu verstehen. Wenn Sie hier sind, um zu sehen, wie reagiert und Laravel zusammen zusammenfasst, können Sie den ersten Teil tatsächlich vermeiden. Sie sollten zu Github gehen, das Repo klonen und die schnelle Zusammenfassung folgen, um zu beginnen. Wir haben Routen, einen Controller und ein Modell für die einfache Produktlistenanwendung erstellt. Da es die Aufgabe des Controllers war, eine Antwort auf die HTTP -Anforderungen zurückzugeben, wurde der Ansichtsabschnitt vollständig übersprungen. Am Ende des Tutorials hatten wir eine Laravel-Back-End-API. Wir können diese API nun verwenden, um Anwendungen sowohl für das Web als auch für eine breite Palette von mobilen Geräten zu erstellen. In der ersten Hälfte des Tutorials geht es darum, React in einer Laravel -Umgebung einzurichten. Ich werde Ihnen auch Laravel Mix (unterstützt von Laravel 5.4 und später) vorstellen, eine API zum Kompilieren von Vermögenswerten. In der zweiten Hälfte des Tutorials werden wir eine Reaktionsanwendung von Grund auf neu erstellen. Mit Laravel 7 wurde der gesamte Prozess viel einfacher. Ich habe beide Methoden unten beschrieben. Login- und Registrierungskomponenten, beide für die Benutzerauthentifizierung. Wie Sie vielleicht bereits wissen, ist WebPack ein Modul -Bundler. Es löst alle Modulabhängigkeiten auf und generiert die erforderlichen statischen Vermögenswerte für JavaScript und CSS. React benötigt einen Modul -Bundler, um zu arbeiten, und Webpack passt perfekt in diese Rolle. Laravel Mix ist also die Ebene, die auf dem Webpack sitzt und die Verwendung von Webpack in Laravel erleichtert. Der React Preset -Befehl gibt uns keine Informationen darüber, wie die Dinge im Hintergrund funktionieren. Entfernen wir also das React Preset und ziehen Sie die Schritte stattdessen manuell zurück.

Manuelle Methode (Laravel 5.4)

Wenn Sie Laravel 5.4 ausführen oder nur neugierig sehen, wie Laravel Mix konfiguriert ist, müssen Sie die Schritte befolgen, denen Sie folgen müssen:

Installieren Sie Usestate und Abhängigkeiten Field, ersetzen Sie das vorhandene React-Dom-Felder mit den folgenden Angehörigen:

useEffect

composer require laravel/ui<br>php artisan ui react<br><br>// Generate login & registration scaffolding...<br>php artisan ui react --auth<br>

wird ausgeführt. Im Inneren verwenden wir Renderproducts

Methode, um die Benutzeroberfläche der Komponente zu beschreiben. Alle Produkte werden dort als Liste gerendert. Darüber hinaus haben wir dort noch keine interaktiven Elemente. Lassen Sie uns den Produkttitel anklicken und auf Klicken werden weitere Details zum Produkt gerendert. Nennen wir es die Hauptkomponente. Die Hauptkomponente, die übergeordnet ist, übergibt eine Funktionsreferenz als Referenz. Die untergeordnete Komponente, Hauptkomponente, wir werden die Produktkomponente deklarieren, während die Aktualisierungsfunktion eine eigene Komponente haben sollte. Ich ermutige Sie, diese Herausforderung anzunehmen und die fehlenden Komponenten zu beenden. Zunächst haben wir eine REST -API mit dem Laravel -Framework erstellt. Dann diskutierten wir unsere Optionen zum Mischen von Laravel und React. Schließlich haben wir mit React ein Front-End für die API erstellt. React ist sehr flexibel, weil es sich um eine Bibliothek handelt, und eine gute. Tatsächlich haben wir eine Reihe von Artikeln auf dem Markt, die zum Kauf, Überprüfungen, Implementierungen usw. verfügbar sind. Wenn Sie nach zusätzlichen Ressourcen um React suchen, zögern Sie nicht, sie zu überprüfen. Was denkst du? Teilen Sie sie mit uns im Forum.

Dieser Beitrag wurde mit Beiträgen von Kingsley Ubah aktualisiert. Kingsley ist begeistert davon, Inhalte zu erstellen, die die Leser erziehen und inspirieren. Zu den Hobbys gehören Lesen, Fußball und Radfahren.

Das obige ist der detaillierte Inhalt vonErstellen Sie eine React -App mit einem Laravel -Back -Ende: Teil 2, reagieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!