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

() translation by (you can also view the original English article)

Final 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.

1	php artisan preset react

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.

1	React scaffolding installed successfully.
2	Please run "npm install && npm run dev" to compile your fresh scaffolding.

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

import React, { Component } from 'react';
import ReactDOM from 'react-dom';

/* An example React component */
class Main extends Component {
    render() {
        return (
            <div>
                <h3>All Products</h3>
            </div>
        );
    }
}

export default Main;

/* The if statement is required so as to Render the component on pages that have a div with an ID of "root";  
*/

if (document.getElementById('root')) {
    ReactDOM.render(<Main />, document.getElementById('root'));
}

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

resources/assets/js/app.js.

1	require('./bootstrap');
2
3	/* Import the Main component */
4	import Main from './components/Main';

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

<!doctype html>
<html lang="{{ app()->getLocale() }}">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Laravel React application</title>
        <link href="{{mix('css/app.css')}}" rel="stylesheet" type="text/css">
    </head>
    <body>
    <h2 style="text-align: center"> Laravel and React application </h2>
        <div id="root"></div>
        <script src="{{mix('js/app.js')}}" ></script>
    </body>
</html>

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 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

import React, { Component } from 'react';
import ReactDOM from 'react-dom';

/* Main Component */
class Main extends Component {

  constructor() {
  
    super();
    //Initialize the state in the constructor
    this.state = {
        products: [],
    }
  }
  /*componentDidMount() is a lifecycle method
   * that gets called after the component is rendered
   */
  componentDidMount() {
    /* fetch API in action */
    fetch('/api/products')
        .then(response => {
            return response.json();
        })
        .then(products => {
            //Fetched product is stored in the state
            this.setState({ products });
        });
  }

 renderProducts() {
    return this.state.products.map(product => {
        return (
            /* When using list you need to specify a key
             * attribute that is unique for each list item
            */
            <li key={product.id} >
                { product.title } 
            </li>      
        );
    })
  }
  
  render() {
   /* Some css code has been removed for brevity */
    return (
        <div>
              <ul>
                { this.renderProducts() }
              </ul> 
            </div> 
      
    );
  }
}

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 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

import React, { Component } from 'react';
import ReactDOM from 'react-dom';

/* Main Component */
class Main extends Component {

  constructor() {
  
    super();

    /* currentProduct keeps track of the product currently
     * displayed */
    this.state = {
        products: [],
        currentProduct: null
    }
  }
 
  componentDidMount() {
    //code omitted for brevity
  }

 renderProducts() {
    return this.state.products.map(product => {
        return (
            //this.handleClick() method is invoked onClick.
            <li onClick={
                () =>this.handleClick(product)} key={product.id} >
                { product.title } 
            </li>      
        );
    })
  }
  
   handleClick(product) {
    //handleClick is used to set the state
    this.setState({currentProduct:product});
  
  }
  
  render() {
   /* Some css code has been removed for brevity */
    return (
        <div>
              <ul>
                { this.renderProducts() }
              </ul> 
            </div> 
      
    );
  }
}

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

render() {
  return (
    /* The extra divs are for the css styles */
        <div>
            <div>
             <h3> All products </h3>
              <ul>
                { this.renderProducts() }
              </ul> 
            </div> 
          
            <Product product={this.state.currentProduct} />
        </div>
    );
  }
}

resources/assets/js/component/Product.js

import React, { Component } from 'react';

/* Stateless component or pure component
 * { product } syntax is the object destructing
 */
const Product = ({product}) => {
   
  const divStyle = {
      /*code omitted for brevity */
  }

  //if the props product is null, return Product doesn't exist
  if(!product) {
    return(<div style={divStyle}>  Product Doesnt exist </div>);
  }
    
  //Else, display the product data
  return(  
    <div style={divStyle}> 
      <h2> {product.title} </h2>
      <p> {product.description} </p>
      <h3> Status {product.availability ? 'Available' : 'Out of stock'} </h3>
      <h3> Price : {product.price} </h3>
     
    </div>
  )
}

export default Product ;

Die Anwendung sollte jetzt ungefähr so aussehen:

Screenshot 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

class AddProduct extends Component {

  constructor(props) {
    super(props);
       /* Initialize the state. */
       this.state = {
          newProduct: {
              title: '',
              description: '',
              price: 0,
              availability: 0
          }
        }
    
    //Boilerplate code for binding methods with `this`
    this.handleSubmit = this.handleSubmit.bind(this);
    this.handleInput = this.handleInput.bind(this);
  }
  
  /* This method dynamically accepts inputs and stores it in the state */
  handleInput(key, e) {
    
    /*Duplicating and updating the state */
    var state = Object.assign({}, this.state.newProduct); 
    state[key] = e.target.value;
    this.setState({newProduct: state });
  }
 /* This method is invoked when submit button is pressed */
  handleSubmit(e) {
    //preventDefault prevents page reload   
    e.preventDefault();
    /*A call back to the onAdd props. The current
     *state is passed as a param
     */
    this.props.onAdd(this.state.newProduct);
  }

  render() {
    const divStyle = {
        /*Code omitted for brevity */ }
    
    return(
      <div> 
        <h2> Add new product </h2>
        <div style={divStyle}> 
        /*when Submit button is pressed, the control is passed to 
         *handleSubmit method 
         */
        <form onSubmit={this.handleSubmit}>
          <label> Title: 
           { /*On every keystroke, the handeInput method is invoked */ }
            <input type="text" onChange={(e)=>this.handleInput('title',e)} />
          </label>
          
          <label> Description: 
            <input type="text" onChange={(e)=>this.handleInput('description',e)} />
          </label>
          
         { /* Input fields for Price and availability omitted for brevity */}

          <input type="submit" value="Submit" />
        </form>
      </div>
    </div>)
  }
}

export default AddProduct;
  

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:

1	<AddProduct onAdd={this.handleAddProduct} />

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.

 handleAddProduct(product) {
     
    product.price = Number(product.price);
    /*Fetch API for post request */
    fetch( 'api/products/', {
        method:'post',
        /* headers are important*/
        headers: {
          'Accept': 'application/json',
          'Content-Type': 'application/json'
        },
        
        body: JSON.stringify(product)
    })
    .then(response => {
        return response.json();
    })
    .then( data => {
        //update the state of products and currentProduct
        this.setState((prevState)=> ({
            products: prevState.products.concat(data),
            currentProduct : data
        }))
    })

  }  

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 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

  handleDelete() {
     
    const currentProduct = this.state.currentProduct;
    fetch( 'api/products/' + this.state.currentProduct.id, 
        { method: 'delete' })
        .then(response => {
          /* Duplicate the array and filter out the item to be deleted */
          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, {
        method:'put',
        headers: {
          'Accept': 'application/json',
          'Content-Type': 'application/json'
        },
        body: JSON.stringify(product)
    })
    .then(response => {
        return response.json();
    })
    .then( data => {
        /* Updating the state */
        var array = this.state.products.filter(function(item) {
          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 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.

1	import React, { Component } from 'react';
2	import ReactDOM from 'react-dom';
3
4	/* Main Component */
5	class Main extends Component {
6
7	constructor() {
8
9	super();
10	//Initialize the state in the constructor
11	this.state = {
12	products: [],
13	}
14	}
15	/*componentDidMount() is a lifecycle method
16	* that gets called after the component is rendered
17	*/
18	componentDidMount() {
19	/* fetch API in action */
20	fetch('/api/products')
21	.then(response => {
22	return response.json();
23	})
24	.then(products => {
25	//Fetched product is stored in the state
26	this.setState({ products });
27	});
28	}
29
30	renderProducts() {
31	return this.state.products.map(product => {
32	return (
33	/* When using list you need to specify a key
34	* attribute that is unique for each list item
35	*/
36	<li key={product.id} >
37	{ product.title }
38	</li>
39	);
40	})
41	}
42
43	render() {
44	/* Some css code has been removed for brevity */
45	return (
46	<div>
47	<ul>
48	{ this.renderProducts() }
49	</ul>
50	</div>
51
52	);
53	}
54	}

1	import React, { Component } from 'react';
2	import ReactDOM from 'react-dom';
3
4	/* Main Component */
5	class Main extends Component {
6
7	constructor() {
8
9	super();
10
11	/* currentProduct keeps track of the product currently
12	* displayed */
13	this.state = {
14	products: [],
15	currentProduct: null
16	}
17	}
18
19	componentDidMount() {
20	//code omitted for brevity
21	}
22
23	renderProducts() {
24	return this.state.products.map(product => {
25	return (
26	//this.handleClick() method is invoked onClick.
27	<li onClick={
28	() =>this.handleClick(product)} key={product.id} >
29	{ product.title }
30	</li>
31	);
32	})
33	}
34
35	handleClick(product) {
36	//handleClick is used to set the state
37	this.setState({currentProduct:product});
38
39	}
40
41	render() {
42	/* Some css code has been removed for brevity */
43	return (
44	<div>
45	<ul>
46	{ this.renderProducts() }
47	</ul>
48	</div>
49
50	);
51	}
52	}

1	import React, { Component } from 'react';
2
3	/* Stateless component or pure component
4	* { product } syntax is the object destructing
5	*/
6	const Product = ({product}) => {
7
8	const divStyle = {
9	/code omitted for brevity /
10	}
11
12	//if the props product is null, return Product doesn't exist
13	if(!product) {
14	return(<div style={divStyle}> Product Doesnt exist </div>);
15	}
16
17	//Else, display the product data
18	return(
19	<div style={divStyle}>
20	<h2> {product.title} </h2>
21	<p> {product.description} </p>
22	<h3> Status {product.availability ? 'Available' : 'Out of stock'} </h3>
23	<h3> Price : {product.price} </h3>
24
25	</div>
26	)
27	}
28
29	export default Product ;

1	class AddProduct extends Component {
2
3	constructor(props) {
4	super(props);
5	/* Initialize the state. */
6	this.state = {
7	newProduct: {
8	title: '',
9	description: '',
10	price: 0,
11	availability: 0
12	}
13	}
14
15	//Boilerplate code for binding methods with `this`
16	this.handleSubmit = this.handleSubmit.bind(this);
17	this.handleInput = this.handleInput.bind(this);
18	}
19
20	/* This method dynamically accepts inputs and stores it in the state */
21	handleInput(key, e) {
22
23	/Duplicating and updating the state /
24	var state = Object.assign({}, this.state.newProduct);
25	state[key] = e.target.value;
26	this.setState({newProduct: state });
27	}
28	/* This method is invoked when submit button is pressed */
29	handleSubmit(e) {
30	//preventDefault prevents page reload
31	e.preventDefault();
32	/*A call back to the onAdd props. The current
33	*state is passed as a param
34	*/
35	this.props.onAdd(this.state.newProduct);
36	}
37
38	render() {
39	const divStyle = {
40	/Code omitted for brevity / }
41
42	return(
43	<div>
44	<h2> Add new product </h2>
45	<div style={divStyle}>
46	/*when Submit button is pressed, the control is passed to
47	*handleSubmit method
48	*/
49	<form onSubmit={this.handleSubmit}>
50	<label> Title:
51	{ /On every keystroke, the handeInput method is invoked / }
52	<input type="text" onChange={(e)=>this.handleInput('title',e)} />
53	</label>
54
55	<label> Description:
56	<input type="text" onChange={(e)=>this.handleInput('description',e)} />
57	</label>
58
59	{ /* Input fields for Price and availability omitted for brevity */}
60
61	<input type="submit" value="Submit" />
62	</form>
63	</div>
64	</div>)
65	}
66	}
67
68	export default AddProduct;
69