How to create React JS pages and use Laravel 9 routing with Inertia JS and TypeScript

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

Channel: Coding with Pixel Fix

Views: 7,458

Keywords: how to install laravel and react, how to install laravel 8, install react in laravel 8, how to install laravel and typescript, how to install react and typescript, laravel, typescript, inertia, react and laravel, laravel and react, laravel and typescript, react and typescript, laravel and inertia, laravel and react js tutorial, laravel and react js, laravel and react setup, laravel and react project, react js, inertia js, react, install laravel, install react, install typescript

Id: _B55cslTOpI

Length: 6min 12sec (372 seconds)

Published: Sun May 22 2022