hey guys welcome back in this video i'm going to show you how laravel inertia and react works
together in the same application we'll be creating new pages and setting up routes for
these pages we will also be looking at how you can send variables from your laravel back-end
and receive them as props in your react front end in the previous episode we installed laravel
with inertia react and typescript if you're not sure how to do that i'll leave a link in the
description to that video so you can check it out as well now if we look at our routes file
you can see that we've got a simple get route to the root location and if you use laravel with
the blade engine you would simply return a view method and the first parameter would be the name
of the view you want to display now with inertia this is very similar so instead of returning the
view we would return the inertia class calling the static render method and then pass in the name of
our view we want to display okay so we can remove this line save it and refresh and we still have
our welcome page okay so by default your views or your pages needs to live in the resources
js pages folder as you can see this welcome view is the welcome page we see currently on the screen
and because this is the default location we don't need to call the whole path when we call the
view inside our inertia render method we can however change the default location if you go
into your app.tsx file which is the default entry point for your react application by changing the
require statement inside the create inertia app okay so as an example let's change this pages
to views and then our pages folder we renamed that to views as well let's refresh our browser to see
if our welcome page still shows up and so it does that's how you can change the default location
of your pages or views folder okay so let's create a new page now inside our pages folder
let's create a folder called users and then inside our users we're going to create a new view
or a new page called index this is where we're going to display all the users in our system
and we call it index because we want to follow the crud naming conventions okay so let's go ahead and
create our react component and we call it constant index because that's what our component name is
going to be it's going to be an arrow function that returns a fragment that displays user's
index page and because we're using typescript we should also type in our component as being a react
functional component and depending on the react version you use you might need to import react
at the top now the last thing we need to do is to export the component and because this is a page
you need to export it as the default export for this file now you might have noticed by default
the tab spaces in the react side of the application is four instead of two now you can
change that in your editor config file by adding the extensions and then saying your indent size
should be two okay so now if we save this file go back to our index you can see the
tab spaces is now two instead of four so let's just fix up our code okay so let's create a route
for a new page and we create a simple get route to the users path and return the inertia render
method with the users slash index view now we call it the user index because this is the folder that
we're calling and this is the file inside the users folder we don't need to call the pages
folder because that is our default we only need to specify the users folder and then the index file
inside the users folder okay so let's go ahead and call that route so we just go to forward slash
users and it should show our user's index page which it does using next page meaning that our
routing and our page is working correctly okay so before we move on to the last section if you like
this video please give it a thumbs up also if you haven't subscribed yet please consider doing it
now and also remember to turn on notifications so you don't miss out when i upload more content like
this okay so now in the last section i'm going to show you how you can send variables from your
laravel backend and receive them as react props in your front end now similar to sending variables in
a blade view to the front end you would also use the second parameter in your inertia render method
to send your variables to the front end okay so as an example we're going to send the name variable
as dan and then the company as coding with pixelfix to the front name okay so now if we
go back to our user index page in our component we need to receive the props as the properties that's
been sent from the backend and let's go ahead and print out our properties like this we can
access it via props.name and props.company because that is what we called it when we sent it from
the laravel backend okay now as you can see the name and the company has got red squiggly lines
underneath it this is because of typescript which we will fix up in a sec okay so if we go to our
web and refresh we should see the name and company being printed out now and there we go name dan
and company coding with pixelfix okay so let's go ahead and quickly fix up our typescript issue
what we do is we create a simple interface called i index props and then we say that we expect
it to have a name property of type string and a company property of type string as
well then in our definition we say we specify that our functional component
should be of type i index props and now as you can see the red squiggly lines disappeared meaning the
typescript is happy and now if we go over to our web and refresh everything should still
be working the same and there we go all the information is still being printed out and
that's it for this episode guys thank you so much for watching and see you in the next one