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

Final product image — What You’ll Be Creating

This is the second and final part of the series on building a React application with a Laravel back end. In the first part of the series, we created a RESTful API using Laravel for a basic product-listing application. In this tutorial, we will be developing the front end using React.

We will also consider all the available options to bridge the gap between Laravel and React. You don’t need to have followed part one of the series to understand this tutorial. If you’re here to see how React and Laravel fare together, you can, in fact, avoid the first part. You should head over to GitHub, clone the repo, and take the quick recap down below to get started.

A Quick Recap

In the previous tutorial, we developed a Laravel application that responds to API calls. We created routes, a controller, and a model for the simple product listing application. Since it was the controller’s job to return a response to the HTTP requests, the view section was entirely skipped.

Then we discussed techniques for exception handling and validation using Laravel. By the end of the tutorial, we had a Laravel back-end API. We can now use this API to build applications for both the web and a wide range of mobile devices.

In this tutorial, we will be shifting our focus towards the front end. The first half of the tutorial is about setting up React in a Laravel environment. I will also introduce you to Laravel Mix (supported by Laravel 5.4 and later), which is an API for compiling assets. In the second half of the tutorial, we will start building a React application from scratch.

Setting Up React in Laravel

Laravel Mix was introduced in Laravel 5.4, and it is currently the ideal way to hook up React and Laravel. With Laravel 5.5, the whole process was made much easier. I’ve described both methods below.

Using the React Preset Command (Laravel 5.5)

Laravel 5.5 has a brand new feature that lets you scaffold the code for React components using artisan’s preset react command. In previous versions of Laravel, setting up React inside Laravel wasn’t this easy. If you’re running the latest version of Laravel, then run the below command to add a React preset to your project.

php artisan preset react

Laravel by default gets shipped with the Vue preset, and the above command replaces all instances of Vue with React. Interestingly, if you don’t need a preset, you can remove them altogether using the php artisan preset none command.

If everything goes well, this should show up in your terminal.

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

In the background, Laravel uses Laravel Mix, which is a smooth wrapper for webpack. Webpack, as you might already know, is a module bundler. It resolves all the module dependencies and generates the necessary static assets for JavaScript and CSS. React requires a module bundler to work, and webpack perfectly fits into that role. So Laravel Mix is the layer that sits on top of webpack and makes it easier to use webpack in Laravel.

A better understanding of how Laravel Mix works is important if you need to customize the webpack configuration at a later time. The React preset command gives us no information about how things work in the background. So let’s remove the React preset and retrace the steps manually instead.

Manual Method (Laravel 5.4)

If you’re running Laravel 5.4, or if you are just curious to see how Laravel Mix is configured, here are the steps that you need to follow:

Install react, react-dom and babel-preset-react using npm. It might be a good idea to have yarn installed too. It’s no secret that Laravel and React prefer yarn over npm.

Head over to webpack.mix.js, located inside the root directory of your Laravel project. This is the configuration file where you declare how your assets should be compiled. Replace the line mix.js('resources/assets/js/app.js', 'public/js'); with mix.react('resources/assets/js/app.js', 'public/js');. app.js is the entry point for our JavaScript files, and the compiled files will be located inside public/js. Run npm install in the terminal to install all the dependencies.

Next, go to resources/assets/js. There’s already a components folder and a couple of other JavaScript files. React components will go into the components directory. Remove the existing Example.vue file and create a new file for a sample React component.

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 (
            
                All Products
            
        );
    }
}

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(, document.getElementById('root'));
}

Update app.js to remove all the Vue-related code and import the React component instead.

resources/assets/js/app.js

require('./bootstrap');

/* Import the Main component */
import Main from './components/Main';

Now, we just need to make the assets accessible to the View. The view files are located inside the resources/views directory. Let’s add a


Finally, execute npm run dev or yarn run dev to compile the assets. If you visit localhost:8000, you should see:
React embedded inside Laravel's view.
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.