Google+
Shineyrock web design & consultancy

Shineyrock

blog

  • dislike -4 22

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

    Final product imageFinal product imageFinal 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.

    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.

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

    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

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

    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 productsScreenshot of the React Application - List of all productsScreenshot 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:

    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

    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 productsScreenshot of the React Application - List of all productsScreenshot 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

    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

    resources/assets/js/component/Product.js

    The application should look something like this now:

    Screenshot of the React application with product details displayedScreenshot of the React application with product details displayedScreenshot 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

    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:

    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.

    And here's the final version of the application:

    Screenshot of the final version of the applicationScreenshot of the final version of the applicationScreenshot 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

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

    martijn broeders

    founder/ strategic creative at shineyrock web design & consultancy
    e-mail: .(JavaScript must be enabled to view this email address)
    phone: 434 210 0245

By - category

    By - date