Erstellen Sie eine React-App mit einem Laravel-Back-End Teil 2, React

Das package.json verfügt über ein Überwachungsskript, das die Assets automatisch kompiliert, wenn Änderungen festgestellt werden. Um diesen Modus zu aktivieren, starten Sie npm run watch. 

Glückwunsch, Sie haben React erfolgreich für die Zusammenarbeit mit Laravel konfiguriert. Lassen Sie uns nun einige React-Komponenten für das Frontend erstellen. 

Entwickeln der React-Anwendung

Wenn Sie mit React noch nicht vertraut sind, werden Sie den Rest des Tutorials etwas schwierig finden. Ich empfehle die Serie React Crash Course für Anfänger, um sich mit den React-Konzepten besser vertraut zu machen. Lass uns anfangen!

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

Mithilfe von Komponenten können Sie die Benutzeroberfläche in unabhängige, wiederverwendbare Teile aufteilen und jedes Teil einzeln betrachten. Komponenten sind konzeptionell wie JavaScript-Funktionen. Sie akzeptieren willkürliche Eingaben ("Requisiten" genannt) und geben React-Elemente zurück, die beschreiben, was auf dem Bildschirm erscheinen soll.
- Offizielle React Docs

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

• Holen Sie alle Produkte von der API (GET / API / Produkte).
• 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 verwenden holen(), Dies ist eine Standard-JavaScript-API zum Abrufen der Daten vom Server. Es gibt jedoch unzählige Alternativen, um AJAX-Aufrufe an den Server zu tätigen. 

Ressourcen / Assets / Js / Komponente / Main.js

importieren Sie React, Component aus 'reagieren'; importiere ReactDOM von 'reag-dom'; / * Main Component * / class Main erweitert die Komponente constructor () super (); // Initialisieren Sie den Status im Konstruktor this.state = products: [], / * componentDidMount () ist eine Lebenszyklusmethode *, die aufgerufen wird, nachdem die Komponente gerendert wird * / fetch ('/ api / products') .then (response => return response.json ();) .then (products => // Abgerufenes Produkt wird im Status this.setState (products) gespeichert. ;);  renderProducts () return this.state.products.map (product => return (/ * Bei Verwendung von list müssen Sie ein Schlüssel * -Attribut angeben, das für jedes Listenelement eindeutig ist. * / 
  Produktname  
 ); ) render () / * Einige CSS-Codes wurden aus Gründen der Kürze entfernt. * / return ( 
 
 this.renderProducts () 
 
 );  

Hier initialisieren wir den Zustand von Produkte zu einem leeren Array im Konstruktor. Sobald die Komponente montiert ist, verwenden wir sie holen() die Produkte von abrufen /api/Produkte und speichern Sie es im Staat. Die Rendermethode wird verwendet, um die Benutzeroberfläche der Komponente zu beschreiben. Dort werden alle Produkte als Liste gerendert. 

Die Seite listet nur die Produkttitel auf, was langweilig ist. Darüber hinaus haben wir 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 angeklickten Produkts. Nennen wir es mal aktuelles Produkt mit einer Initiale Null Wert.
• Wenn ein Produkttitel angeklickt wird, this.state.currentProduct ist aktualisiert.
• Die Produktdetails des betroffenen Produkts werden rechts angezeigt. Bis ein Produkt ausgewählt ist, wird die Meldung "Kein Produkt ausgewählt" angezeigt.

Ressourcen / Assets / Js / Komponente / Main.js

importieren Sie React, Component aus 'reagieren'; importiere ReactDOM von 'reag-dom'; / * Main Component * / class Main erweitert die Komponente constructor () super (); / * currentProduct verfolgt das Produkt, das gerade angezeigt wird * angezeigt * / this.state = products: [], currentProduct: null componentDidMount () // Code wurde aus Gründen der Übersichtlichkeit weggelassen renderProducts () return this.state.products. map (product => return (//this.handleClick () - Methode) wird beiClick aufgerufen. 
this.handleClick (product) key = product.id> product.title 
 ); ) handleClick (product) // handleClick wird verwendet, um den Status this.setState (currentProduct: product) festzulegen.  render () / * Einige CSS-Codes wurden aus Gründen der Kürze entfernt. * / return ( 
 
 this.renderProducts () 
 
 );  

Hier haben wir hinzugefügt createProduct in den Zustand und initialisiert es mit dem Wert Null. Die Linie onClick = () => this.handleClick (Produkt) ruft die handleClick () Methode, wenn auf das Listenelement geklickt wird. Das handleClick () Methode aktualisiert den Status von aktuelles Produkt. 

Um nun die Produktdaten anzuzeigen, können wir sie entweder in der Main-Komponente darstellen oder eine neue Komponente erstellen. Wie bereits erwähnt, ist das Aufteilen der Benutzeroberfläche in kleinere Komponenten die Reaktionsweise von React. Also erstellen wir eine neue Komponente und nennen sie Produkt.

Die Produktkomponente ist in der Hauptkomponente verschachtelt. Die Hauptkomponente gibt ihren Zustand als Requisiten ab. Die Produktkomponente akzeptiert diese Requisiten als Eingabe und gibt die relevanten Informationen wieder.

Ressourcen / Assets / Js / Komponente / Main.js

render () return (/ * Die zusätzlichen Divs beziehen sich auf die CSS-Stile * / 
 
 
 Alle Produkte 
 
 this.renderProducts () 
 
  
 ); 

resources / assets / js / Komponente / Product.js

importieren Sie React, Component aus 'reagieren'; / * Stateless-Komponente oder reine Komponente * product -Syntax ist das Objekt, das zerstört wird * / const Product = (product) => const divStyle = / * Code wurde aus Gründen der Kürze * / weggelassen //, wenn das Requisitenprodukt den Wert null hat , zurücksenden Produkt existiert nicht, wenn (! produkt) zurücksenden (
 Produkt existiert nicht 
);  // Andernfalls die Produktdaten zurückgeben ( 
 
 Produktname 
 
 Produktbeschreibung 
 
 Status Produktverfügbarkeit? 'Verfügbar': 'Ausverkauft' 
 
 Preis: product.price 
 
 ) Standardprodukt exportieren;

Die Anwendung sollte jetzt ungefähr so ​​aussehen:

Ein neues Produkt hinzufügen

Wir haben erfolgreich das Front-End implementiert, um alle Produkte abzurufen und anzuzeigen. Als Nächstes benötigen wir ein Formular, um ein neues Produkt zur Produktliste hinzuzufügen. Der Prozess zum Hinzufügen eines Produkts erscheint möglicherweise etwas komplexer als das Abrufen der Daten aus einer API.

Ich denke, es ist notwendig, um diese Funktion zu entwickeln:

• Eine neue stateful-Komponente, die die Benutzeroberfläche für ein Eingabeformular darstellt. Der Zustand der Komponente enthält die Formulardaten.
• Beim Senden übergibt die untergeordnete Komponente den Status mithilfe eines Rückrufs an die Main-Komponente.
• Die Hauptkomponente hat beispielsweise eine Methode handleNewProduct (), die die Logik für das Starten einer POST-Anforderung behandelt. Nach Erhalt der Antwort aktualisiert die Hauptkomponente ihren Status (beide) this.state.products und this.state.currentProduct) 

Das hört sich nicht sehr komplex an, oder? Lass es uns Schritt für Schritt tun. Erstellen Sie zuerst eine neue Komponente. Ich werde es anrufen Produkt hinzufügen. 

resources / assets / js / Komponente / AddProduct.js

Die Klasse AddProduct erweitert die Komponente Konstruktor (Requisiten) Super (Requisiten); / * Zustand initialisieren. * / this.state = newProduct: title: ", description:", price: 0, verfügbarkeit: 0 // Boilerplate-Code für Bindungsmethoden mit 'this' this.handleSubmit = this.handleSubmit.bind (this) ; this.handleInput = this.handleInput.bind (this);  / * Diese Methode akzeptiert Eingaben dynamisch und speichert sie im Status * / handleInput (Schlüssel, e) / * Duplizieren und Aktualisieren des Status * / var state = Object.assign (, this.state.newProduct); state [key] = e.target.value; this.setState (newProduct: state);  / * Diese Methode wird aufgerufen, wenn die Schaltfläche "Senden" gedrückt wird. * / HandleSubmit (e) // PrevDefault verhindert das Neuladen von Seiten e.preventDefault (); / * Ein Rückruf der onAdd-Requisiten. Der aktuelle * Status wird als Parameter übergeben. * / This.props.onAdd (this.state.newProduct);  render () const divStyle = / * Code wurde aus Gründen der Kürze * / nicht angegeben. return ( 
 
 Neues Produkt hinzufügen 
 
 / * Wenn der Submit-Button gedrückt wird, wird das Steuerelement an die * handleSubmit-Methode übergeben. 
  Titel: / * Bei jedem Tastendruck wird die handeInput-Methode aufgerufen. * / this.handleInput ('title', e) />   Beschreibung: this.handleInput ('description', e) />  / * Eingabefelder für Preis und Verfügbarkeit aus Gründen der Kürze weggelassen * /  
 
 
) export default AddProduct; 

Die Komponente stellt grundsätzlich ein Eingabeformular dar und alle Eingabewerte werden im Status gespeichert (this.state.newProduct). Dann auf Formulareinreichung, handleSubmit () Methode wird aufgerufen. Aber Produkt hinzufügen muss die Informationen an das übergeordnete Element zurückgeben, und dies geschieht mithilfe eines Rückrufs. 

Die Hauptkomponente, die übergeordnete Komponente, übergibt eine Funktionsreferenz als Requisiten. Die untergeordnete Komponente, Produkt hinzufügen Ruft in diesem Fall diese Requisiten auf, um den Elternteil über den Statuswechsel zu informieren. Also die Linie this.props.onAdd (this.state.newProduct); ist ein Beispiel für einen Rückruf, der die übergeordnete Komponente über das neue Produkt informiert. 

Nun werden wir innerhalb der Main-Komponente erklären wie folgt:

Das onAdd Eventhandler ist an die Komponente der Komponente gekettet handleAddProduct () Methode. Diese Methode hostet den Code zum Durchführen einer POST-Anforderung an den Server. Wenn die Antwort darauf hinweist, dass das Produkt erfolgreich erstellt wurde, wird der Status von angezeigt Produkte und aktuelleProdukte ist aktualisiert. 

 handleAddProduct (product) product.price = Number (product.price); / * Abruf-API für Postanfragen * / fetch ('api / products /', Methode: 'post', / * Header sind wichtig * / Header: 'Accept': 'application / json', 'Content-Type' : 'application / json', body: JSON.stringify (product)) .then (antwort => return response.json ();) .then (data => // Aktualisieren des Status der Produkte und des aktuellenProdukts) this.setState ((prevState) => (products: prevState.products.concat (data), currentProduct: data))) 

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

Was als nächstes?

Die Anwendung ist ohne die Lösch- und Aktualisierungsfunktionen unvollständig. Aber wenn Sie das Tutorial bis jetzt genau verfolgt haben, sollten Sie die Leere ohne viel Aufwand ausfüllen können. Zum Einstieg habe ich Ihnen die Event-Handler-Logik für das Lösch- und das Aktualisierungsszenario bereitgestellt.

Logik zum Löschen eines Produkts

 handleDelete () const currentProduct = this.state.currentProduct; fetch ('api / products /' + this.state.currentProduct.id, method: 'delete')). dann (antwort => / * Duplizieren Sie das Array und filtern Sie das zu löschende Element aus * / var array = this.state.products.filter (function (item) return item! == currentProduct); this.setState (products: array, currentProduct: null);); 

Logik zum Aktualisieren eines vorhandenen Produkts

handleUpdate (product) const currentProduct = this.state.currentProduct; fetch ('api / products /' + currentProduct.id, Methode: 'put', Header: 'Accept': 'application / json', 'Content-Type': 'application / json'), Hauptteil: JSON. stringify (product)) .then (response => return response.json ();) .then (data => / * Aktualisieren des Status * / var array = this.state.products.filter (Funktion (Element ) return item! == currentProduct) this.setState ((prevState) => (products: array.concat (product), currentProduct: product))) 

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 idealerweise in die Produktkomponente aufgenommen werden, während die Aktualisierungsfunktion eine eigene Komponente haben sollte. Ich ermutige Sie, diese Herausforderung anzunehmen und die fehlenden Komponenten zu beenden.

Zusammenfassung

Wir sind weit weg von wo wir angefangen haben. Zunächst haben wir eine REST-API mit dem Laravel-Framework erstellt. Anschließend besprachen wir unsere Optionen zum Mischen von Laravel und React. Schließlich haben wir mit React ein Frontend für die API aufgebaut. 

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

Im letzten Jahr hat React an Popularität gewonnen. Tatsächlich gibt es auf dem Marktplatz eine Reihe von Artikeln, die zum Kauf, zur Überprüfung, zur Implementierung usw. zur Verfügung stehen. Wenn Sie nach weiteren Ressourcen rund um React suchen, zögern Sie nicht, sie herauszufinden.

Haben Sie schon einmal mit Laravel und React experimentiert? Was sind deine Gedanken? Teilen Sie sie uns in den Kommentaren mit.