Laravel 5.6 ReactJS Tutorial

Last updated on February 17, 2018

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

Create Laravel Project

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

root@arjunphp:/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:

root@arjunphp:/var/www/html# cd todo
root@arjunphp:/var/www/html/todo# php artisan serve
Laravel development server started: 

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.

root@arjunphp:/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:

root@arjunphp:/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.

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

// Run all Mix tasks...
root@arjunphp:/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,

root@arjunphp:/var/www/html/todo# php artisan serve
Laravel development server started: 

If you head over to the browser with http://127.0.0.1:8000, you should get folowing output:

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