Reactive applications are a big part of the web world, that's why it is necessary to use the latest technologies to deploy. Laravel had integrated a Scaffolding to deploy React JS since version 5.5. In this tutorial, we’ll learn how to integrate React and Laravel.
Actually, it is really simple so let's start it!
To create a new project in Laravel, the first thing we've to do is download the Laravel installer using Composer:
$ composer global require laravel/installer
If you don't have composer installed please go to: https://dev.to/lvtdeveloper/installing-virtual-environment-with-laravel-homestead-tutorial-4p32
In this article I explain how to do it so check it out.
The first command to create our project is "laravel new" followed by the name we want to assign to the project. For instance, "laravel new dutylist" will create a directory named dutylist that contains a new Laravel installation with all of dependencies already installed.
$ laravel new dutylist
Once that’s is done enter to the new directory with the command:
Using React in a Laravel
We need to change the default Vue.js scaffolding to React.js with the following command:
Now you can see that Laravel create a react component in the file Example.js located in the resources/js/components directory:
When we install a dependency with npm install, a node_modules directory is automatically generated where the installed packages are saved. Also it is generate a package-lock.json file who is responsible for keeping track of the changes made within node_modules or when changes are made to the file package.json
And now we start the app with the command:
Open the browser in the path "http://localhost:8000" and you can see the default view by Laravel
Let's change this view for a view using react.
Create an index.js file inside the resources/js/components directory
Copy all the content from the Example.js file to the index.js and make some changes:
Inside the app.js we add the new component
In order to render any element into the Browser DOM, we need to have a container or root DOM element. In this case will beand everything inside it will be managed by React DOM. This change will be inside the welcome.blade.php located in the resources/views
And now we have a Laravel app using react.js
Thanks for reading!
Have a nice day, coders💜
Top comments (36)
Just wanted to say that in Laravel ^7.x to set your environment ready for a React development you should run
Thanks for the post! It was really useful ;) !
This video talks about another way to integrate with React and Laravel
is csrf configuration needed? because I have error with that, thanks
Please, add this to your welcome.blabe file:
now i have many problem in your article.
if you can teach me, please help me.
how are you?
i am yoshida from japan.
can you explain in detail for me?
Please, add this to your welcome.blabe file:
i made laravel and react project.
but there is an bug.
if i click button, page is working well.
but if i refresh page, it is not working.
"don't found page"
I think it happends because route manage.
so if i refresh page, project find this route in web.php in laravel.
But there isn't this route there.
because it is react route.
I think you can understand my explain because you are react and laravel developer.
So how i can fix this issue?
need help, Command "preset" is not defined. when i run php artisan preset react
You've probably fixed this but for others with the same problem, the preset command was removed in Laravel 7, you will now want to use
composer require laravel/ui
php artisan ui react
auth and some other guys are here now too
But documentation still shows php artisan preset react command !
first of all, thanks for article.
i got situation,
what if we want to use react in deployed project?
i mean that application is not new & clean.
cause i tested and nothing happens!
It may be a caché problem.
php artisan cache:clear
php artisan view:clear
Hi, do you have deployed this app? cause im trying with mine and nothing happens!
im using cpanel to deploy the project and it doesn't work!
Best and easy solution to get started.
Hey, Thanks. :)
:3 thanks to you
Amazing! Thanks :)
This is so helpful. Thanks!
Thanks to you :)
Amazing job, so clear, thank you so much for you time and share your knowledge, and also you're so beauty ^^
Thanks for this useful article
Guys tell me your opinion on should I use laravel react scaffolding or a separate react ui for frontend?
How can you pass props to the component?
Thanks for sharing these nice articles!!