Admin LTE 3 Integration with React JS tutorial with Practical Example

admin lte 3 integration with react application with a practical example welcome to coding locker guys this is sankashvariyani and in today's video in next 20 minutes we will integrate this beautiful design which you can see right now to your screen the dashboard one so currently it is there are four three dashboards available to us so we will integrate this dashboard one everything the widgets the charts the uh menu items how it you know they are scrollable the uh this one so everything we will integrate now i'll do it uh with scratch but just uh an update i have already done this and you can see this is localhost 3000 my react application so you can see all the uh components wizards have been successfully integrated here so the update is either you can download this template exactly as it is from my github location i'll be sharing that link in the in the description or you can follow the step by step with me in the video i would recommend you guys to follow this tab and that is the reason where in uh in case if you are required to update anything so you should know that what changes i have done okay now let's uh start with the practical example and before we start there is one uh update that we are integrating react app with adminality that means i am assuming that you your system is already configured to create react application right such as you must already you know you must be having the npm version with yourself and if i check the node version then you should have the node sorry version as well to your system if you do not have simply you can uh download from the uh their websites okay after that i'll be using the visual studio uh code now in the visual studio code uh let me show you yeah that that is how i already done so i'll create uh maybe i'll open another visual studio code uh one thing i want to introduce here the extensions you should have the these two extensions as well to your visual studio one is this one this would help you in in creation of components with a shortcut and another one is html2jsx that would help you in converting the html into the jsx and if you are already working on a react i think you should already be having these two because they are really important okay now let me open our straps what you need these are the three things we have talked this one as well okay now let's create new application so at first you have to select the location that where do you want to create the direct application so this is the folder where i'll be creating the commands are npm install hyphens ing create react app so create react app something which i have already installed globally and after that i can create a new application react application with the help of this command so i'm running the command create react app and this is my name admin app demo press enter so i have requested this to give me a ready to use react template and i think it will take some time two or three minutes meanwhile i'm going to pause the video and i will resume once uh all is done okay this is done now just close this let's see do we have everything yes we have now again open a command and code dot this is a shortcut to open this application in visual studio code now at first i'll go to this new terminal and we'll do npm start just to see that everything is working fine for us let me pause once again okay so here we are local thousand three thousand i have paused this one uh sorry that one and now this our application right the empty one the basic react application now to integrate or start with the admin lte let's again go to the steps so this is the command we need to run npm install admin lte hyphen iphone save uh again let's go back to our location so my location is here right open your cmd and run this command the benefit of running this command it would install the admin lt all the packages which you need in the node module so i have already installed this admin lt command there are only two things which i require so let me tell you once you run this command you will get this adminality i am not running this one as of now because it will take around 15 minutes to download all the packages i already have so it says you need to copy uh the this the sorry test and the plugin folder this is the dist and the plugin folder just copy these two folders and come back to your location and in the public folder inside the public folder you need to paste these two okay so let it paste i think uh it will take some time once uh you have copied then you need to choose that which of the dashboard you want to integrate so i already uh shown you that there are three dashboards so you have to at first finalize that which dashboard do you want to use so let's use this dashboard one after that right click to your application and click on view page source so in the view page source these are the css which you need and at the bottom these are the js files which you need so where these files exist these files exist in the admin lte node module folder which you have just downloaded and the location is here so these are the files so just copy all the files is up now till here the css one and let it copy maybe and this is uh not this one this is the fresh application we have so let's open our index dot html page here we are and at the bottom just before the title paste everything after that you have to provide the perfect url as well so the url you have to add is like this sorry like this and replace not replace just append make sure you append for each csl css file and yeah that's fine next go to the bottom and copy all the js files okay so i have and these two as well yes and from here just before uh just before the body tag ends paste it here and again you know what you need to do is append this so that we have the exact path its plugins plugin and one more after that we have few more actually perfect so we have done for every file right and meanwhile i think we have these two folder copied here as well now just run a application one more time press ctrl f5 right and view page source just to make sure do we have all the js and css or not we have just added you can see we have all the js and css what we need now uh let's come back here once again and maybe let me close this one otherwise it is creating the confusion okay so i have close now let's go to this app.js and remove everything as of now and say welcome to coding locker let's see we have and meanwhile let me check what next step so we have decided which dashboard we want we have provided the difference of js files now okay welcome to coding locker that means everything we have next is you need to copy important step you need to copy these files these class name as well and paste it in the index.html where you have the body so here we have the body right good next next is you need to go to this app.js file in the app.js file this is the class wrapper right and one more thing i think you can do let me get rid of this one as well now one more thing you can do uh create one more file uh anyway new file that's it test.html you will understand now why i'm saying i'm just going to copy uh the entire thing body to this to where my body is getting close and here is the day one so that it would be easy for you to copy the content right so now we can see this is the div and this is zena so at first this is the wrapper you have to provide here and now everything would come inside this perfect next you have to create the uh js file or the components so first i'm going to create a new file which would be let's say a header component so header dot js let it create and then rcc and that is where it should work just give a sec it's loading okay we have so we have this header component so if i write here this is my header component and i just need to provide the reference import header right so we have imported the header and inside this div i will just make use of this header like this or maybe like this sorry so what i have done i have created header component and provided the ref response here and in the header this is my header so let's see do we have is yes we have this is my header component that means we have loaded our header component now uh let's create few more uh components which we decided so next we will create our what we call menu.js this would be our menu component again rcc and wait for some time press enter this is your this is menu one right now let's create another one which is uh maybe dashboard or body srcc enter this is body and last one is new file footer dot js and again rcc this is footer now all you need to do go to your app.js provide the reference of menu dashboard and footer and paste it here and next we need this help menu then dashboard and then we need footer so let's rebuild and see what we have ctrl f we should see all components perfect so we have finalized the component now next is we just need to replace our text so at first uh let's focus on header.js and let's go to this test.html so for the header we have to copy this nav so very carefully that is why i have pasted this into the test.html very carefully just copy this nav ctrl x maybe you can do this ctrl x and let's come back to this header file and paste it here once you paste it you would see there are so many errors so select all the div and click on convert html to jssx and maybe you can press ctrl kd for the formatting and now let's refresh so it is saying compile time error let it compile okay we have the header right we have the header okay we have had it with some problems we will find out in a in some time what are the problems are maybe let me refresh all fine okay all fine now next is next is menu.js so for the menu.js again come back to the test one and this is the site tag which we need to copy so go down go down go down until you find the closing tag of aside still move still we were moving okay ctrl x and paste it in the menu one perfect you already know where we need to paste and you also know that what we need to do to get rid of from these errors convert html to jsx once this is done press ctrl s and let it compile otherwise we have to see error for some time let it compile okay all done now oh perfect we have the menus as well great right now what next next is our dashboard the main one so again go to this test.html so this is the content wrapper let's see when it gets closed here so from here to here ctrl x and go to your dashboard and paste it here and again you all know what needs to be done right click convert html to jsx let it convert since there are so many number of lines it will take some time press ctrl s let it compile again there are good number of lines so it will take some time let's have some patience okay so let's refresh oh we do not need to refresh here we are we have the some sort of dashboard available and the last one is which is the footer one and for that go to html and copy this footer one that's control x go to your footer.js file and paste it here convert this one quickest one save it let it compile so once this is compiled we will have to refresh okay it is compiling it is done okay it has compiled let me press f5 as well i think you already have seen the output what is expected we have the configuration of this menu the this button the wizards the charts and the footer as well let's verify that happy okay we have completed all the steps as well so thank you uh very much guys this is pretty much uh for the react application integration of admin lt3 if you guys have any query or any doubt any anything uh you want to discuss you can always comment me and text me on my description uh also if you would like to have a look to other videos of admin id 3 integration with angular i have created a couple of videos as well where even you do not need to implement the routing as well so everything is ready to use in a template so you can have a look to those videos as well you can see uh link is on the on the on the description is available and on the card you can see those videos as well so thank you for being at cooling locker have a nice day see you in a next video

Channel: Coding Locker

Views: 22,927

Keywords: react adminlte, integrate react with adminlte3, adminlte3 install with react, reactjs and adminlte3, how to integrate adminlte3 with reactjs, integrate adminlte with react, react adminlte3 practical example, reactjs install adminlte, adminlte integration with react example, coding locker, react codinglocker, adminlte3 with reactjs example

Id: ohbF14IK6hI

Length: 17min 10sec (1030 seconds)

Published: Wed Dec 30 2020