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

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 laravel/ui Composer package and use it to create a React scaffolding:

composer require laravel/ui<br>php artisan ui react<br><br>// Generate login & registration scaffolding...<br>php artisan ui react --auth<br>

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 useState and dependencies field, replace the existing react-dom fields with the following ones:

composer require laravel/ui<br>php artisan ui react<br><br>// Generate login & registration scaffolding...<br>php artisan ui react --auth<br>

Next, run useEffect will execute. Inside it, we use 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.

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 Main component. The Main component, which is the parent, passes a function reference as props. The child component, Main component, we shall declare 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.

The above is the detailed content of Build a React App With a Laravel Back End: Part 2, React. For more information, please follow other related articles on the PHP Chinese website!