(06) Install React in Laravel with Vite | Vite with React and Laravel

hello everyone welcome to the another episode of wheat in the laravel so today in this video i'm going to install the wheat into the react.js in laravel application so basically i'm going to build the spa with the laravel and i'm going to install this wheat for the asset bundling so basically wheat is a is it bundler for the sps and for the website and it's a new edit in the larval 9 and i'm going to install this into the level 9 project okay so let's get started so this is the reject and this one is uh not completely described that how to install this into the react vs so that's why i came with this blog and this blog is written by this lara info.com and they are writing very well blog and i'm impressed with them and i want to say thank you for writing these blogs and now i'm going to install this into our application so first you need to create your project and then you need to install react.js into your application so first let's install the project and i have installed this project here create project and i name this wait with the react and laravel and it's installed successfully and then i change the directory and came into this project and here i'm going to install this so react oops let me uh copy it correctly let's edit the white space that's why it's so paving like this okay let's add this paste install and it's going to install that yet let react the latest version for us okay so react.js is installed and next command is you need to add this react okay you need to add this for uh plug-in for the react so this is the react plug-in which is added by the wheat and oh if this command is not going to work so you can add the force flag with this command and it will force this to install this plug-in right and if it works we don't need to add this force flag okay by default these are the disabled okay and then you need to make changes into the read.config.js so let me open this into the vs code so here i'm going to open a new window okay so i have opened this project into my vs code so let's close this out and let's take eye on this terminal and yes this plugin is installed successfully so let's go to the top and yes this step is also done because we don't need this force flag if it's not required okay and then you need to add this so here you need to before this it's look like this your configuration file so now let's move to the config file so if you you know take ion this down uh wait uh so by default in the previous version it contained the webpack.mix.js file so now it's replaced with this so we dot config dot yes and by default it's containing this code so basically what it's doing is loading the configuration loading the wheat plugin and then here it's loading all of the css and gs file to this resource directory and this refresh property is used for refreshing our web page without any we don't need to do this it will automatically refresh the webpage and if you don't want to do this so you can return this fault like this and it will not going to auto reload okay so here we need to add this react right like we added this in the view js tutorial so if you are not in love with this one how to add this into the view gs so you can watch my previous video where i completely explained that how to add this into the view gs application so i added the name space at the top and here you need to add the call this react okay and uh you need to add this into the plugin here because this is the react is also a plugin so save this one basically it's a framework but uh it's behaving like uh it's behaving like a plug-in we are calling this plug-in right so here we added this plug-in react and we are calling this here okay and next we need to add this blade directive into your app so we need to add them you can add them later but let me do this okay so basically we are going to open our welcome blade file which comes with the by default with the level i'm going to remove the basic stuff from there okay for simplistic and then also remove this so oops why my texture is slowed down so let's remove this body tag here i'm going to add the body here okay my text feature please just me [Applause] okay it's not to suggesting which i'm going to add this by manually boring okay and then here you need to add to your div which contain the id of app right so it's not adding so let me add this myself okay and then here you need to call this id of app because we are going to render this into this app id right so basically we are going to build an instance of this react application and then we are going to do this okay so let's save this one and uh let's come back here and here you need to go to your gs directory and you need to create this stuff like this right but if you this is one is mentioned that you need to go to your page and then create this home.csx but i'm not going to go to this page directly i'm going to do this without any page so you can add this using page so here you need to call this so um oops let me make this home.jsx okay it's used for javascript so you can add this here home.esx okay and then you need to call this app.jsx so i need to create one more file so here i'm going to create this in the app after to jsx which is javascript extension and in the app.jsx you need to add this stuff okay so now let's go here and paste this out right okay so we don't need this so css so let's remain this bootstrap okay and then this one is remove this page because we are not we did not add this into the page and it's creating the app instances and it's rendering the home and what home is doing so let's go to this home blade and here let's copy the home stuff so this one is home.gx so let's copy this basically we are exporting another view okay and then npm run dev right so now let's go here and run this out so basically it's going to compile your file compile your files and then it's going to instantly watching into your files when you are changing something it will be automatically refreshed on the web browser so you don't need to manually refresh your web page so basically it's similar like npm run watch which we are using this in our in our project for webpack okay so let me go to the project and i'm going to open one more terminal because we need to run our server and we can't stop this how to in the previous view gs lecture i told you that you don't need to stop this out because your newer changes will not be affected and if you made any changes it will not affect it on the web browser or there are two ways the first one is you need to run this for the development purposes like this and if you want to make this for the production you don't want to run this out every time so then your project is complete so then you need to run npm run build and it will compile your all files and add them into the build directory and then you don't need to run this like this okay so run hit php rts and serve here okay php rd sensor and now let's go back and open this out to localhost to 8000 also take eye on this it's loaded no it's not open this out it's chrome is refreshing this webpage and i faced many issues that when i open this out like this and mainly enter it very quickly and it will refresh this and my value are lost values are lost so please chrome i want to say google please improve this thing okay okay now our server is sorted and it's displaying nothing so i already told you that if something is went wrong so you need to go to your console open the console and then view it in your console this will be display all of the error because we are playing with the javascript okay so there is no error so now let's get refresh again and take eye on this and what's going wrong so we'll fix this out okay laravel with no errors so let's go here here we are rendering this out so let me close this out here i have added this hmm okay yes let me close this out and if i go here and oh i forgot to add the mix file here so we need to add this mix file here so let's go here and go to the top and this one so you need to add this react refresh for refresh your web browser automatically and then you need to add it for the again okay so now let's save this one and this will be let's manually refresh it and then we will do this with this hot reload feature okay and yes it's going to execute this out because it is telling that one one one so it's mean that it's executing our view and yes now it's rendered this level 9 weight with react js so it means that our we are successfully rendering this through beat so how you can make sure that we are rendering it to through beat so just press ctrl u or you can click on this view page resource click on right click and click on this view page resource so this will open your code into the next tab and here you can check that this is running through this white client a wheat client because this one is supported by this weight and this will be loading now weight files right so we don't need to do anything and one more question arrives here that how you can add the custom file into this view into this react.js so for example these files are this one is loading from let me go to the go to the bottom and this one contain the wii.config.js so this one is basically loading f dot to css and f.js so we removed this web.css and now it's loading app.js only so now question arrives that how we can render our custom files so if for example i want to apply some style on it so how i can write the custom style and recompile them so let's go here go to this resources css and in the css i'm going to create a new file here i'm going to name this so test dot to css and in the test here i'm going to write that to pera okay and i want to change its color i want to make this red save this one and here we need to uh import this file right not here we need to add this into the jsx file so m.jsx and here i need to add this file right so i'm going to import this out import and what's the directory of this one so it's located in the css slash f dot css save this one okay so now we are loading this app.css and i want to apply some thing on this paragraph so this paragraph is basically rendering here in this from this home blade so now let's go to this home okay this one is a component not blade okay this one is a home component and this one is rendering this heading and this handling heading is rendered by this dev heading so now let's go here and i want to assign this para id to this one so write pera okay save this one and uh now if i go here and now it's so i save this and it's automatically refreshing our web page right and it says that to fail to import to dot css slash app.css which means that our css file is not properly added so we need to import it properly okay so let's say that cssf dot i need to add this test.css oh my god so here let's go back and i want to make this so test2.css so now let's come back here let's take eye on this it's going to change its color from black to red and yes there is no error but there is an error uh css test from okay let me view it here so we are in the js and i want to end this with css test.css and here if i go here i need to add this double because my file exist not exist in this js directory so i need to go back so i need to add this double uh double dot and then this will redirect me to to the out of this folder and into this resources so then i can go to this css okay then css and i can locate this test.css so now let's save this one and it will automatically refreshing the web browser and hope it's going to work if it is not we will fix this issue no problem okay no error and and yes now it's working that level 9 right with the react.js and it's successfully changed the color so in this way you can add multiple files into your config file like here so you can add the css or your js files and you don't need to do anything so this will automatically load your all of the files from this app.jsx so you don't need to add them all so it will execute your all of the files if you added 10 files in the wait so it will load the 10 files so hope you get an idea that how you can compile your files in the react.js laravel using wheat and if you want to learn more about that how you can install this into the uh into the react js application with the breeze installation so let's take eye on another plane and another video so i will meet you in the next ones and uh also one more thing please subscribe the youtube channel if you like this video please subscribe the youtube channel and stay connected bye

Channel: Career Development Lab

Views: 6,258

Keywords: career development lab, cdl, web development, learn web development, full stack development, back end development, web dev, app development, website application development, react in laravel with vite, react js in laravel with vite, vite in react and laravel, vite in laravel react, install react in laravel with vite, vite in laravel, how to install react with vite

Id: zYtKjZLnzmU

Length: 15min 59sec (959 seconds)

Published: Mon Jul 25 2022