Build a React App With a Laravel Back End: Part 2, React

Finally, execute npm run dev or yarn run dev to compile the assets. If you visit localhost:8000, you should see:

The package.json has a watch script that auto-compiles the assets when any changes are detected. To enable this mode, run npm run watch. 

Congrats, you've successfully configured React to work with Laravel. Now, let's create some React components for the front end. 

Developing the React Application

If you're new to React, you will find the rest of the tutorial somewhat challenging. I recommend taking the React Crash Course for Beginners series to get acquainted with the React concepts better. Let's get started!

A React application is built around components. Components are the most important structure in React, and we have a directory dedicated for components.

Components let you split the UI into independent, reusable pieces, and think about each piece in isolation. Conceptually, components are like JavaScript functions. They accept arbitrary inputs (called "props") and return React elements describing what should appear on the screen.
— Official React Docs

For the application that we are building, we will start with a basic component that displays all the products returned by the server. Let's name it the Main component. The component should take care of the following things initially:

• Fetch all the products from the API (GET /api/products).
• Store the product data in its state.
• Display the product data.

React isn't a full-fledged framework, and hence the library doesn't have any AJAX features on its own. I will be using fetch(), which is a standard JavaScript API for fetching the data from the server. But there are tons of alternatives to make AJAX calls to the server. 

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

                { product.title } 
            
      
        );
    })
  }
  
  render() {
   /* Some css code has been removed for brevity */
    return (
        

              

                { this.renderProducts() }
              
 
            
 
      
    );
  }
}

Here we're initializing the state of products to an empty array in the constructor. Once the component mounts, we use fetch() to retrieve the products from /api/products and store it in the state. The render method is used to describe the UI of the component. All the products get rendered as a list there. 

The page just lists the product titles, which is boring. Moreover, we don't have any interactive elements in there yet. Let's make the product title clickable, and on click, more details about the product will get rendered. 

Displaying Product Data

Here's the list of things that we need to cover:

• A  state to track the product that was clicked. Let's call it currentProduct with an initial null value.
• When a product title is clicked, this.state.currentProduct is updated.
• The product details of the concerned product are displayed on the right. Until a product is selected, it displays the "No product selected" message.

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.
            
this.handleClick(product)} key={product.id} >
                { product.title } 
            
      
        );
    })
  }
  
   handleClick(product) {
    //handleClick is used to set the state
    this.setState({currentProduct:product});
  
  }
  
  render() {
   /* Some css code has been removed for brevity */
    return (
        

              

                { this.renderProducts() }
              
 
            
 
      
    );
  }
}

Here we've added createProduct into the state and initialized it with the value null. The line onClick={ () =>this.handleClick(product) } invokes the handleClick() method when the list item is clicked. The handleClick() method updates the state of currentProduct. 

Now to display the product data, we can either render it inside the Main component or create a new component. As previously mentioned, splitting the UI into smaller components is the React way of doing things. So we will create a new component and name it Product.

The Product component is nested inside the Main component. The Main component passes its state as props. The Product component accepts this props as input and renders the relevant information.

resources/assets/js/component/Main.js

render() {
  return (
    /* The extra divs are for the css styles */
        

            

             
 All products 
              

                { this.renderProducts() }
              
 
            
 
          
            
        
    );
  }
}

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(
  Product Doesnt exist 
);
  }
    
  //Else, display the product data
  return(  
    
 
      
 {product.title} 
      
 {product.description} 
      
 Status {product.availability ? 'Available' : 'Out of stock'} 
      
 Price : {product.price} 
     
    
  )
}

export default Product ;

The application should look something like this now:

Adding a New Product

We've successfully implemented the front end corresponding to retrieving all the products and displaying them. Next, we need a form to add a new product to the product list. The process for adding a product might feel a bit more complex than just fetching the data from an API.

Here's what I think is required to develop this feature:

• A new stateful component that renders the UI for an input form. The component's state holds the form data.
• On submit, the child component passes the state to the Main component using a callback.
• The Main component has a method, say handleNewProduct(), that handles the logic for starting a POST request. Upon receiving the response, the Main component updates its state (both this.state.products and this.state.currentProduct) 

That doesn't sound very complex, does it? Let's do it step by step. First, create a new component. I am going to call it AddProduct. 

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(
      
 
        
 Add new product 
        
 
        /*when Submit button is pressed, the control is passed to 
         *handleSubmit method 
         */
        

           Title: 
           { /*On every keystroke, the handeInput method is invoked */ }
            this.handleInput('title',e)} />
          
          
           Description: 
            this.handleInput('description',e)} />
          
          
         { /* Input fields for Price and availability omitted for brevity */}

          
        
      
    
)
  }
}

export default AddProduct;
  

The component basically renders an input form, and all the input values are stored in the state (this.state.newProduct). Then, on form submission, handleSubmit() method gets invoked. But AddProduct needs to communicate the information back to the parent, and we do this using a callback. 

The Main component, which is the parent, passes a function reference as props. The child component, AddProduct in our case, invokes this props to notify the parent of the state change. So the line this.props.onAdd(this.state.newProduct); is an example of a callback that notifies the parent component of the new product. 

Now, inside the Main component, we shall declare as follows:

The onAdd event handler is chained to the component's handleAddProduct() method. This method hosts the code for making a POST request to the server. If the response indicates that the product has been successfully created, the state of products and currentProducts is updated. 

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

  }  

Don't forget to bind the handleProduct method to the class using this.handleAddProduct = this.handleAddProduct.bind(this); in the constructor. And here's the final version of the application:

What Next?

The application is incomplete without the delete and update features. But if you've been following the tutorial closely until now, you should be able to fill in the void without much trouble. To get you started, I've provided you the event handler logic for both the delete and update scenario.

Logic for Deleting a Product

  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});

    });
  }

Logic for Updating an Existing Product

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

What you need to do is dive in, get your hands dirty, and finish the application using the above logic. I will drop you a hint: The delete button should ideally go inside the Product component, whereas the update feature should have a component of its own. I encourage you to take up this challenge and finish the missing components.

Summary

We've come a long way from where we started. First, we created a REST API using the Laravel framework. Then, we discussed our options for mixing Laravel and React. Finally, we built a front end to the API using React. 

Although we primarily focused on creating a single-page application using React, you can create widgets or components that are mounted to specific elements in your views. React is very flexible because it's a library, and a good one.

Over the last couple of year, React has grown in popularity. In fact, we’ve a number of items in the marketplace that are available for purchase, review, implementation, and so on. If you’re looking for additional resources around React, don’t hesitate to check them out.

Have you tried experimenting with Laravel and React before? What are your thoughts? Share them with us in the comments.