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 follow the quick recap 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 7, the whole process was made much easier. I've described both methods below.

Using the React Preset Command (Laravel 5.5 and Laravel 7+)

Laravel 5.5 comes with a 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.

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

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

For Laravel 7 and upwards, you can alternatively install the laravel/ui Composer package and use it to create a React scaffolding:

composer require laravel/ui
php artisan ui react

// Generate login & registration scaffolding...
php artisan ui react --auth

The last command will generate a scaffolding for the login and registration components, both for user authentication.

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.

Open 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 (
            <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'));
}

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

resources/assets/js/app.js

1	require('./bootstrap');
2
3	/* Import the Main component */
4	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 <script> tag to welcome.blade.php, which is the default page rendered when you navigate to localhost:8000/. Remove the contents of the view file and replace it with the code below:

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>

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

Screenshot of the React Application - List of all products

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.

Congratulations—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 to 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, like Axios.

We'll be using the new React API to create our application. This includes two hooks: useState and useEffect, which are the modern ways of updating a component's state and initiating lifecycle actions respectively in React.

But because hooks were introduced in React 16.8, we'll first need to update both the react and react-dom libraries in our project to their latest versions.

To do this, go to the package.json file in your project's root folder, and inside the dependencies field, replace the existing react and react-dom fields with the following ones:

1	"react": "^18.1.0",
2	"react-dom": "^18.1.0",

Next, run npm update to upgrade both libraries to the latest versions. Now that we have all the latest features from React, we'll modify our first component.

resources/assets/js/component/Main.js

import React, { useState, useEffect } from 'react'

const Main = () => {
    // Sets initial state for products to empty array
    const [products, setProducts] = useState([]);    

    // Call this function to get products data
    const getProducts = () => {
        /* fetch API in action */
        fetch('/api/products')
        .then(response => {
            return response.json();
        })
        .then(products => {
            //Fetched product is stored in the state
            setProducts(products);
        });
    };

    /*useEffect is a lifecycle hook
   * that gets called after the component is rendered
   */

    useEffect(() => {
        getProducts();
      }, []);    

    // Render the products
    const renderProducts = () => {
        return 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>      
            );
        })
    };

    return(
        <div>
              <ul>
                { renderProducts() }
              </ul> 
        </div>
    )
}

export default Main

Here we're initializing the state of products to an empty array at the start. Once the component mounts, useEffect will execute. Inside it, we use fetch() to retrieve the products from /api/products and store it in the state. We then define the renderProducts method to describe the UI of the component. All the products get rendered as a list there.

Finally, we render to the page inside the return statement.

Screenshot of the React Application - List of all products

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, 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, { useState, useEffect } from 'react'

const Main = () => {
    const [products, setProducts] = useState([]); 
    const [currentProduct, setCurrentProduct] = useState(null);    

    // getProducts function goes here
    
    useEffect(() => {
        getProducts();
     });    

    
    // Render the products
    const renderProducts = () => {
        return products.map(product => {
            return (     
                // handleClick() function is invoked onClick.           
                <li 
                    key={product.id} 
                    onClick={() => handleClick(product)}
                >
                    { product.title } 
                </li>      
            );
        })
    };

    // Executes when user clicks list item, sets the state
    const handleClick = (product) => {
        setCurrentProduct(product)
    };

    return(
        <div>
              <ul>
                { renderProducts() }
              </ul> 
        </div>
    )
}

export default Main

Here we've added createProduct into the state and initialized it with the value null. The line onClick={ () =>handleClick(product) } invokes the handleClick() function 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

return (
/* The extra divs are for the css styles */
    <div>
        <div>
         <h3> All products </h3>
          <ul>
            { renderProducts() }
          </ul> 
        </div> 
      
        <Product product={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 ;

The application should look something like this now:

Screenshot of the React application with product details displayed

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

import React, { useState } from 'react'

const AddProduct = (props) => {
    const [newProduct, setNewProduct] = 
        useState(
            {
                title:"", 
                description: "", 
                price: 0, 
                availability: 0
            }
        );
    
    const handleInput = (key, e) => {
        /*Duplicating and updating the state */
        var newState = Object.assign({}, newProduct); 
        newState[key] = e.target.value;
        setNewProduct(newState);
    };

    const handleSubmit = (e) => {
        //preventDefault prevents page reload   
        e.preventDefault();
        /*A call back to the onAdd props. The current
        *state is passed as a param
        */
        props.onAdd(newProduct);
    };

    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={handleSubmit}>
                    <label> Title: 
                    { /*On every keystroke, the handeInput method is invoked */ }
                        <input type="text" onChange={(e)=>handleInput('title',e)} />
                    </label>
                    
                    <label> Description: 
                        <input type="text" onChange={(e)=>handleInput('description',e)} />
                    </label>
                    
                    { /* Input fields for Price and availability omitted for brevity */}

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

export default AddProduct

The component basically renders an input form, and all the input values are stored in the 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 props.onAdd(newProduct); is an example of a callback that notifies the parent component of the new product.

Now, inside the Main component, we shall declare <AddProduct /> as follows:

1	<AddProduct onAdd={handleAddProduct} />

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            
        setProducts(prevProducts => prevProducts.concat(data))
        setCurrentProduct(data)
    })

  }  

And here's the final version of the application:

Screenshot of 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, you should be able to fill in the void without much trouble. To get you started, I've provided you with the event handler logic for both the delete and update scenarios.

Logic for Deleting a Product

  handleDelete() {
    const delProduct = currentProduct
    fetch( 'api/products/' + currentProduct.id, 
        { method: 'delete' })
        .then(response => {
          /* Duplicate the array and filter out the item to be deleted */
          var newItems = products.filter(function(item) {
          return item !== delProduct
        });             
        
        setProducts(newItems)
        setCurrentProduct(null)

    });
  }

Logic for Updating an Existing Product

handleUpdate(product) {

    const updProduct = 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 updItems = products.filter(function(item) {
          return item !== updProduct
        })               
        
        setProducts(updItems.concat(product))
        setCurrentProduct(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 few years, React has grown in popularity. In fact, we have 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 forum.

This post has been updated with contributions from Kingsley Ubah. Kingsley is passionate about creating content that educates and inspires readers. Hobbies include reading, football and cycling.

1	import React, { useState } from 'react'
2
3	const AddProduct = (props) => {
4	const [newProduct, setNewProduct] =
5	useState(
6	{
7	title:"",
8	description: "",
9	price: 0,
10	availability: 0
11	}
12	);
13
14	const handleInput = (key, e) => {
15	/Duplicating and updating the state /
16	var newState = Object.assign({}, newProduct);
17	newState[key] = e.target.value;
18	setNewProduct(newState);
19	};
20
21	const handleSubmit = (e) => {
22	//preventDefault prevents page reload
23	e.preventDefault();
24	/*A call back to the onAdd props. The current
25	*state is passed as a param
26	*/
27	props.onAdd(newProduct);
28	};
29
30	const divStyle = {
31	/Code omitted for brevity /
32	}
33
34	return(
35	<div>
36	<h2> Add new product </h2>
37	<div style={divStyle}>
38	/*when Submit button is pressed, the control is passed to
39	*handleSubmit method
40	*/
41	<form onSubmit={handleSubmit}>
42	<label> Title:
43	{ /On every keystroke, the handeInput method is invoked / }
44	<input type="text" onChange={(e)=>handleInput('title',e)} />
45	</label>
46
47	<label> Description:
48	<input type="text" onChange={(e)=>handleInput('description',e)} />
49	</label>
50
51	{ /* Input fields for Price and availability omitted for brevity */}
52
53	<input type="submit" value="Submit" />
54	</form>
55	</div>
56	</div>
57	)
58	}
59
60	export default AddProduct