Build a Website with React, React-Bootstrap and React-Router

[Applause] hey everybody Bryce here from Co life dot IO and today we're going to be building a simple website as you can probably see here we have our home page we have about which that's not me these are some pictures I found and we'll say a news page so it's a little kind of two column laying out nothing crazy but what we're gonna be doing here specifically is we're going to be using react bootstrap so I have another tutorial out there where I use react to build a simple web page that's pretty similar but I use just plain old vanilla bootstrap or bootstrap version version 4 but here we're gonna use react bootstrap which is actually a re-implementation of bootstrap 3 kind of all the jquery stuff you can see in documentation stuff like if we go to layout you actually use these components they've made everything into a component instead of using classes you really just use these and then your class names there's kind of toggle certain features on and off but most of it's done through props so you'll pass these properties into the component like this here that will trigger kind of set the values instead of using classes so it's a little bit different all the pictures you're gonna see I got them from this website called pixels calm so here's a picture taken by Stephan thank you for the picture Stephan you can see all the people here I just typed in person there's a search and then I came over here and I cropped my pictures with crapola which is pretty cool it'll actually figure out the best composition for you if you use this crapola setting and you can pick cover you could pick you know if it was a Facebook photo certain ratios 69 big small center it whatever you want to do even recognize and try to find the face and the best position for the face pretty cool then all the text on the page I just used it Bob Ross lisps boom lips um dot-com and it's pretty awesome you generate paragraphs here say how many quotes per paragraph and you can even tell it to spit out paragraph tags for you so I use that to kind of fill in the text so let's go ahead and jump in and get started let's head over to our terminal and we're gonna use create react app like you've seen me using my other videos yeah we call it react bootstrap also go ahead and generate a new react app for us this is probably the fastest and easiest way to do this highly recommend it so it's going to go ahead and fetch all our dependencies all right it's got some instructions yarn start to start the dev server yarn build to build it all the static files for production which you then can go and put on a server and run them so let's go ahead and actually want to open up visual studio code perfect Oh actually I want to close that real quick and a CD into the directory first then open it up you all right there we go now we're looking good so we got this public directory here I'm gonna go ahead and create a assets directory so we're gonna store all our pictures so we grab those actually right now you know just these are the ones I cropped earlier drop them in there perfect so you got all our pictures source here we have a PJs great so let's head over to you react bootstrap and if we go up here we good documentation getting started I'll tell you what you need to install so we're using yarn so this command will be a little different here but definitely want this react bootstrap let's go back over our terminal and we'll type yarn add react bootstrap we also want react router Dom for our navigation so what those install great so now you should be able to run yarn start in see our site in action perfect so this is kind of what you get out of the box there's nothing to it just yet because we still need to use bootstrap here so just a note this is bootstrap 3 version 4 they got a they're working on it right now so then it says you gotta grab this here perfect and let's go over to our code and we're going to go to the index.html and we'll just paste that in there make sure it's indented properly with the tab save that perfect so that should be good so we take another look so the fonts a little different looking good so far so now let's actually go here and let's rename this to JSX that way we'll get some auto completion in here flavor things still working dupe can't find it I think we just need to restart our server here so you just press up on the directional pad go to the last command hopefully now it'll actually find it great so nobody there I just need to restart the server and let's go ahead next let's see go ahead and create a few components so I'm going to create a new directory here call it components and inside of components we want to create a couple of new files so let's say about JSX say about dot CSS say call it news the JSX news dot CSS and I want a home page let's call it home JSX also I have oops home dot CSS and we are going to have a custom navbar JSX perfect so let's close this up here it's a little more readable and fig or two each one of these components here let's start with home actually that's probably the best one to do and for the opponent oops so type home so we import react and component from react that's all looking good so now I need a couple more imports here and we're going to import link from the react router library react router Dom specifically for web and we're going to import I'll say the Jumbo can't smell oh they're jumbotron the grid item row column image and finally button from react bootstrap so you notice these are all the components essentially that normally would be CSS classes and we want to import finally our home dot CSS great so now in here I'm actually going to wrap this in a grid so grid essentially is like your container and normal CSS classes then we also want to have the jumbotron let me close that great yeah we want to each to in here that says welcome to code life put dot IO and paragraph tag will say this is how to build a website wait a three-act react router and react bootstrap perfect and let's put a link in there and what you do is you put two and you put the URL you want to give you so this will create basically like an anchor tag for the a tag it's probably not and so inside of there we want to put a button so this is a property type here so let's call BS style and you can set the style of the button so there's like primary secondary danger or warning and a couple others they're kind of default bootstrap classes here he passes as props so it's a little different and you want to say it's going to learn more let's make it since we're going about Paige I'll just say about that's getting slash button so that's what I'm going to do for now on that page about JSX we'll say and for news be the same thing and our custom navbar we'll get to in a second so let's go over to app JSX so this is kind of our entry point and then this gets ends up getting included into index J s where we use react time dot render so it renders the app component into the root div which if you see in UNIX that HTML basically have a single div on the page that our entire app gets rendered into so that's how it works so back over to app J s JSX and from here we can get rid of this logo don't need that anymore we can keep the CSS and we're going to import browser router as a router and we want route from react router down then we'll import call it home from components slash home and pour it about from kind of same thing components slash about you know finally news from components slash News easy enough so that we're gonna get most of this here actually all of it don't place over the router this is how you make your pages we're out here and we'll put a div in there just cuz I think we're gonna need it otherwise it's gonna complain they're an error you can try it out but pretty sure you're gonna have some problems so then we define our routes here we'll say exact path equals just a slash so that'd be our route you know they don't put anything in you just go straight to our website and the component property we will set to you home we copy this here so in these ones we do not want exact they're about news and the component will set as a property will be about and so instead of using double quotes here am I using these curly braces because everything that's getting rendered between here is actually JavaScript so because we're using a variable we want to use curly braces rather than setting it as a string with these two quotes so if we do that we'll get to that they're not used but we'll get to it so that looks pretty good oops also a bug on that page there back to home JSX yeah there we go looks pretty good so I go to slash about about page news so it works it's not ideal looks kind of ugly but we can fix that so let's go actually let's work on our custom navbar next here and would be the same thing and let's type in custom navbar and from bootstrap we need to import a few things so a navbar nav nav item from react bootstrap anyone import link from import strong import link from react better down there we go great so now here we'll get rid of this yeah we put navbar default collapse on select I just literally got this right off the react bootstrap page if you're unsure how to do this or wondering where I got it from literally go there and copy it I'm just modifying it just a little bit so now we could say nav bar dot header now bard brand and here we can use our link to since this will be our brand for the site and you could put a picture here I'm just going to use some text right now oops I'm just going to copy these guys here there we go and actually between oh I am mixed up here in between these two we actually want now bar dot toggle whistle collapse it down when we're on a smaller device and then we finally want now bar dot collapse and now we will put in our nav items here so nav and will say pull right in our nav items event key equals one because they want a unique key for each nav item here so we'll actually specify that number and we'll say component class equals link href to whose and will say home and I'll be the text so this part actually had to look up here because the code you'll copy off react new trap site probably just have you do hrf but if you do that then you're not gonna leverage the react router so I wonder if we can even get away with out the href may still be valid so I'm just going to go ahead and copy this save some time call it about news myth out of to another three let's try that out we're not gonna see it because we haven't included it yet so that should be it so we go back over to app app JSX from here we can add our navbar let me import it custom navbar and here we'll just put navbar great so something exact colors we want so we can actually do let's do a new file here and we'll say custom navbar dot CSS and save time I'm just gonna paste the CSS in there where'd it get so I just went through and overrode a couple of properties there so you can find them if you just right-click on this item here I'll pull it up and you'll be like okay then just copy this code including oops you get the point yeah just copy that then you can go and change the color paste in your CSS change the color it's that easy and so you just have to find kind of the react bootstraps a little tricky bootstrap in general has a lot of kind of hidden property so you may have to actually change the color of a few things as you can see by thirty-nine lines of code there so I get rid of the border radius no border sort of background image is none we're setting the color to white for most of the stuff and then setting a background color on it so I need to actually include that in my custom navbar there we go so that's looking pretty good I think we have some styles an app that CSS going to get rid of we're not using any of these here great so now if we go over to home and we see where we left off so me I was a button drop in my CSS for now on home so we can see it coming alive here so the jumbotron I just set up some margin on the bottom to get a little space same on a class I'm gonna call personal wrapper profile pics we're gonna make them half the width those are the three circle images you saw and then we're going to override some colors and change our h3 heading tags to have a margin bottom on one so let's go over it and write that code so we go to home so after the link here so I think that link need to be inside the Jumbotron tag yep there we go that's looking better it's not down below there do your row and we'll say a class name because you can't say class because class is a protected word or reserved word in JavaScript so we'll say show grid and text Center and then inside of a rose we put columns just like we do a normal bootstrap but here we pass some properties and we want to say we want 12 12 out of 12 grid sections taken up by this on extra small screen so it'll be full with small screens we only want to be for the way it breaks the page up into thirds and this is where we'll give a class name of person rapper Mina aside here instead of using an image tag like you normally would and saying source equals actually use the bootstrap version and we're just gonna say assets slash person 1 dot jpg and we're gonna use the circle property and let's go to class name of profile pic perfect and to save some time I'm just going to paste in some text I have for this so I just creating h3 tag and [Music] that we should go to close our column tag and when we close the roof right now so we can take a look at that great so it looks a little big that's okay we'll get to that in a second here so save time I'm just going to copy and paste the other two columns in there these are all pretty large here but you can figure that out in a second here oops looks like our links aren't working something's going on here try restarting the server and see if that helps oh you know what it is on the navbar because I took out the href so you do need it surprising oops try this again here you there we go now it's working these pictures are still pretty big you see they're overlapping so profile pic oh that's right why you got a type of person rapper so let's go back to our home JSX and there's the typo but you probably caught still like awfully big though so you know look at this dot means I probably need a save here yep that's all was just need to save the page great all right so our page is looking really good so let's go over to bout JSX so this one's a little shorter shouldn't be as painful as the last one just remember to save all right grid column and image so we need to import from react bootstrap starting to see a pattern here how reactive bootstrap is a little different than the way I did in my other video where we just included bootstrap normally and then use the classes nothing wrong with it just different some people prefer it because it's a more functional approach because you pass properties into components and you can test that the component did what it was supposed to do I prefer the classes over this seems a little bit faster developed but for people who are big about their testing I think it makes sense so here we're going to use that image component and we'll say source equals assets slash home dog people and classname good arbitrary name here we call it header image you call whatever you want as long as you target it correctly in the CSS so then we'll go grid our grid is just like using container in normal bootstrap this seemed to be kind of the one thing that was a little different this resident use the word container then XS equals so extra small screens in below which I think that's the small size sluicin bootstrap 3 then small equals we'll say 8 because this is going to be our 2 column so it's we wanted to be roughly 2/3 of the page and we'll do small offset equals 2 so this will push it off the screen and kind of Center it in the middle perfect close our tag and inside it there I'm going to put the picture for our fictitional person named Frank one oops jpg so we're referencing that public assets directory so even though it's up several directories when it gets rendered on the screen that's how it's rendered as a public directory and it'll say class name equals say about profile pic because we need to be careful because these names can collide so if we have profile pic like we did in the home component and we use it here that CSS properties are going to be applied to both so that's the only tricky part is probably best going for the naming convention that has like the page is on - then the name of the item to avoid stuff like that or you can find your own strategy I think that would work great though and just nature tag Frank the tank and I'm gonna paste in my text I got from that Bob Ross lips um perfect so that's looking pretty good I think not too shabby so now let's go ahead and save that go to our about page OOP the picture is really big something's going on oh that's because we didn't do our CSS yet so go to about dot CSS and I just have some not a lot but the about profile pic we're gonna float it left so we can see right now the text is all below which maybe you want I'm gonna style it so it floats the picture left and the the text kind of wraps around it then we need to make this picture a little smaller and tuck it up against that navbar so let's just save that so see that header image should pull it up to the top a little bit and yep that looks a lot better so now you see how it's kind of goes around the picture I like it looking good so now on to news a deus ex and here we're gonna do kind of a similar thing it's go ahead before we forget import our news not CSS and we'll import grid row column and image from react bootstrap okay I'm gonna switch this around my own custom imports come after your stuff that's coming out of libraries just a style thing so we just put the big little word news there instead I'm gonna drop in an image source equals assets from a public directory and I called this picture mountain Amanda JPEG man will say class name equals header image so we're going to pee back off that previous header image we created the or the CSS styling for it at least and we're gonna do a grid so it's our container tag and I'm here I'm going to do CH 2 for news and then I'm gonna do a row because we put columns and rows so these will both be on the same like level I want to make sure they all line up the same so B slash round and for our first column we're gonna say extra small we want to take up the full width all 12 columns when it's small I want to take up 8 and small and above they'll expand out in both directions there so class name will be main section and I'm just gonna copy over the text my closing column tag here just to save time I just got that off the Bob Ross Lipson it's nothing crazy there yeah why just copy this to save some time I'll call this sidebar and I want this is take up a full width when it's on smaller devices and for for anything larger so we'll have kind of a two-thirds and one-third section here and we want an image and again assets our public assets directory what I'm just going to reuse the jaw the dog people picture I think it's a pretty good picture and I'm just going to copy over some of the Bob Ross stuff here oops tab it over there we go and let's see our news that's CSS real quick not much there even though I gave a class a main section you probably could remove it since we didn't actually style it so all I'm styling is the image setting with a hundred percent and a margin bottom two am so we go to news we see our Mountain Man picture and there's that picture of the couple with the dog a little space there so it kind of comes down below and you can really clean it up and do a line justified for that text there if I make that look a little better that is looking good I think we got it one thing I wanted to add oops was in index dot CSS so just had some small styling I added there save that and just change the colors makes the fonts a little lighter thinner a little more readable so there's a little cleanup great so I hope you enjoyed this video if you have any questions please leave a comment below if you like it please like the video and share with others so they can find the video because the more likes and shares we get the more easier it is for people to find the video so thanks again guys take care [Music]

Channel: Brice Ayres

Views: 140,138

Keywords: react, react-bootstrap, react-router, react-router-dom, bootstrap, build a website with react, react tutorial, react-bootstrap tutorial, react-router-tutorial, website tutorial, react bootstrap, react bootstrap tutorial, react router, react js, react website, react bootstrap 4, bootstrap react

Id: jgVkR5EKI68

Length: 40min 4sec (2404 seconds)

Published: Thu Feb 15 2018