React + Material UI #2: Actually coding a UX design

hey everyone in this video we're gonna go over how we can turn this UX design into an actual website using react and matil UI in my last video where I talked about reactive material UI and I gave an introduction I got a lot of feedback in the comments that people wanted to see how to actually go from an IUI design to an actual functioning website using material UI and sort of the flow that you would take as a developer to make these UX designs come to life so all i've done is i've downloaded figma I'm not a UX designers by any means this is actually my first time creating my own UX design I downloaded figma which is a UX tool and I downloaded a material UI component pack and I just put together this very basic layout you can see here all it does all it has is pretty much a header that has an my name here as well as I guess a little icon I'm gonna put a little icon and in the center you have some content and this content is just a couple of different card components that displays the name of a coffee maker the price of it maybe a little icon up here about it the description and two buttons one that says buy now and offer Rick really quickly I just want to say if you find value in this video please consider either subscribing liking the video or leaving a comment even something as simple as liking the video if we can get to a hundred likes it really really helps the channel out it helps me put more videos out and helps get these videos to more people so if you find value in the video please consider doing one of those three things so let's the first thing I like to do whenever I have a UX design like this is I like to sort of take it break it down into its different components so you can see here I just have paint open I screenshotted it and copy it into paint initially let's go over each one of these components so number one the first thing I notice is we have this header up here and in material UI you can actually make a header using what one of their components known as a app bar so if we go to the material UI documentation and I type in app bar and I go down here to their demo you can see here they have sort of what we're looking for there are a couple different types of headers you can have but pretty much we just want something extremely simple we don't even need an icon or a menu on the side here just some text and on the right side maybe an icon and the cool thing about material UI is you can click this little button here and it'll show you the full code so you can see the header is actually made by having an app bar component and a tool bar nested within that app bar and then anything that you want down here and we're gonna go obviously more in-depth as we build this out but for now let's just Scout some of the components the next thing I notice is each one of these things each one of these things in our content is a card so for example this would be an individual card and this would be an individual card and if we go back to the documentation and we look at a card we can see that cards can be comprised of many different elements but the closest thing we can find right now is probably a mixture of this card because it has the sort of header where it shows you a little icon and a little avatar in the header a title a subtitle and a button as well as an image a description and then the bottom isn't quite the same here but we can see in this example they have a bottom with two different buttons so we'll probably be combining these two approaches in our code and now finally while that might seem like that's all the last thing that I can see here is we have this sort of grid layout happening where we can see here there's a bit of padding on the left and right side there's a bit of padding on the left and right side of our content and our content is sort of centered within the page and another thing to notice is each one of these cards is sort of laid out in a way that on the desktop view and I think in figma I set the desktop view to be like 1920 by 1080 on the 1920 by 1080 view you will see here that the content can fit approximately three cards per row over here and when you have a fourth fifth and sixth card it sort of automatically gets placed in the bottom row so that will all be done with materialized grid and greatest sort of the more tricky thing with material UI it's what people get stuck with a lot so we're gonna go over in detail as well so let's go ahead and jump into the code so as you can see here all I've done is created a simple create react app and I've sort of got it out all the create react to have default stuff and all I have here is just a simple app with some tanks in the middle what I've gone ahead and done is I've installed the three libraries we will need for this number one is material UI core which gives you the core components of material UI number whoops number two is the Mattila icons which gives you access to all their icons at number three is Mattel UI of styles which will give you access to things like their make styles hook and their theme provider so these are the versions I'm using for everything and by the way all the code will be on github I will leave the just a link to the github page in the description below and you will be able to sort of just fork clone and play around with this branch as you want it so that's sort of cool and I'll be committing every now and then if you're not sure how to install these dependencies it's pretty much as NPM I and then the name of the dependency so for the first one be at material - UI / core and you'll go ahead and run that for you - one of them and it'll automatically add it to your package dependencies so the first thing I want to go about doing is actually creating the layout for our page over here the first thing we're gonna do is set the layout using grid so as we can see from the documentation grid can look a bit confusing but in reality it's quite simple once you get to understand it in until UI and bootstrap for that matter but mostly material UI a grid is split up into twelve components and they are split up into two different types you can have a container and you can have an item so as you can see in this example this whole thing is considered to be a container and by default container works in rows so you can have up to 12 spaces or twelve slots in every single row of a container and in each container you can have multiple different items so in our first row over here we have a single item that takes up all 12 spots in the grid that is to say that it spans the entire grid now in the second row over here we can see we have two different items and each item takes up six spots in that grid and what that means is our grid is going to be split into two separate pairs of 6 because 6 plus 6 equals 12 and there are 12 slots on each row of the grid and finally down here we can see we have four different created items and each item takes up 1/3 or each item takes up 3 out of the 12 spots which actually is 25% so if we were to go back to our UX design we can see here in our content each card takes up of each card takes up a 4 out of 12 aka a third of our inner container if you consider this to be a container but we can also look at our layout to be something bigger if we look over here we can see the content takes up approximately I would say 8 out of 12 of the the main content or sorry the main page and these sort of gutters or this padding takes up approximately two slots out of the 12 for each and if we look at it even bigger we can see here that we have our header component which would be a row by itself so it would take up a full 12 it would take them all 12 of the 12 for this container row and then down here our content would be another item that takes up 12 but there's another way to look at the bigger way actually so each grid container can be organized into rows or columns as you can see here our direction can be row it could be row reverse it could be column and column reverse let's go if we were to make it column instead of each grid taking up space on a sort of row direction we can see here if we were to go and click the column each thing would take up a column and for our header it's actually a lot more it makes a lot more sense to make this grid a column and have one grid item here and have our content grid item here so they're stacked on top of each other let's look at what that would look so the first thing we're gonna do is import our grid from material UI core and you're gonna notice all of our components are actually going to be imported from a tree why cork so we have our grid here let's get rid of this code and let's replace it with some grid code so we're gonna make it grid and we're gonna specify that it's a container and we're gonna say our direction is going to be equal to column oops there we go and within that column we're gonna make two grid items so we're gonna say grid item and in the first one we're just gonna put some placeholder tax we're gonna say this is where Heather will be and then the second one we're gonna say this and we can see here we're not specifying any sizes right now but if we go back to our app will see that our header is on top of our content which is what we like so now let's go even further and break down our let's break down our content grid and let's try to make it so that we have our content looking like this where we have some padding over here some padding over here and we have all our content in the middle so we can come back here let's also so this is something pretty cool that you can do you can make an item a container as well so an actual grid component could be an item or a container or both at the same time and what I'm gonna do here is I'm gonna say grid and I'm gonna say let's say from extra small to up so these extra small components as we can come over here and we'll see back at the documentation it takes these props that you can pass into the container you can have anywhere from extra small to extra large to small medium and large and these are what are known as breakpoints in the screen if we come back to the demo we can see here that if we were to move the screen to be a bit bigger the components sort of scale to be that size and these breakpoints over here as you can see some of these items have different break points on an extra small screen this item will take up all 12 slots but on a small screen and up it will only take up 6 slots so if I were to make my screen super super super super super small we would see here where we go we would see here BAM this grid item just went from taking up from sharing it with this other grid item to taking up the whole row in this container so that is what these breakpoints actually do so if we were to specify over here that this grid item should be extra small extra small too what that means is on screens extra small and up this item will at most take up two slots in that container so I'm gonna go ahead and make grid item XS equals 2 and I'm gonna close that because there's not gonna be any content here right now what we're doing is we're making these sort of gutters and I'm gonna make another one on the other side of our content create item X s equals 2 and what I'm gonna do here is I'm gonna say grid item and we're gonna take the remaining 8 slots and we're gonna allow that our content to live in there so if I were to come back here you would see all of a sudden while our content isn't exactly centered if I were to add a bunch more writing you would see that it would wrap around this gutter so we've had so our text is somewhat centered we have gutters on either side of it now let's say when the screen gets really small it's sort of weird that we have those gutters there so what we can do is we can set these breakpoints instead of starting at X s equal to do we can say anywhere from small screens and up it will take up two slots but on extra small screens it will take up zero and what that will do as you're gonna see here once we add this in is it's gonna make it so on anything that is considered a small screen and by the way you can see what definition of the small screen breakpoints is on their documentation I believe it's like it's all split up based on pixel values as we lower the screen over here as the screen gets smaller and smaller smaller once it gets to the extra small space it will start taking up oh it looks like I didn't exactly do it completely correct for this one oh yeah so we we actually made the padding's over here or the grid items on either side of it go to zero but what we forgot to specify was on small screens this will take off eight about an extra small screens this will actually take up all 12 so if we refresh our page you can see our content actually takes up every single spot in here and if we make the screen bigger BAM as soon as it gets to a small breakpoint it'll add those gutters on the side back in so now that we have that done we have sort of the layout of our page already done for us let's go ahead and start making the actual header itself so I've gone ahead and created a new file called header JSX so we could put our header the first thing we're gonna do obviously is in portrait and the next thing we're gonna do is actually make the component so cons feather and we're gonna export it and now let's return just a basic string this is the header if I were to save it you can see I've already imported it and I've put it into the grid item that we wanted our header to be in so we can see it's right here in this graded item now as we discussed actually what happens is this app bar is how we make our header so we can go back to the demo and we can see in our app bar that if we want to make a header like this all it is is an app bar with a tool bar inside and then whatever you want inside of it so let's just make a very basic bar with some text inside of it so we're gonna use app bar and we can auto import it at bar there we go and within our app bar we're gonna create the tool bar and when our tool bar we're gonna create some type ography and within that type of are eager to say this is our header and there we go we have our header but wait a second where did our content go well our content is actually under this header right now so we have to go ahead and specify if we look at the app bar API we can see that there are a couple of different things that we can pass in for position what we're looking for is static if we want the bar to be there all the time and not let anything go over it so we can say position equals static and step tick so now you'll notice that we have this weird padding around our we have this weird padding around our application now so to get rid of that just go into your index.html over the body tag type style equals and give it a margin of zero it's a really weird thing that happens a lot when you use module UI but that's the easiest way I found to get rid of it and the way I found that was by just searching on Stack Overflow so now we can see we have our header with some text we have our content where it's supposed to be let's go ahead and look at what else we need to add our header so looking at our mock-up we have the text over here now what we want is an icon on the other side and notice I'm not doing to stingy on things like the color or the height or width of the app bar because this is solely to show you guys the sort of flow of how to take a design and move it in to react the pixel-perfect stuff is just sort of tedious work that I think you'll be able to understand fine once you understand the layout and how everything works so we're gonna go to our materialize icon page and you can see that there are an absolute ton of Mattila icons for example if you wanted to share a button you could like to start up share and there's a bunch of different things but I've never used this AC unit rounded button before and it looks like a pretty cool icon so let's just go ahead and import that and let's pop it into our toolbar and see what it looks like so they'll see her I've saved it and bam so this isn't where we want it on the toolbar it's sort of on the left we want it to be floating to the right and by the way you can have nested grids and stuff so for example on our mock-up you can see we have a bit of space here before the actual title itself if I wanted to do something like that you can actually nest a grid in here and maybe set a grid item to be one right before the typography and then have this span over here and then maybe have another grid item to be one there are a lot of different ways to do it as you'll see but for now let's just keep it over here and let's just make it so that this icon loose over so in order to make this icon moves over I believe we'll just have to set the Flex on this so if I were to go into inspect element drag it let's put inspect element back on the dock here so go to this typography over here and if I were to set Flex to one we would see that our icon goes in the right place so essentially all we want to do is add a bit of CSS over here to here and the way we're gonna do that is through make Styles so what we're gonna do is we're gonna create a Const and I went over this in the last video if you're not familiar but essentially this is a way to add CSS embedded into your JavaScript and this is the material UI way of doing it so we can say Const let's go ahead and I think first import make Styles so let me see statement so we are going to import make styles from Atul UI styles and then the next thing we're going to want to do is just create a use styles function up here and all it will do is it will actually import use this import and make styles and we can add any JSX we want here so let's say like we can name these whatever we want these are just going to be a part of our class names so we can say something like you know typography styles is equal to Oh and then we can say flax is equal to one and down here we can go ahead and say Const classes is equal to use styles and we can give our typography over here a class name equal to classes thought typography styles and voila there we go everything is moved over to the next side so we essentially have our very basic header done now let's move on to the content we have the everything for the padding and stuff done for our content if we go back into our FJs let's create a component for our content content on JSX let's import react let's make the content component and like sequoia let's return just some basic you know over here and let's go ahead and import that into our app so content I am and finally just import okay so we see here we have our content here now in our content we're gonna want cards so let's go ahead and look at our simple cards let's create just a simple card so we can get the actual layout of the car it's done so we look at the code here we can see the things we're gonna need to import it's quite a bit actually it's all of this let's go ahead and create our own card component for this let's call this like coffee cart JSX because we're gonna have a bunch of coffee machines and stuff let's go ahead and import everything we need to import to use this basic example and then add all of these guys in but let's cut some of this stuff out whoops let's create the actual components of coffee card okay so you can see here we don't have all these classes actually you know what why don't we just copy the component completely since all we're trying to do is get the actual layout done first and then we can go ahead and overwrite all of this okay and finally it's get these buttons up in here so now in here let's get a coffee card going okay let's see did we miss anything no we did it so here we go we have our basic coffee card but as you can see it spans the entire thing and we don't really want that we want it to be three cards come across here sort of evenly split so let's go ahead and make a grid and add that in here so we're gonna sort of do it in a non programmable way first so I'm gonna import our grid this is gonna be a great container then we're gonna have let's say first grade item X s is going to be equal to a four because we want three and four divided by our 12 divided by 4 is 3 we're gonna make three of these items here and go ahead and just pop a coffee card into all of them and we can see here now we have so here we go now we have three cards it's sort of a bit weird Hill because over here we have a min-width so if we want we can delete that min-width get rid of this over here and now you can see the cards are actually I'll zoom in a bit in case you can't the cars are actually completely evenly divided now in grid you can set spacing in between your components because as you can see here in our UX design there's actually a tiny bit of space here and by the way one other thing that I just realized over here in our app if you want a grid item to be nothing you can put false instead and that is sort of like the zero as we can see that this will still work fine so let's go back to our grid API and let's look at spacing so we can see here what they've done if they have a way to space out their components and we can make it so that I think we can pass spacing in right here straight into the actual component so over this container not this one over this container I could say spacing is equal to two and you're probably wondering like what the hell what is two like what does two mean well in Mottola Y you have a default theme and spacing is defined in that theme so when you type in two and spacing is defined as like a value I think it's like defaulted to eight pixels so when you put spacing two it will do two times whatever your spacing is in your theme so in this case two times eight which should give us 16 pixel padding here or 16 pixel spacing between each one of these cards and if I were to look over here you can see yeah each one of them has an 8px padding when you multiply that by 2 because there's padding on either sides of each card in the middle here you get 16 pixel spacing here so this is good enough I think the spacing was a bit more in our design so maybe let's see what it looks like on 4 okay so this is a bit closer to what we're looking for and you can see here if I were to add another great item with another coffee card it would actually go on the next screen because we these for coffee cards these four grid items already sort of take up the amount of space on the grid so right out of the box we have this functionality where whenever one thing fills out we go to the next one now let's make it so that when it's extra small they don't just like look like you know that painting I think it's all scream we're like everything's like super narrow and stuff like that so to do that what we're going to do is simply we're gonna make it so that when it's excess it takes up the entire row and when it is small or up so these breakpoints work in a way where whatever you define it goes oh it keeps going up in every breakpoint until it gets to another definition of yours so if we were to just have it as SM equals 12 that XS equals 12 would be set for SM which a small medium which is MD which is medium LG which is large and exhale which is large screens but if we were to define that on small screens it has four then small screens and up it would go so it's pretty much a sort of whatever you define it'll go all the way to the next ones unless you define another one so we can see here it looks the same on bigger screens but as soon as we start to minimize it over here and once the screen gets too small it takes up the entire thing so let's go ahead and resize this properly again okay so now the next thing we want to do is let's build out this card properly let's actually make the card will look like the one in our UX design well cards in our UX design number one they have sort of this header and this avatar so if we come over to our card API let's go back to the card demos we want let's build out this header bar first so what we need to do is import header card header from mattel uy and now if we want to see how to use the card header we can see there's a very easy example here you can set your avatar to be whatever you want you can set the ax to be whatever you want and then title and the head title so over here let's go ahead and make let's first of all delete it so we only have a single card so we're working with one card at a time over here let's go ahead and add this header over here so BAM now we have this header we obviously have to import everything it comes with like avatar from a trail UI icon button so we let's see what button we have in our UX design we have a share button so let's go ahead and find a share icon over here let's take this guy let's import the share button and by the way icon button all that does is it adds it so that it's just a wrapper you can put around your icons it's just a wrapper you can put around your icons so that it will when you hover over it act like a button so you can see here how as soon as I hover over it it adds is like great background and if I click it it'll sort of look like you're clicking a button but if I were to like comment that out and just have the share button it's sort of just like this default icon which is why it's good to have the icon button around it so BAM now the next thing we want to do is let's go ahead and so what have we got going on here we want to actually pass in proper data so let's make it so our avatar we can make it our source so in for material right avatar you can give it a source and it'll actually pull that pull that image from there so if I were to go and look at Abbott are you can see here you can set source equal to and then a link to an image let's get all of these values in our card from props so let's take him props and let's say Const let's say avatar source we want we want the title of the card we want the subtitle of the card we what else do we want from here we want the description and I and then the image source it's a description and then image source it's going to be equal to Trump's and right now all we're going to be using is number one that avatar source so we can say here something like source is equal to avatar source we can say our title is going to be equal to the title that we pass in through props and our subtitle is going to be equal to or subtype now we actually have to pass those values in I made like I went on Amazon and I got a bunch of information from pretty much just a bunch of coffee products so let's take a random one here let's take the Hamilton Beach Flex brew so we'll say title equals that and then the subtitle is just going to be the prices of title it's going to be equal to 89 99 okay and then our avatar URL will be this guy right here just straight from Amazon but our source we actually don't have to put these braces around it since it's all just text so let's go ahead and just clean this up okay so avatar source title subtitle so now let's go back and you can see here we have Hamilton Beach Flex Peru with the little icon and then the actual price itself so now what we can do is we can continue doing the rest of it so obviously like I said it's not pixel perfect if we wanted to we could actually like remove some of the padding here space out the cards bit more set a proper minimum width for it we could do things like reduce the spacing to give it more space there are a lot of things we can do to sort of make it look exactly like our mock-up but like I said we're not going for pixel perfect here we're just going for the flow of what we're actually doing so now that we have the actual card header let's look at the card media so we want pretty much card media it's pretty simple it just has the actual image so the source of the image so I'll go ahead and let's import card media we're not gonna be passing in any specific classes because we're not trying to make it look pixel perfect we don't want any of this and what I'm gonna do is simply go ahead and get out this image URL pass it in as a prop so we can see we're getting image from this prop over here and then another thing we have to do with card media which is sort of weird is you have to set a height or else it won't display so we can just add in line styles obviously you would want to add it through you styles but just for the sake of time let's give it like 150 pixel height and if if we were to save we would see here BAM here's an image of our cake now that we have the card media done the final thing we are going to go - is sort of cart content so you can see here they have a bunch of this text we don't need the header or any of that all we really want is just a body description and we can make this equal to our description just like so and we need to pass description in so we can say like description is equal to like this is actually I also have a description for it here it might be a bit long for this car but let's pass it in anyways okay cool and then at the finally at the bottom what we're gonna do is these buttons are gonna become and stuff learn more it's gonna be PI now and then offer just like our design BAM so we can see here it doesn't matter I get not all the colors and the width and everything doesn't match up exactly but we have our basic card component now finally the last thing I'm going to do is I'm gonna create a quick Constance Jas file here I'm gonna take all of this data I have here I'm gonna say explore default BAM okay cool so this is all data that I like pretty much just took from Amazon with all the coffee information so now what I can do over here in I can get rid of this stuff and some of these classes that I don't need anymore in fact I don't think we're using any classes anyway so I'm gonna go into content and over here what I'm going to do is I'm gonna import let's say a coffee maker list from da / Constance and all I'm going to do is I'm going to say let's say get a coffee maker card I'm gonna make a simple function that is going to pretty much loop through all of those coffee makers and return a card with it and it's going to take all the details from it so let's say coffee maker object and what we're going so then we're gonna say let's see all this stuff oops let's see all the stuff we are taking out of here so title price description avatar URL image URL so title Christ's written avatar URL image URL equals coffeemaker object and in fact I think there's even a shorthand and then what we could do is this return coffee card and I think we might be able to even do coffee maker object like that let's see if that works actually so we don't have to destruct everything past the minimal and then what we're gonna do here is let's just say so coffee maker list dot map and I'm coffee maker object and then all we're gonna do is gonna return get coffee maker card with the coffee maker object passed inside okay let's see what we get here okay so as you can see here it it's it looks like it's passing everything right but the one thing we forgot to do is move this grid style into every single one so right now it's putting them all under one great item so let's go ahead and number one wrap every single coffee card around and as their own grid item and we can see here we have every single one and number two these images aren't quite loading perfectly so let's see image URL and what did I call it in here image okay so we just have to make this multiple image URL and avatar URL so let's pop that in here and let's hop back there and there we go so we have sort of a working a working prototype of our site and that is pretty much it that is how you create sort of this same layout obviously now the next thing I would want to do is work on things like consistency getting all the text to be the same font getting everything to be the same like getting all the cards to have the same width and getting all the titles to sort of serve on the same font making it so that if the description goes over use ellipses getting the buttons to have the same colors getting all the widths and padding's and everything like that done fine but as for a layout standpoint that is pretty much how we have done it I'm gonna make sure I push all this code up and once again you found any value in this video at all please consider either leaving a comment liking or subscribing to the channel it really helps with the YouTube algorithm and I'm really excited to keep pushing out content please let me know any other tutorials you would like to see in the future below and thanks a lot for watching

Channel: Anthony Sistilli

Views: 134,734

Rating: 4.9832745 out of 5

Keywords: material ui, react material ui, material ui react tutorial, material ui grid tutorial, material ui header bar, material ui navbar react, material ui toolbar, react material ui website, react material ui styling, material ui example, material ui react examples, react material ui grid layout, material ui grid system, material ui grid, material ui card grid, material ui card tutorial, material ui card columns, material ui react card, material ui cardmedia video

Id: tKzSnjWPtEw

Length: 39min 12sec (2352 seconds)

Published: Sat Mar 14 2020