In this blog, you will learn about binding react app in laravel 5.4. You need to follow subsequent steps to this blog.

Step 1: Install Laravel 5.4

Step 2: Install React in Laravel project

Step 3: Install Npm in laravel

Step 4: Creating JS file in laravel

Step 5: Import Js file in laravel

Step 6: Adding Required CSS/js with div tag

Step 7: Configure React in web pack of laravel

Step 8: Compile react js code

Step 9: Run Laravel project in the browser

Step 1: Install Laravel 5.4

Install laravel 5.4 in your working directory.

composer create-project --prefer-dist laravel/laravel Reactblog "5.4.*"

Step 2: Install React in Laravel development project

Install React and React dom dependency in laravel project. So you need to write following command.

React:

React Dom:

Step 3: Install Npm in laravel

Going to our project directory and install npm.

Step 4: Creating JS file in Laravel

Creating index.js file into resources/assets/js and write React Demo program.

Step 5: Import Js file in Laravel

Importing React Js file into  resources/assets/js/app.js of our Laravel project.

Step 6: Adding Required Css/Js with Div tag

Add required CSS and js file into welcome.blade.php.

Add one div to append js file content (output)

Step 7: Configure React in webpack of laravel

This is the configuration file where you declare how your assets should be compiled. Open webpack.mix.js  and Replace mix.js(‘resources/assets/js/app.js’, ‘public/js’); with

mix.react(‘resources/assets/js/app.js’, ‘public/js’);

Finally, It will look like these.

Step 8: Compile react js code

To compile code run command sudo npm run dev

 

Step 9: Run Laravel project in Browser

The output will be shown in the browser.

Thank you.

Happy Coding.