loading...
Cover image for How using React in a Laravel application - Tutorial

Laravel React How using React in a Laravel application - Tutorial

lvtdeveloper profile image Lesly Villalobos Updated on ・3 min read

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!

Installing Laravel

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:

$cd dutylist

Using React in a Laravel

By default, Laravel applications contain an ExampleComponent.vue Vue component located in the resources/js/components directory. The ExampleComponent.vue file is an example of a single file Vue component which defines its JavaScript and HTML template in the same file. Single file components provide a very convenient approach to building JavaScript driven applications. The example component is registered in your app.js file:

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:

Run the command "npm install" to install all the javascript packages necessary for our project.

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 be

and everything inside it will be managed by React DOM. This change will be inside the welcome.blade.php located in the resources/views

To show a view through React JS, we need to compile JavaScript files using Laravel Mix with the "npm run dev" command:

And now we have a Laravel app using react.js

Thanks for reading!
Have a nice day, coders💜

Discussion

pic
Editor guide
Collapse
maximruslan profile image
BlueBamboo

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?
Thanks.

Collapse
lucasca95 profile image
Lucas Camino

Hello, everyone!
Just wanted to say that in Laravel ^7.x to set your environment ready for a React development you should run

 composer require laravel/ui
 php artisan ui react
Enter fullscreen mode Exit fullscreen mode

Thanks for the post! It was really useful ;) !

Collapse
khyn profile image
Khyn Harold Jay Antoque

Amazing! Thanks :)

Collapse
lvtdeveloper profile image
Collapse
arbazargani profile image
Alireza Bazargani

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!

Collapse
lvtdeveloper profile image
Lesly Villalobos Author

It may be a caché problem.
Try this:

php artisan cache:clear
php artisan view:clear

Collapse
josealex27 profile image
joseAlex27

Hi, do you have deployed this app? cause im trying with mine and nothing happens!
thanks!

Collapse
josealex27 profile image
joseAlex27

im using cpanel to deploy the project and it doesn't work!

Collapse
vishnu8742 profile image
Vishnu Vardhan Reddy

Hey, Thanks. :)

Collapse
lvtdeveloper profile image
Lesly Villalobos Author

:3 thanks to you

Collapse
hominini profile image
Byron Pérez

is csrf configuration needed? because I have error with that, thanks

Collapse
lvtdeveloper profile image
Lesly Villalobos Author

Please, add this to your welcome.blabe file:

Collapse
lvtdeveloper profile image
Lesly Villalobos Author

Please, add this to your welcome.blabe file:
thepracticaldev.s3.amazonaws.com/i...

Collapse
yoyooo profile image
yoyooo

This is so helpful. Thanks!

Collapse
lvtdeveloper profile image
Lesly Villalobos Author

Thanks to you :)

Collapse
lossez profile image
Rayha

need help, Command "preset" is not defined. when i run php artisan preset react

Collapse
cliffchristianson profile image
cliffchristianson

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

Collapse
rohitsuthar profile image
Rohit Suthar

Thanks for sharing these nice articles!!

Collapse
picwellwisher12pk profile image
Amir Hameed

thanks

Collapse
jorge170909 profile image
jorge170909

Hi Lesly, thanks!. Do you know how can I use Typescript instead JS files?

Collapse
galih56 profile image
Galih indra

This is a great article.

How to install redux or any packages?

and also how to deploy mono react+laravel if my server doesn't have node.js like cpanel?

Collapse
vsfarooqkhan profile image
Farooq khan

Is that npm run dev required for every time

Collapse
lvtdeveloper profile image
Lesly Villalobos Author

You can use "npm run watch" instead of "npm run dev" because that run scripts from package.json when files change.

Collapse
zebedeu profile image
Marcio Zebedeu

thank you

Collapse
arahman1783 profile image
Abdelrahman Elhussini

Thanks for this useful article

Collapse
lftroya profile image
LFTroya

How can you pass props to the component?

Collapse
vsfarooqkhan profile image
Farooq khan

I'm facing an error while sending the csrf_token() to react js . I have a seperate react js code which included inside blade file . How can I send the csrf_token to controller via axios ?

Collapse
babarkhann profile image
Babar Khan

Can we use React well as Vue with Laravel?