Posted by Arjun on Friday 9th February 2018

Laravel 5.6 ReactJS Tutorial

Laravel 5.x Laravel 5.6 ReactJS

In this post, I would like to show you Laravel 5.6 project setup with React JS as frontend framework. In Laravel 5.5, Taylor Otwell introduced new frontend scaffolding via a new artisan preset command. We gonna leavrage this new preset command to generate React JS view files. Let's start....

Laravel 5.6 ReactJS Tutorial

Create Laravel Project

Create Laravel 5.6 project by issuing the Composer create-project command in your terminal:

[email protected]:/var/www/html# composer create-project laravel/laravel todo 5.6 --prefer-dist

In the above command "todo" is project name and the command will create a directory with project name and downloads all files inside it.

Serve Laravel Project

To test your project setup, move the control to your project folder and issue serve command as shown below:

[email protected]:/var/www/html# cd todo
[email protected]:/var/www/html/todo# php artisan serve
Laravel development server started: <http://127.0.0.1:8000>

Now the development server started at http://localhost:8000, you should get following output in the browser:

Laravel5.6 React Preset

After project setup just run the php artisan preset react command to swap out the Vue scaffolding with React scaffolding.

[email protected]:/var/www/html/todo# php artisan preset react
React scaffolding installed successfully.
Please run "npm install && npm run dev" to compile your fresh scaffolding.

you can find the generated files under resources»assets»js folder. Inside the components folder, you can find the example(Example.js) react component and app.js is holding react component references and the bootsrap.js file is the frontend bootstrap file.

After issuing above command, all default Mix configuration, components, and all other related files will be updated accordingly. So now let's install, dependencies by running npm install command:

[email protected]:/var/www/html/todo# npm install

npm install command will read package.json file and download all the project dependencies into node_modules folder.

Go to the resources » views » welcome.blade.php file and update with the following code.

<!doctype html>
<html lang="{{ app()->getLocale() }}">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>arjunphp.com | Laravel 5.6 with React JS</title>
        <link href="{{asset('css/app.css')}}" rel="stylesheet" type="text/css">
    </head>
    <body>
        <div id="example"></div>
        <script src="{{asset('js/app.js')}}" ></script>
    </body>
</html>

All set, now run Mix task, Mix is a configuration layer on top of Webpack.

// Run all Mix tasks...
[email protected]:/var/www/html/todo# npm run dev

The above command will compile all of our assets and put bundled javascript and css file into the public»js and public»css folders.

Lets start the development server to check the ouput,

[email protected]:/var/www/html/todo# php artisan serve
Laravel development server started: <http://127.0.0.1:8000>

If you head over to the browser with http://127.0.0.1:8000, you should get folowing output:
[caption id="attachment_5983" align="aligncenter" width="781"]Laravel 5.6 React JS[/caption]

That is it. In the next tutorial, I will show you using Material-UI React components.