Installing Inertia - React in Laravel Project

First, we will perform server-side installation and then continue with the client-side installation.

Run the command below to install the Inertia package in your project via composer:

Create a new file, app.blade.php in resources/views and paste the below code. This file will be loaded on the first page visit. This will be used to load your site assets (CSS and JavaScript), and will also contain a root <div> to boot your JavaScript application in.

Next, setup the inertia middleware. Run the below command to do the same.

Once generated, register the HandleInertiaRequests middleware in your App\Http\Kernel, as the last item in your web middleware group.

Next, we will perform the client-side installation.

Install the Inertia client-side adapters using NPM or Yarn.

Next, update your main JavaScript file app.js in resources/js/app.js. If you have existing app.js in that folder, rename the old file, create a new app.js, and write the below code in that file. What we're doing here is initializing the client-side framework with the base Inertia component.

Run the below commands to install the babel plugins:

Next, create a new file `.babelrc` in your project and add the following code.

Now, create a new Test.js component in `resources/js/Pages` for testing if our integration is successful.

To render the component, make TestController and add a new route in web.php.

Try to call the route project_url/test, and your inertia with React in Laravel integration is done.
Hope you found this article helpful.