Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. React

Erstellen einer Reaktions-App mit einem Laravel-Backend: Teil 2, Reagieren

by
Read Time:14 minsLanguages:
This post is part of a series called Build a React App with Laravel Backend.
Build a React App With a Laravel RESTful Back End: Part 1, Laravel 5.5 API

German (Deutsch) translation by Katharina Grigorovich-Nevolina (you can also view the original English article)

Final product imageFinal product imageFinal product image
What You'll Be Creating

Dies ist der zweite und letzte Teil der Serie zum Erstellen einer React-Anwendung mit einem Laravel-Backend. Im ersten Teil der Serie haben wir mit Laravel eine RESTful-API für eine grundlegende Produktlistenanwendung erstellt. In diesem Tutorial werden wir das Frontend mit React entwickeln.

Wir werden auch alle verfügbaren Optionen prüfen, um die Lücke zwischen Laravel und React zu schließen. Sie müssen Teil eins der Serie nicht befolgt haben, um dieses Tutorial zu verstehen. Wenn Sie hier sind, um zu sehen, wie es React und Laravel gemeinsam geht, können Sie den ersten Teil vermeiden. Sie sollten zu GitHub gehen, das Repo klonen und die kurze Zusammenfassung unten machen, um loszulegen.

Eine kurze Zusammenfassung

Im vorherigen Tutorial haben wir eine Laravel-Anwendung entwickelt, die auf API-Aufrufe reagiert. Wir haben Routen, einen Controller und ein Modell für die einfache Produktlistenanwendung erstellt. Da es Aufgabe des Controllers war, eine Antwort auf die HTTP-Anforderungen zurückzugeben, wurde der Ansichtsabschnitt vollständig übersprungen.

Anschließend diskutierten wir Techniken zur Ausnahmebehandlung und -validierung mit Laravel. Am Ende des Tutorials hatten wir eine Laravel-Backend-API. Mit dieser API können wir jetzt Anwendungen sowohl für das Web als auch für eine Vielzahl mobiler Geräte erstellen.

In diesem Tutorial werden wir unseren Fokus auf das Frontend verlagern. In der ersten Hälfte des Tutorials geht es darum, React in einer Laravel-Umgebung einzurichten. Ich werde Ihnen auch Laravel Mix vorstellen (unterstützt von Laravel 5.4 und höher), eine API zum Kompilieren von Assets. In der zweiten Hälfte des Tutorials werden wir eine React-Anwendung von Grund auf neu erstellen.

React in Laravel einrichten

Laravel Mix wurde in Laravel 5.4 eingeführt und ist derzeit der ideale Weg, um React und Laravel miteinander zu verbinden. Mit Laravel 5.5 wurde der gesamte Prozess erheblich vereinfacht. Ich habe beide Methoden unten beschrieben.

Verwenden des React Preset-Befehls (Laravel 5.5)

Laravel 5.5 verfügt über eine brandneue Funktion, mit der Sie den Code für React-Komponenten mithilfe des preset react-Befehls von artisan erstellen können. In früheren Versionen von Laravel war es nicht so einfach, React in Laravel einzurichten. Wenn Sie die neueste Version von Laravel ausführen, führen Sie den folgenden Befehl aus, um Ihrem Projekt eine React-Voreinstellung hinzuzufügen.

Laravel wird standardmäßig mit der Vue-Voreinstellung ausgeliefert, und der obige Befehl ersetzt alle Instanzen von Vue durch React. Interessanterweise können Sie, wenn Sie keine Voreinstellung benötigen, diese mit dem Befehl php artisan preset none vollständig entfernen.

Wenn alles gut geht, sollte dies in Ihrem Terminal angezeigt werden.

Im Hintergrund verwendet Laravel Laravel Mix, eine glatte Hülle für Webpacks. Wie Sie vielleicht bereits wissen, ist Webpack ein Modulbündler. Es löst alle Modulabhängigkeiten auf und generiert die erforderlichen statischen Assets für JavaScript und CSS. Für React ist ein Modulbündler erforderlich, und das Webpack passt perfekt in diese Rolle. Laravel Mix ist also die Ebene, die sich auf dem Webpack befindet und die Verwendung des Webpacks in Laravel erleichtert.

Ein besseres Verständnis der Funktionsweise von Laravel Mix ist wichtig, wenn Sie die Webpack-Konfiguration zu einem späteren Zeitpunkt anpassen müssen. Der Befehl React Preset gibt uns keine Informationen darüber, wie die Dinge im Hintergrund funktionieren. Entfernen Sie also die Voreinstellung "Reagieren" und verfolgen Sie die Schritte stattdessen manuell.

Manuelle Methode (Laravel 5.4)

Wenn Sie Laravel 5.4 ausführen oder nur neugierig sind, wie Laravel Mix konfiguriert ist, müssen Sie die folgenden Schritte ausführen:

Installieren Sie react, react-dom und babel-preset-react mit npm. Es könnte eine gute Idee sein, auch Garn zu installieren. Es ist kein Geheimnis, dass Laravel und React Garn gegenüber npm bevorzugen.

Gehen Sie zu webpack.mix.js, das sich im Stammverzeichnis Ihres Laravel-Projekts befindet. Dies ist die Konfigurationsdatei, in der Sie angeben, wie Ihre Assets kompiliert werden sollen. Ersetzen Sie die Zeile mix.js('resources/assets/js/app.js', 'public/js'); mit mix.react('resources/assets/js/app.js', 'public/js');. app.js ist der Einstiegspunkt für unsere JavaScript-Dateien, und die kompilierten Dateien befinden sich in public/js. Führen Sie npm install im Terminal aus, um alle Abhängigkeiten zu installieren.

Gehen Sie als Nächstes zu resources/assets/js. Es gibt bereits einen Komponentenordner und einige andere JavaScript-Dateien. Reaktionskomponenten werden in das Komponentenverzeichnis verschoben. Entfernen Sie die vorhandene Example.vue-Datei und erstellen Sie eine neue Datei für eine React-Beispielkomponente.

resources/assets/js/component/Main.js

Aktualisieren Sie app.js, um den gesamten Vue-bezogenen Code zu entfernen, und importieren Sie stattdessen die React-Komponente.

resources/assets/js/app.js.

Jetzt müssen wir nur noch die Assets für die Ansicht zugänglich machen. Die Ansichtsdateien befinden sich im Verzeichnis resources/views. Fügen wir der Datei welcome.blade.php ein <script>-Tag hinzu. Dies ist die Standardseite, die gerendert wird, wenn Sie zu localhost localhost:8000/. Entfernen Sie den Inhalt der Ansichtsdatei und ersetzen Sie ihn durch den folgenden Code:

resources/views/welcome.blade.php

Führen Sie abschließend npm run dev oder yarn run dev aus, um die Assets zu kompilieren. Wenn Sie localhost:8000 besuchen, sollten Sie Folgendes sehen:

Laravel and React running togetherLaravel and React running togetherLaravel and React running together
Reaktion eingebettet in Laravels Sichtweise. 

Die Datei package.json verfügt über ein Überwachungsskript, das die Assets automatisch kompiliert, wenn Änderungen festgestellt werden. Führen Sie npm run watch aus, um diesen Modus zu aktivieren.

Herzlichen Glückwunsch, Sie haben React erfolgreich für die Arbeit mit Laravel konfiguriert. Jetzt erstellen wir einige React-Komponenten für das Frontend.

Entwicklung der React-Anwendung

Wenn Sie React noch nicht kennen, ist der Rest des Tutorials etwas herausfordernd. Ich empfehle die Teilnahme am React Crash Course für Anfänger, um sich besser mit den React-Konzepten vertraut zu machen. Lassen Sie uns anfangen!

Eine React-Anwendung basiert auf Komponenten. Komponenten sind die wichtigste Struktur in React, und wir haben ein Verzeichnis für Komponenten.

Mit Komponenten können Sie die Benutzeroberfläche in unabhängige, wiederverwendbare Teile aufteilen und jedes Teil isoliert betrachten. Konzeptionell sind Komponenten wie JavaScript-Funktionen. Sie akzeptieren beliebige Eingaben ("Requisiten" genannt) und geben React-Elemente zurück, die beschreiben, was auf dem Bildschirm angezeigt werden soll.
- Offizielle Reaktionsdokumente

Für die Anwendung, die wir erstellen, beginnen wir mit einer Basiskomponente, die alle vom Server zurückgegebenen Produkte anzeigt. Nennen wir es die Hauptkomponente. Die Komponente sollte sich zunächst um folgende Dinge kümmern:

  • Rufen Sie alle Produkte von der API ab (GET/api/products).
  • Speichern Sie die Produktdaten in ihrem Zustand.
  • Zeigen Sie die Produktdaten an.

React ist kein vollwertiges Framework, und daher verfügt die Bibliothek über keine eigenen AJAX-Funktionen. Ich werde fetch() verwenden, eine Standard-JavaScript-API zum Abrufen der Daten vom Server. Es gibt jedoch unzählige Alternativen, um AJAX-Anrufe an den Server zu tätigen.

resources/assets/js/component/Main.js 

Hier initialisieren wir den Status von products mit einem leeren Array im Konstruktor. Sobald die Komponente bereitgestellt ist, verwenden wir fetch(), um die Produkte aus /api/products abzurufen und im Status zu speichern. Die Rendermethode wird verwendet, um die Benutzeroberfläche der Komponente zu beschreiben. Alle Produkte werden dort als Liste gerendert.

Screenshot of the React Application - List of all productsScreenshot of the React Application - List of all productsScreenshot of the React Application - List of all products

Die Seite listet nur die Produkttitel auf, was langweilig ist. Außerdem haben wir dort noch keine interaktiven Elemente. Lassen Sie uns den Produkttitel anklickbar machen, und beim Klicken werden weitere Details zum Produkt gerendert.

Produktdaten anzeigen

Hier ist die Liste der Dinge, die wir behandeln müssen:

  • Ein Status zum Verfolgen des Produkts, auf das geklickt wurde. Nennen wir es currentProduct mit einem anfänglichen null-Wert.
  • Wenn Sie auf einen Produkttitel klicken, wird this.state.currentProduct aktualisiert.
  • Die Produktdetails des betreffenden Produkts werden rechts angezeigt. Bis ein Produkt ausgewählt ist, wird die Meldung "Kein Produkt ausgewählt" angezeigt.

resources/assets/js/component/Main.js 

Hier haben wir createProduct in den Status eingefügt und mit dem Wert null initialisiert. Die Zeile onClick={ () =>this.handleClick(product)} ruft die handleClick()-Methode auf, wenn auf das Listenelement geklickt wird. Die handleClick()-Methode aktualisiert den Status von currentProduct.

Um die Produktdaten anzuzeigen, können wir sie entweder in der Hauptkomponente rendern oder eine neue Komponente erstellen. Wie bereits erwähnt, ist die Aufteilung der Benutzeroberfläche in kleinere Komponenten die React-Methode. Also werden wir eine neue Komponente erstellen und sie Produkt nennen.

Die Produktkomponente ist in der Hauptkomponente verschachtelt. Die Hauptkomponente übergibt ihren Status als Requisiten. Die Produktkomponente akzeptiert diese Requisiten als Eingabe und rendert die relevanten Informationen.

resources/assets/js/component/Main.js 

resources/assets/js/component/Product.js 

Die Anwendung sollte jetzt ungefähr so aussehen:

Screenshot of the React application with product details displayedScreenshot of the React application with product details displayedScreenshot of the React application with product details displayed

Hinzufügen eines neuen Produkts

Wir haben das Front-End erfolgreich implementiert, das dem Abrufen und Anzeigen aller Produkte entspricht. Als nächstes benötigen wir ein Formular, um ein neues Produkt zur Produktliste hinzuzufügen. Der Prozess zum Hinzufügen eines Produkts ist möglicherweise etwas komplexer als das Abrufen der Daten von einer API.

Folgendes ist meiner Meinung nach erforderlich, um diese Funktion zu entwickeln:

  • Eine neue statusbehaftete Komponente, die die Benutzeroberfläche für ein Eingabeformular rendert. Der Status der Komponente enthält die Formulardaten.
  • Beim Senden übergibt die untergeordnete Komponente den Status mithilfe eines Rückrufs an die Hauptkomponente.
  • Die Hauptkomponente verfügt über eine Methode, z. B. handleNewProduct(), die die Logik zum Starten einer POST-Anforderung verarbeitet. Nach Erhalt der Antwort aktualisiert die Hauptkomponente ihren Status (sowohl this.state.products als auch this.state.currentProduct).

Das klingt nicht sehr komplex, oder? Lassen Sie es uns Schritt für Schritt tun. Erstellen Sie zunächst eine neue Komponente. Ich werde es AddProduct nennen.

resources/assets/js/component/AddProduct.js 

Die Komponente rendert im Grunde genommen ein Eingabeformular, und alle Eingabewerte werden im Status(this.state.newProduct) gespeichert. Beim Senden des Formulars wird dann die handleSubmit()-Methode aufgerufen. AddProduct muss die Informationen jedoch an das übergeordnete Element zurückgeben, und dies erfolgt über einen Rückruf.

Die Hauptkomponente, die die übergeordnete Komponente ist, übergibt eine Funktionsreferenz als Requisiten. Die untergeordnete Komponente, in unserem Fall AddProduct, ruft diese Requisiten auf, um das übergeordnete Element über die Statusänderung zu benachrichtigen. Also die Zeile this.props.onAdd(this.state.newProduct); ist ein Beispiel für einen Rückruf, der die übergeordnete Komponente des neuen Produkts benachrichtigt.

In der Hauptkomponente deklarieren wir nun <AddProduct /> wie folgt:

Der onAdd-Ereignishandler ist mit der handleAddProduct()-Methode der Komponente verkettet. Diese Methode hostet den Code zum Senden einer POST-Anforderung an den Server. Wenn die Antwort anzeigt, dass das Produkt erfolgreich erstellt wurde, wird der Status der products und der currentProducts aktualisiert.

Vergessen Sie nicht, die handleProduct-Methode mit this.handleAddProduct = this.handleAddProduct.bind(this); an die Klasse zu binden. im Konstruktor. Und hier ist die endgültige Version der Anwendung:

Screenshot of the final version of the applicationScreenshot of the final version of the applicationScreenshot of the final version of the application

Was als nächstes?

Die Anwendung ist ohne die Lösch- und Aktualisierungsfunktionen unvollständig. Wenn Sie das Tutorial jedoch bis jetzt genau verfolgt haben, sollten Sie in der Lage sein, die Lücke ohne große Probleme zu füllen. Um Ihnen den Einstieg zu erleichtern, habe ich Ihnen die Ereignishandlerlogik für das Lösch- und Aktualisierungsszenario bereitgestellt.

Logik zum Löschen eines Produkts

Logik zum Aktualisieren eines vorhandenen Produkts

Was Sie tun müssen, ist einzutauchen, sich die Hände schmutzig zu machen und die Anwendung mit der obigen Logik zu beenden. Ich werde Ihnen einen Hinweis geben: Die Schaltfläche Löschen sollte sich idealerweise in der Produktkomponente befinden, während die Aktualisierungsfunktion eine eigene Komponente haben sollte. Ich ermutige Sie, diese Herausforderung anzunehmen und die fehlenden Komponenten fertigzustellen.

Zusammenfassung

Wir haben einen langen Weg zurückgelegt. Zuerst haben wir eine REST-API mit dem Laravel-Framework erstellt. Anschließend diskutierten wir unsere Optionen zum Mischen von Laravel und React. Schließlich haben wir mit React ein Front-End für die API erstellt.

Obwohl wir uns hauptsächlich auf die Erstellung einer einseitigen Anwendung mit React konzentriert haben, können Sie Widgets oder Komponenten erstellen, die an bestimmte Elemente in Ihren Ansichten angehängt sind. React ist sehr flexibel, weil es eine Bibliothek ist und eine gute.

In den letzten Jahren hat React an Popularität gewonnen. Tatsächlich gibt es eine Reihe von Artikeln auf dem Markt, die zum Kauf, zur Überprüfung, Implementierung usw. verfügbar sind. Wenn Sie nach zusätzlichen Ressourcen rund um React suchen, zögern Sie nicht, diese zu überprüfen.

Haben Sie schon einmal versucht, mit Laravel und React zu experimentieren? Was sind deine Gedanken? Teile sie uns in den Kommentaren mit.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.