LaravelAndReact-BuildingReactApplicationFinalProduct

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. 

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.

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

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

resources/assets/js/app.js

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:

Laravel and React running together
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

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. 

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

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

resources/assets/js/component/Product.js

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

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. 

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:

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

Logic for Updating an Existing 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.

Powered by WPeMatico

No comments so far.

Leave a Reply

Your email address will not be published. Website Field Is Optional

MESSAGEMESSAGE
Your NameYour Name
EmailEmail
WEBSITEWEBSITE