Laravel 5.6 ReactJS Tutorial

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:

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:

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.

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:

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.

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,

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

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

I hope you like this Post, Please feel free to comment below, your suggestion and problems if you face - we are here to solve your problems.

Arjun
I am Arjun from Hyderabad (India). I have been working as a software engineer from last 7+ years, and its my passion to learn new things and implement them as a practice. Aside from work, I likes gardening and spending time with pets.
DMCA.com Protection Status