Integrating a bootstrap template into a React app

all right hello everyone this is react uh course uh assignment number two i just want to make a clarification here because the template used for the assignment is no longer the same as before so if you watch the video if you follow along you'll see that the um demo well the theme that they used had a directory called a vendor and that's no longer the case because they updated their um you know templates so again if you go here you know what is here we'll get a lot of free templates and you are more than welcome to use any templates of your choice okay the one i i'm using for this course and for the videos throughout the course is from this link here so if you click that it's going to take you here right and all i'm um i'm gonna use is basically the the layout um the navigation and the footer down here okay and so when you download the free download hit link here you're gonna get a zip file and we're going to do is you unzip the file to your computer so i unzip it to the desktop as you can see here okay if you open it up you notice that there's no vendor folder as you know you might see in the other video so in the older template there's a there's a template video and there's a vendor folder that has some assets in there but now they changed a little bit so there's no vendor anymore which is fine because they just basically you know change a few things in the html so here's is we're going to do so we're going to go here and so the react is running already okay so we're going to go to the source code here and so right in here in the public directory right you just basically drop those files in here so let me go back and show you the file you can see i'm just going to basically drop drag and drop this in here but you want to be careful because you don't want to overwrite this html in here right so this index is the one that we are using let me open here this is the react um template so you you know you can move all these comments out and a little bit messy but you don't really need all these comments it just makes your code hard to read okay so this is the index for the react and i want to do is move all these in there but i don't want to replace the html index so you can replace it or rename it to something like index two or whatever something else okay then all you have to do is drag all of these and then i'm highlighting on all of them and drag it into the public folder so make sure that public folder is highlighted as you can see in blue and then let go okay so you can see that the assets css and js are included now these are part of the template that is needed for the index 2 which is this file here right so this one here just make sure you if you run it like if you run from here and uh let's see if this works you're going to see the output yeah see as you can see look just like the other one okay it's coming from my local server but you see that this is the one that we want you want to you want to grab just the navigation and the footer okay and so just make sure you also include the css and javascripts and the other stuff okay so i'm going to apply that to this react application back in here and the things that you need and um so basically this is the one that we are using i'm going to move over some stuff so i need to move the css from this index to okay so basically copy these two links here copy that and go over here and paste it right below the title you know just exactly whether they have over here right so this is a title for the site and the links are right below that okay so i need that and this is the navigation right here from here to here is navigation so again just highlight all of these here copy that move it over over here to the react file and you can put it right for now to get you started you can put it right above here that that's fine but right here okay so it's above the div i root here and then the footer goes down here so you go back here we're going to skip all of these content we don't need all these here so go all the way to the bottom and the foot area so basically copy everything the footer part copy and paste it right in here and then that's it okay everything is already in here and the reason why you don't see the vendor anymore because they use a cdn okay where we have the bootstrap everything's coming from the cdn as opposed to coming from the vendor folder so that's the only difference i think the the rest are just description so these scripts are coming from the js folder this is from the uh cdn now as opposed to the vendor so that's why they've been with the vendor um and then up here again css is coming from the css folder and so forth that says adjust the logo and right click and then go and clean up the um the document it's a little bit nicer uh okay whatever come on okay there you go clean up and save that file all right and it can collapse this you can see a little bit better so here's the navigation on the top the footer on the bottom and the script i need to run on the bottom as well and save that go open the file and you will see that now it's you know integrated okay and now of course this is not part of the react component but that's for you to complete in the assignment so that's what you need to do for this part right if you have any questions please let me know

Channel: Christian Hur

Views: 7,444

Keywords: learn to code step by step, html template to react, html to react, how to convert html theme in react js, convert html to react js, bootstrap to react, html template to reactjs, react js tutorial, react js for beginners, bootstrap to react js, add bootstrap to react, adding bootstrap to react js, add bootstrap to react js, how to use bootstrap in react, import bootstrap to react, convert bootstrap template to react, convert any bootstrap or html template to react js project

Id: c_3Hb-NxfuE

Length: 5min 50sec (350 seconds)

Published: Fri Sep 16 2022