Getting Started with React in Laravel

it was never easier to start a new LV project with react and use the Best of Both Worlds together actually you can say it's a breeze now because of LEL Breeze which is one of LEL sta kits that recently added react support so how does that work you might ask let's take a look together so here inside L Well's documentation you can find this part starter kits and as I mentioned level Breeze is one of the two main starter kits that you can have with your level installation and as you can see Breeze supports blade Live Wire but also react and View and this is what we are interested in so let's take a look so level pre offers react and view scaffolding via and inertia front and implementation so what does this mean inertia is a level package that you can install in order to use your favorite JavaScript framework like view or react and connect it to your level application in order to use all the features that level has to offer for you inside a single page application so this means you don't have to create two different applications and connect them somehow through an API nura has the power to glue those tools together all right but enough of the docs let's try it out together I'm going to create a new level application through the level installer and here we have this nice UI to do that so the name of our project will be level Breeze react we want to use level Breeze as the starter kits and as you can see here we can Define what we want to use and in our case we want to use react with inera you also got you an option to use typescript if you want to but for this demo we don't do this let's use Pest and we don't need a get REO at the end L will also ask you if you want to use a specific database and we are going to go for SQ light one here for this demo before we check out the code let's take a look at the website right now so so this is what a fresh level installation always looks like this is the welcome page but on the top right you can see here we already have links here for logging and for register and so this is what LEL Breeze comes with an authentication system for you to log in to register and to also have a little user profile but before we can use this we also need to check the code and also run our migrations so this is our level Breeze installation the first thing we're going to do is run our migrations PHP Addis and mic create and it also asks us if we want to create a new database SQ L file which we don't have yet and yes we want to do this and this now runs our migrations perfect as a result we should now be able to register and create a new user so let's try this also together register Kristoff my email address and the super secure password and here we go we're logged in you can see we are now here at the dashboard we also have here our nice little profile where we can also adapt some of our data like our name email or change the password so this also comes with lavel PR and we can of course also log out if we want to that's pretty cool already because we haven't done or we didn't have to do so much in order to get this little application that we can already work on from but of course we're here talking about react so let's take a look at how that works so the first page that we have seen was the welcome page which you will find on the fuse welcome here and this is a normal blade file but here under the JS you can see now that we also have different pages here and these are the ones that come for react so there's this new welcome file here but there's also the dashboard which we have seen before and for authentication we also got a login register page and all the pages that you need come here for react and then similarly to your normal level application with play you also got layout files here and you also got here all the different components for things to reuse in react and this all is glued together by V so let's run this as well starting here our application server and now since this is running of course we also got hot reloading so let's take a look at dashboard page and let's you change some text here you're logged in now and as you can see it already was changed here on our side as well without a refesh which of course is great for developing and now here with PR and react you got your perfect starting point for working with react and theal and from here on you can take your application to anywhere you want it to be that's how simple it is to get started with Lal and react if you haven't dried Breeze with react yet you really should so give it a try and let us know have fun

Channel: Laravel

Views: 13,240

Keywords:

Id: GTqEwJv958Q

Length: 4min 51sec (291 seconds)

Published: Thu Nov 16 2023