Build a React Website Using Styled Components - Responsive Ecommerce Restaurant Design

yo what is up everyone so today i'm going to show you how i made this website in react and you can see the theme for today is about pizza i can't make a site about pizza without bringing my own pizza on deck over here chilling right now i'm not gonna eat this in front of you guys but pretty much you can see here it's the little hero section a little hover action a little pizza icon i want to add that little effect you know we got the little sidebar effect over here then when we scroll down we got little products and this is reusable too so pretty much you'll see like another section and this is not the same as my previous video so i essentially have a completely different uh way of getting the data for this but you can see here we got little fancy effects i added and then a little pizza of the day and then also another section again where i just mapped through a different data and then just displayed different images and got a little footer section here and also it is completely responsive so let me just shrink this and then i got freaking pizza oh i got pizza on my finger i don't get this on my computer but you can see here we'll scroll over here click on it you can see the little sidebar it only shows like uh half i guess you could say of the screen on mobile let me go over here and shrink it down here and then last but not least let me go here and i'm trying to inspect this with like my pinky finger right now because my i got pizza juice on my my finger but uh let me see here all right and we got it on i gotta zoom out first hold up all right what's going on here all right there we go okay i did it now we zoomed out perfect and now you can see you got the little moto g action screen zooming down there iphone let's just switch to iphone you can see this and then let's switch like a ipad and you can see that is what it currently looks like in those different sizes without further ado let's hop into vs code or whatever code editor you want to use and let's build this project alright so here we are in my terminal so go ahead open up your terminal and then just go and let's do mpx create react app and let's just call this react pizza website v 1. you name this whatever you want to but i'm go ahead press enter and then once that finishes loading we can go ahead and open this file up all right so now it is complete so i'm gonna go ahead and cd into the react pizza website that's v1 and i have vs code and i have this setup where i can just type in code dot and it automatically opens vs code for me if you don't have that set up simply quick google search and you guys can implement that and if not go ahead open up whatever code editor you have and then open up this file so now let me go ahead and do command j or command b or i think control back to yeah control backtick opens up the terminal there and i can go ahead i have yarn so if i do like yarn start it's going to give me an error most likely so i have to add this little file and let me see where's this where's this little message i got there uh go all right right here i got to add this little message right here i'm going to command that if you don't have this error then just ignore this so i'll create a new file dot env in the root of the project i'm going to save it and then do yarn start again so i already have the website up so i'm going to type yes you don't have this most likely so just auto load for you so now you can see we have this app here so let me shrink the screen over here and let's bring this over here so it looks like all right that's perfect so now let's go into src and let's get rid of some files really quick let's get rid of the index.css so i'll be this one and let's get rid of the app.css and also the logo i'm not planning using this one so let's delete this and we can leave some of this stuff here we're not going to use it but we don't need to worry about too much and let's go let's see index.js let's get rid of the index.css import i think would be good on this on the app.js let's get rid of the app.css also the logo and then let's make sure that um looks like here let me just do import react i have a little plugin extension too but let me just delete all this now let's delete everything in here and let's just plug each one be like pizza right here save it and should have i did not refresh okay there we go yeah i know why since since um recently reactive and acting pretty weird so sometimes i gotta refresh it a couple times or restart it but um right now this is working so far so what i'm gonna do is actually let's go ahead and show you my extensions here so um click here and then basically type in es7 this one make sure you guys have this installed because there's little shortcuts you can do when creating react uh files so let me exit out this one and now let's go ahead let's go to src create a new folder and we'll just call this components and then let's go ahead and create our component so i'm gonna go new folder let's create the nav var first so now bar and then you file here it'll just be index.js and then inside i'm also going to do navbar elements let's do navbar elements dot js and then index let's do r-a-f-e press tab now we have this created for us so i'm going to change this to um navbar and then pretty much from here we can add in our code i'm using stock components so uh if you've never used that before then it probably better if you went through like an intro course or whatnot but i'm just going to go straight into it but for now let's just do a little test really quick and let's just do like h1 map bar save this really quick and let's go to app.js and let's just display this here so let's do that bar and i can press enter and it auto imports it at the top for me without having to do anything you can also press ctrl space press enter to it works too if it doesn't then you can restart this code and try it again or just simply manually type it and it looks like we got the map while working so that's cool right there everything's working so what i'm going to do now is uh let's go ahead and let's install the um stock components i'm going to hit this plus sign here i have yarn if you don't have yarn npm install everything you want to do yarn add styled components and then let's just go ahead and run this stuff so once this finishes up let's just go back to the index.js and you're probably wondering why did i name it index.js and the reason so that if i needed nav bar it'd be like component slash navbar folder slash nav bar so i just wanted to say that bar and it looks for the index.js for me and let me let me just delete this really quick and then we're back in the regular note so you go to package.json we have stock opponents right here so if you don't see this then you gotta install it so that it pops up and let's go ahead and uh let's go to that bar elements because that's where i'm creating the uh stock components so i'm going to do i should do import style from styled components and then let's do our export cons nav equal to style dot nav so that's the uh html tag i want to use let me use a nav and let's just make the background as um transparent should be semicolon so this is just like normal css now and let's do height 80 pixels let's do display to be flex uh just like content center and then font weight is going to be full and we'll import all that cantiness in a second but let me just say this really quick let me get rid of this let's go to index.js and what we can do now is uh let me make this a fragment so we got like this and then let's do a um nav what we just created and in here let's put like i should put that for now and if i save this right now it's going to say it's not defined so we have to do is import this at the top so import nav and curly braces from dot slash navbar elements and then it should pop up and see see how react does this like weirdness so if i just refresh it now it shows it so now it's working you can see there and now i want to do is um create the uh what's the remaining navbar elements so next we have is just i call this mapping give me whatever you want to those do export cons nav link and it's going to go to style and this is going to be react router link so this is how you pass in uh things that aren't essentially like um html elements so like a react writer link isn't something you normally see so you have to put a parenthesis and then pass it in with backticks and i'll just say color hashtag i have f uh font size to rem because display flex this and note with style components it's really hard to show you like the styles happening in real time because i get to create the style and then import it back onto the actual index.js file so i'm assuming you have some sort of csx experience and or have used css enough to see what i'm doing if not then you probably will need to watch like a more intro i guess video first but um for the most part you're doing react right now shouldn't be too hard as your text decoration none cursor pointer and the cool thing is with um components it's kind of like sas where you can just um like nest things so you can be like add media screen and i'm gonna do max with and then i'm gonna set at 400 pixels for mainly mobile and i want to set the position to absolutes and then top 10 pixels and then left 25 pixels so i'll say this here bring it back and then pretty much let's do a um inside this nav we're just passing that blank two equals slash and then just call this one pizza save this there's never an error because i have to import this so now i think and we have link is not defined so we're going to do let me click this plus sign here and let me just do a yarn add react router then i'm just going to press enter here and then this will add react router and pretty much from here we can go back to the uh navbar elements and once that finishes uploading i'm gonna go up here and i'm actually gonna say go up here and then we're going to do imports curly brace nav link and this is a little special um link in react router where you can add like active classes and additional features now you can use normal link but i just have this right here and i'm going to call it link and i'm going to say from react router we'll save that here and then it should work now so i'll save this and the thing is now we have to actually put this on app.js so let me get rid of uh this div with the app it doesn't like us doing this with wreck routers i'm gonna say router and then also router here then i'm gonna import this import and it's originally browser router as router and it's gonna be from react router save it here and should well actually i don't have anything i think it's transparent right now let me see yeah it's transparent so like if i go to the background make it like uh let's make it red for right now so see here now you can see everything perfect all right so let's do actually a um yeah let's finish up this nap really quick and then we'll work on the uh the rest of the site so this one's pretty short i made this one short because it's not too important but let's do export cons snap icon ecostyle.div with the backticks and let me close up terminal really quick and let's do display let's do block position let's do absolute top zero oz do right zero cursor pointer colors hashtag f and i'm gonna have a p tag in here and ideally you could have to spell this out if you want to but like just for like tutorial sake you can nest um elements underneath it and i just i didn't have to um i didn't want to name it just to show you like different ways but ideally you could name this something if you had like additional styles and just do transform translates and this wants us to be minus 175 percent by a hundred percent and i want the font weight to be uh so actually i need to put a semicolon here and then we have one more thing and really quick and then we'll be able to go back and style this let's do export cons bars equal to style dot well now it's my best solid f a pizza slice which is the icon we're gonna get from react icons and let me scroll this up now let's just say font size to rem transform translates will be [Music] minus 50 comma minus 15 so we actually have to import this icon because it's uh the pizza icon on the original app you see this little thing right here so i'm gonna say import curly brace fa pizza slice from react dash icon chef hey now if i say this it's not going to work so we got to do open up terminal again amazing yarn add react dash icons and while that's loading again if you check your package json you have react router and then react icons will pop up too so let's go back to index.js and let's finish it up so under that link let's do um nav icon and i have an on click function on this but for now let's just keep it like this and let's just do a p tag for menu and then under that icon i'm gonna have well actually on our menu i'm gonna have the bars and then pretty much i mean ideally you could name this pizza but like but originally this is like a um the three hamburger menu bars but you could probably name it like mobile menu but for now let's keep like that let's just call this now icon and then bars for here save this and it should see yeah right i'm going to see you so it should work yeah so sometimes react is just bugging out for some reason right i cannot say but i have it so let's do let's do control c if it's not working i'm watching this it's like well i'm doing everything exactly or vadim let's restart it it should work here if not i mistyped something and uh what is going on now let's see use visitor no type all right let me go back and check what does it say here's all right icon fa which doesn't make sense because i have exactly so import fap the slides from quadrant icons fa and then yeah it's fap to slice i don't know what's happening let me try it one more time am i tripping out or something hold on yes let's see command fail we have to code one what is this you don't see any errors so what i might do is let me let me just delete my note module folder really quick this thing is tripping out let's do command c i'm gonna do yarn if you don't have yarn you just do npm install and this basically reinstalls your node modules so let me see if that fixes it because it's saying the react icons is not installed so i don't know why it's delayed so maybe i don't know i guess when the time i'm making this react has like a new feature or something something's going on to where like it's bugging out because it hasn't never happened before until like recently so let's try it now and let's see hopefully let's try yes yeah see how weird that is so if you guys are watching this like you get an error that makes no sense just delete your note module folder and then run npm install or just straight up yarn and it reinstalls it now i can't see right now but like if i restart it'll be there yeah so see that's that's some issues you might run into depending on what what like time you're watching this that are just unnecessary issues that shouldn't have happened so you can see nothing was wrong with the code and what everything works fine now so now i'm gonna do is let's start this and let's see oh yes what we need to do now is actually let's create a global styles because you're probably wondering why is this not a line so let's do this let's go to src create a new file and call this globalstyles.js and let's do import create global style from style components then let's do export cons global style equal to create global style the back ticks and then let's do little asterisk shifting curly brace i said box sizing to border box let's do margin zero padding zero i have prettier install too so i get when i save it should um fix that font uh family is can it comma sans save this here misspelled padding looks like it doesn't auto fix it or whatever oh yeah now we have to do is go to app.js now and then let's just add this here so under router let's do our global style and i forgot to do imported so control space press enter and perfect so now everything looks aligned here and looks like um in terms of positioning it's not like perfect we'll fix that later it's probably because of the um i don't have the actual font so actually let's just do that really quick so let's go to google fonts so just type in google fonts can it and then uh pretty much what we need is the regular select this style and that is not the screen i'm going to show you so let me make it bigger and then i want the the like super bowl one like right here the 900 black click that one and why is it like so zoomed in yes we don't know why so zoomed in there okay that's better and then we can take this link right here and then go to our public uh folder here index html and as long as you're above the head tag as long as you're above the closing part of the head tags i'll just paste it in and then uh yeah we should be good to go so never go back perfect now you can see everything's online how they should be all right so now let's go ahead and let me close this off and we're pretty much good with the navbar was fairly simple now let's create the heroes section so i'm going to do is uh call it nap bar new folder components and let's call this hero and then you fold new file index.js and then also a new file let's do um hero elements dot js all right so here let's do r r-a-f-c-e change this to hero and then pretty much let's do uh we'll just test it out really quick so hero put out that js on that bar and i just call this hero awesome perfect alright so now let's go ahead and style everything at the style components so let's go here and i'm going to do is i'm actually going to import the nav bar into the hero section so that i can make the transparent part easier but for now let's do this really quick so erase everything fragment i actually know edge opening tags just call this hero container and then uh actually oh no although there we go and then inside here i'm going to pass in the nav bars let's do nav bar and then slash here let me save this really quick and then let's import navbar from code dot slash nav bar and then also let's do import curly brace hero container from dot slash hero elements so i'm gonna save this here and i'm just to add this into the hero elements style so let's do this really quick i'm going to say import style from stock components and now let's do export cons hero container equal to style dot div back to back ticks and then i should do background i'm gonna say linear gradient i want it to be two right comma rgba zero comma zero comma zero comma zero point seven and then outside this parenthesis i'm gonna do another comma and then let me just copy this rgba again so i have to type it out and then basically it's going to be 0.1 and then after that i'm going to take the come out i'm going to do another comma i'm going to say url parentheses curly or dollar sign curly brace img bg search image background for short this is basically a way i'm going to say imports the name i'm calling this you can name this tacos v12 but i just called it image bg for image background and i'm going to say from gonna be that slash dot slash images slash pizza dash three dot jpg so i'm gonna have my github so you can see like all the images i'm using or use whatever image you want but i'm gonna say this right now it's not gonna work so i have to create a uh src i'm gonna do a new folder just call this images and then let me drag over my image really quick and then i can show you how this looks all right so i'm dragging these i have a bunch of like extra images i was testing out so like if you're like what the heck is this don't worry but uh pretty much now let's do um the thing is you can't see the image because let's go to app.js let's get rid of this nav bar since it's already in the hero and let's just erase this and then let's make the nav bar so now our elements let's make the background transparent again so now everything's invisible and then for the hero elements you can't see anything you have to set a height so let's set a height really quick so let me do uh height 100 v each save that there still not showing so let's do a background combat background not back around see back our background uh let's do position center and then background dash size to be covered and let's see why is it not showing this sound so probably mistyped something so let me command b to make sure everything looks proper this is random ah that's why this parenthesis shouldn't be here should just be like this and let's try to save this now awesome perfect okay that was the error shouldn't be like that and you can see we got this background pizza with the logo everything here so now let's just add in the rest of the stock components and then we can go from there so let's do uh let's create a hero which is a content i'm going to call this actually let me do this in the index first and then we'll style it after so here under here it's going to call this hero content and then in the hero content i'm going to call these hero items and then i'll just have like a hero h1 so be like greatest pizza ever and then we can go under that let's just do all cause hero key just repeat print paragraph but ready in 60 seconds boom right there and then let's do um hero btn now this is more like a template video so like you want to add all that additional like labels and everything feel free but this is just like a logo so you can call it a starter pace and then here let's import these so what we got hero content hero i own space hero items hero h1 then hero p tag and hero btn so we'll save that there and now let's add the style so let's do our export cons and let's do uh hero content equal to style.div with the back ticks and let's do height i'm gonna say calculate the height i want it to be 100 viewport height minus 80 pixels because the nav bar is 80 pixels in height i want to make sure i have a max height of 100 percent right there and then uh with will be a hundred per width and then padding will be let's do zero ram calc 100 viewport width minus 1300 pixels divided by two and then after that we'll have export cons hero items equals to style.there with the backticks and then let's just do uh display flex let's do flex direction column and in case you give you a visual what we're doing is creating this right here and then let's do uh let's see we got just my content will be center and then align items will be center oh my bad should be flex start flex starts i want to set the height to 100 more heights i want to make the max height to be a hundred percent get rid of that let me scroll up go to the terminal and then let's do padding 2b [Music] 0 2 ram uh width will be uh 650 pixels our color will be hashtag f and then text transform will be uppercase next i'm gonna have a line height of one and then font weights to be bold and then let's say they add media screen and max width for the media query so let's do max width of so at 650's where the break because essentially that's like half of the 1300 that i have set for the width i don't want to set the width to 100 and i should have a semicolon here and what else we got we got hero h1 the hero p tag and then the button and we're done so let's do export cons hero h1 it's equal to your style dots h1 with the back ticks i'm going to say font size this is a little cool trick one of uh someone commented so shout out to you but basically when you use clamp and it's a way to make a mobile responsive fonts without having that midi queen so essentially the minimum value is the first one so i want to make sure this font is not smaller than 2.5 ram and then i have 10 viewport width so essentially like how big do you want to see based off of like the width of the screen so 10 viewport width maintains this like giant looking text for majority of the tablet and desktop and then once the mobile it's when it like shrinks more and then we want to do five ram as the max and let's do margin dash bottom will be one room let's do box shadow what does this go to b be three pixels five pixels hashtag e nine b a two three and then letter spacing or set this to three pixels so now let's do the p tag and then the button will be done with the hero 6 let's do export cons hero p equal to style dot p backtick backtick let's say yeah let's just cut this line this font size clamp change this to two rim let's do 2.5 v port width so 2.5 and then three ramps the max i want it to be and then let's do margin dash bottom to b to rep then last but not least let's do export const hero btn equal to style dot button with the back ticks let's do font size to be 1.4 rem let's do padding to be one round by four rem let's do border to be none so let's see for none background to be hashtag e three one eight three seven color will be hashtag f f and transition b 3.2 seconds stick these out and then for the hover let's do in colon hover so there's a way to do um covers should just be one and basically we'll just set the background to hashtag ffc 500 transition which should be 0.2 s ease out and the reason i'm sitting on both is so it has like a smooth in and out transition instead of like instantly stopping once you hover off then colors be so there's zero so voila we got the hero section done and that was pretty simple nothing crazy but pretty much you can utilize this for like any design you want to do just like switch it out so now let's do the let's see what should we do this is the sidebar since um we're here on like the hero section so i'm to do actually in components let's do a new folder call this sidebar and then create the index so let's do a new file where is that index.js also a new file right here let's do uh sidebar elements.js so here is the rafce it's called a sidebar and now let's add in our elements so here we go first one is going to be a sidebar container and let me just erase this it should be right there and then we're gonna have an icon now i'm just gonna straight up write everything in here because um it's fairly short and let's just do like clothes icon actually should be sell closing so this is actually the x on the mobile and then here's like the sidebar menu so like this is where i put on my link so i'm gonna say sidebar link two equals to basically nothing and then pizza so you'd have to make out your own pages and then uh link them to there but for this video i'm just gonna keep it like this and then shift alt or option down arrow depending if your windows or mac copies it but that doesn't work for you i'm not too sure what else you do besides just copying it then we say desserts and then let's change this to full menu all right so now looks like we got it there and then lastly under here let's just do um side btn wrap and i'm just gonna include the sidebar routes which is essentially the uh the path to something whatever you want to put this i'm just gonna have this order now so now we can just import this let's import curly brace i wish there were like a shortcut to import all of our components or size dot elements without having to type it up but let's do here let me know there is a trick because that it's kind of annoying there's like a bunch of code to like have to type that in so let's do close icon side sidebar menu sidebar link sidebar routes inside btn sidebar elements now nothing's happening because we didn't import this anywhere so it's actually let's add this to heroes section so we can see this so hero index and i mean you can pretty much add this at the top so let's just do um right now i'll just say sidebar press enter auto imports for me if not import it like this and where's that here should yeah here we go we got air now perfect so now we can go to sidewire elements let's do import styled why from code style components and then let's do import link because i want to have the uh react writer link from react dash writer dash and then import f8 times from react dash icon f a so now let's do export cons sidebar container is equal to style dots just call this a side back tick back tick let's say position is fixed c index 999 some radius number so make sure it's like on the top i have a width of 350 pixels height i want it to be 100 all right why does it keep doing this i want the background to be hashtag ffc 500 let's do display grid align items center top 0 transition will be let's see let's do 0.3 s just easing out oh let's do right and this is a cool thing with the stock components you can pass in properties in here to where like you can set essentially functions that are either true or false it will trigger a particular thing so actions like here put dollar sign color based parenthesis curly brace now i'm going to create a function eventually we're going to say is open and then go outside the curly brace parentheses the new error function and then it is open is true so parentheses is open it's true how many chainary operators here so question mark quotes i'm going to say set 0 else set to minus 1000 pixels so essentially it's like off the screen and then semicolon there and then let's i'll go ahead and let's do at media screen and max with 400 pixels curly brace with a 100 percent say that there so next let's just call the icons let's just say export cons close icon equal to style of f a time which is like the little x double back ticks here which color will be hashtag zero and then let's do export cons icon equal to style dot div back tick back tick let me show one second yeah okay it's just like sounds like a div or the wrap around it let's say position is absolute top is 1.2 ram right is 1.5 rim background is transparent border is transparent font size to run cursor pointer other one is none and then we got the menu and then the links so let's do export cons sidebar not here should be menu is that equal to a style dot div by back ticks and let's say display grid obviously that splay grid here let's do grid template columns fr because there's a column grid template row grid template dash rows it's gonna be repeats three come on three comma and i want them to be 80 pixels because i only have three items if you would change that depending on like if i show you here like there's only one two three you'd always have to update that depending on your menu and then take the line will be center and let's just do add media screen and a max dash width so i like four let's do like 480 pixels we can just copy this line and i can make like the rows like smaller it's like 60 pixels and let's see so now let's do our expert cons sidebar link equal to style of the link and i take backtick and i'm going a little faster than my normal tutorials because it's it's just pretty much style components like css pretty much so if you think i'm going too fast i'm in the comments below but i just want to switch it up and see if this is better or not so now let's go display flex what's this on items to be center justify content center font size 1.5 ram tag decoration none oh let's see let's dash style because it's a tag or there's a link be none transition so hovering hover over the text 2.2 easing out and text decoration none and then let's make the color uh zero zero zero hashtag and christopher and then hover so let's do and colon hover color tag e three one eight three seven right there and transition 0.2 s ease dash in dash out save it there and now what happened let's go and let's finish that we got the btn wrap and the round work pretty much good with this all right so we almost there so let's do export cons side btm rap equal to start that div style about div with the back ticks and shoes through display flex and that's where the button is now so let's do this for content center let's reach this and let's do export con sidebar routes equal to style of the link backticks and we can set the background of hashtag e31837 let's do white space no wrap let's do padding of 16 pixels by 64 pixels let's do color hashtag font size 16 pixels and a line will be none border is none cursor pointer transition i don't want to this again let's see let's copy this here and text decoration to be none then last but not least we got and colin harbor curly brace copy transition again background will be just put it for like white for now and then color of the text will just be hashtag zero one zero six zero six save this here every time what is this f a times here we go and now what happened to here let's see that export this junk what does it say here let me just refresh just to make sure all right okay refresh this again okay see i hate i hate this new thing i don't know what's happening but like you have everything right and it still says it's wrong so if you're just starting out you go crazy trying to copy someone's and nothing's wrong but it just saying so right now nothing happens and the reason is if i go here and just like let's just put uh it was true so it's not true let's just put this zero there we go so let's command z so that's our our sidebar so what we need to do now is actually utilize some react to uh actually see this so let's go to hero section now we have to import use state my favorites use dates all right so now inside of the heroes section let's set const what is this const and passes an array so the first value is essentially what your state is going to be and then the nexus set is open the function updating state and let's say use state 2 false and then i create a function i'm going to call this one toggle so essentially it's going to be an error function where it basically sets is open so set is open the function is going to say opposites 2 is open the reason i'm saying like this because i'm going to have this both on the um the sidebar and the x if i just had like the side or the x i could just put like previous equals priv but like this map so simple so like um this is a good i guess you can say starter method dude let me know any other ways you can use this or refactor that to do the same effect so now that now i'm a passing toggle into the navbar so that when i click it it actually triggers this function and then on sidebar i'm gonna say passing is open as well and then also i'm gonna pass in toggle equal to talk all that so now right now it's not gonna work because we haven't actually passed any of this into the actual component so for now we're going to go back to navbar index.js let's do structure this right here so i'm going to say toggle and then i want to have the nav icon receive an on click and when we click it it's going to do what it's going to trigger the toggle function that we destructed here that's located in this hero section here that's why i have passed this value here so it can actually know what the heck this actually means so now if i click it nothing's going to happen and you know why because on index.js we've got to go sidebar here let's see we got to set sidebar containers restructure the other values which is open and then also toggle as well and then i want to set sidebar container i need to pass in is open equal to is open because it needs to know if it's open or not and then on click is equal to toggle so whenever i click on the actual sidebar it's going to trigger this toggle function back in hero which is going to change the value from false to true true to false which aka is it's gonna close it so like if i think it should work no hold on let me try yeah so right now you see i can click anywhere on the sidebar and like it's working you see that now ideally if you had like links and stuff you'd want it to like be on a specific thing but for now this is just like right here and i did if you didn't want to have it on the sidebar you just went on the icon you can just say on click equal toggle to icon but since it's on the sidebar technically anyway you click is gonna do it but basically you get the point here you go so now we got bam it is working and then there's another way where you can have like a background and set like the location like where you click if it's outside of it to close it here but for this video i'm to get very simple so this isn't like a 20 hour tutorial but yeah we're good with pretty much the first three components so now let's go ahead and let's create the the main thing the difference of this site is the i guess you call these like the products so just call this new folder let's call this products and let's do a new file here all right so here's to index.js then also new file here let's have it if i hear product or i can say products elements.js here and we do r-a-f-e products and here's the fun part so this one actually interesting it's not too crazy but we also need to create a data file so let's just do a new file let's call this data.js so now let's return so recess div here and let's just do products container and i'll close this out here and i'm gonna have to do this one like line by line because it's gonna be really hard to um actually not really let me just show you what happens so we're gonna say part container let's do products heading and then this is going to be heading for now and then in the products heading we have a product wrapper i'm just naming this your name whatever you want to and then we're essentially going to map through a data file so i'm probably going to create the data hub first because you know like what that world is going on so let's let's create the data file so pretty much if you see the original site it's probably easier click off this each of these products are essentially just an array of objects and we'll just map the room so i don't have to sit there and like hardcode each one so basically if i go here data.js i can say like export cons which comes with product data he names whatever you want to so you go to an array and then we have an object here with data so for instance like i want the image i'm gonna set that to product one so i'm gonna actually name these the alt tag we're gonna name it's like this is pizza comma and then we'll have like the name supreme pizza then we're going to have like the dsc and it's going to be like marin that's misspelled this i came with marinara i don't even notice about marinara on the spots hopefully that's right and then see basil italian sausage what's that you just need to really just fill this up with like random letters for now and then let's do whatever etc and then under that this will be price and i'll have like 19.99 and then um under here i have like a button which is just basically add to cart so this is essentially the entire um this first little product right here so you can see here let me look at this here yes we got the title spring pizza which i called name here the description price the button label would add the car the image and then alt tag is just like it's under the hood like you wouldn't see this unless you're like using something else or like the image doesn't load and pretty much what we can do is just copy and paste that so i'm gonna save myself some time and just copy in the remaining products so basically you just literally you can just copy and paste this three times same thing just make sure you have commas after these two and then you can see you got probably two you said i probably won what the heck is product one what kind of image source is that so what you can do is cool a trick and this is one way i found it work if you try to do like just regular image source link like dot dot slash images slash image one it's probably gonna work for you so this way if you do image or import product one name is whatever you want to from dot dot slash dot slash images slash product dash one dot jpg so now if i do the shift fault down arrow twice i can change this one to two to three and then the same thing here two and three so now let's save this now we have our data files complete for this particular section we're gonna put another one eventually but now what i can do is actually can map through these so like if i do uh here you do like the curly braces and i can say like calls like data for instance dot map and we're using just a general term data because i'm using two different arrays which we haven't created yet normally if you only had one array you just do like productdata.map but since i'm not i have to do data.map or whatever you want to call that map because i'm going to do multiple uh data files so again here pass in two vendors essentially an arrow function curly brace here so in here i'm just passing product for the name you know whatever you want to but then i have index so what we're going to do now i've got to return refund return what you call see let's do product card so this is essentially like the entire uh let me show you the visual so this is like the whole entire thing i call this product card and it doesn't like when you don't add a key to it so i'll just call this index and then we'll have the product image the src is going to be curly brace product which is what we called it up here you can name this you know fried chicken fried chicken.img if you flush your boat but i have it my product here and then all equal to curly brace part that alt and this stuff closing and coming this you can see it's better so next i want to have the product info so i write this by this uh tag here and then this is going to be the product title so yeah curly brace product that name is what i call it you could do tile same thing and then we'll have the product dsc and basically pass in the product.dsc curly brace and then also we have the product price and we'll just do product.price and then we'll have the product button code base will just be product dot button so we're pretty much done with this now we just got to import this and add the styles and then we're pretty much set so let's do import curly brace products container let's do product wrapper product heading product title product card product img yeah please tell me if you find a way to do this faster so it's kind of annoying especially if you're like a mega giant file like you're gonna be sitting all day importing product esc product price and product who is this button and where are we doing this from from slash product elements and why is it oh products heading that's the worst if you missed like an s or spelling i think you'll be sitting there all day long wondering what happened all right so what we can do here is i want you to air so let's um let's put this in the app.js so let's go to app.js under the hero should call this products pass it here close it self-closing tag i want to set the heading equal to um choose your favorite so this part wasn't a part of the data flop you didn't realize it this is separate like on its top so we actually have to make curly brace here and say heading and then also we actually have to uh restructure this so that uh you can actually pass in so let's do heading here and then data and then we can go to app.js and then we can say data equal to curly brace and what was the name of the data again if you remember it was product data because again we're gonna create another products and this one's gonna be like a dessert section i'm gonna pass in product data too and then change it to like desert something so i save this now since the product data is not the file yes i have to import that too so we can say import product data from the slash component slash product slash data and refresh this perfect okay so now it's saying i have the error so now we're going to do is add the elements so we go product elements import styled from style components make sure you spell the right sty led and then we can install this so let's go ahead and style the first thing so let's say export cons products container equal to style.div with the backticks so the width of 100 report with min heights is 100 board heights padding five round top bottom calculate the left right so let's do printed favorite so double parenthesis 100 per width minus 1300 pixels outside this one level two let's do background of hashtag one five zero f of f oh my bad f zero f and color to be hashtag f now i'm going to say export cards product wrapper equal to style dot deal with the backticks display for x let's do flex wrap equal to wrap let's do justify constant center margin zero auto then let's do x sport cons product card equal to style.date with the backticks and say margin 0 to rem line height to the width to be 300 pixels so after this let's do export cons product img equal to styled.img with the backticks let's say height of 300 pixels a min width of 300 pixels with of 100 and a box shadow that's local effects i just stole the pawn eight pixels eight pixels by hashtag fbc500 and let's see let's do export cons product heading let me scroll this up really quick and we're almost to the end guys let's do uh style dot dip oh my bad h1 double back ticks we can say like font size here i'm just going to do clamp again two ram 2.5 view about 2.5 foot width and then through ram now for that what happened we can say like text line to be yes your center here margin dash bottom to be five rep and we obviously we got export cons product [Music] h1 i mean we can name this like h2 doesn't matter yes h2 fully to be 400 and let's do font size to be 1.5 ram then let's do export cons product info equal to style.div with the back ticks that should be constant s and then what we got here let's do um display flex flex direction column i'll do just like contents to be centered align items to be centered padding to round and takes a line to be centered so again i have yet to find a way to show stock opponents visually like normal css so if you have any suggestions let me know but so far you have the hard coded so let's do export const product esc equal to style dot p with the back ticks margin dash bottom of one round and let's do export costs product price equal to style dot p of the bag taste again let's do margin dash bottom of one rim and font size of two red and what else we got last one thank you okay let's go export cons product put in here equals two style dot button with the back ticks and font size one ram let's do padding of one ram by four rounds border none background is hashtag e three one eight three seven color hashtag f f and transition to be 2.2 ease out oh and we're going to add the hover so let's do in colon hover curly brace background hashtag ffc 500 transition 0.2s is out literally matters to be honest and then cursor pointer with the color of hashtag 0. so if i say this and uh products hitting that export from participating products heading okay and as you can see we just created this perfect so again it's really hard to show like the styles live since stock components unless i do like inline maybe you could but that's just like a pain to refactor but ideally let's just go through again what just happened the styles of the styles if you don't get the css you can play around with it but uh i mean that's just regular css but basically we map through the data file aka product data passed in these object values and displayed them by doing this and you just do whatever you call this you know product chicken taco whatever you want dot whatever you call your data file which is image alt name name you can really change what you want you can call this you know title description whatever paragraph you have to point and that's pretty much that right here so now let's create the uh let's do we got the feature section so the next one this thing right here this one's pretty simple but let's do it very quick so let's do a new folder and i'm gonna show you the second data file after this one to show you how to create this without having to like write any extra like jsx just straight up an object which is pretty cool because then you could like refactor this and make this like scale up to the moon but let's do feature new file amazon.js new file feature elements elements.s so here our afce feature and you can just put much add in the features so this one's like super simple so i didn't even like go in like make it crazy let's just call this feature container let me get rid of this dip below and then i just got pretty simple here for like h1 pizza of the day if you want to get fancy you can call this like um you know feature each one and actually style it but like i'm just gonna do like this for tutorial sake i'm gonna say truffle alfredo so i'll start with 24 karat gold dust i don't know what gold tastes like but yo let me know if it tastes any good and then i got feature button just say order now and i'm pretty much done there so let's just add this up so let's just do imports feature container and feature button from the slash feature elements save this here and then we just style this and we're pretty much set so let's do import style from style of opponents i'm going to import this feature pic feature pic from that slash. images slash featured it should be yeah i have like a bunch of images going through testing them out so feel free to have fun with those this is the export pots here and the background heroes is going to be the same as the hero section so if we go to hear elements you just copy this or the whole line and the only difference is we're changing the image background to our feature pick next we're going to set the height to 100 height let's do max heights of 500 pixels don't want to be bigger background position to be center background dash size to be cover we've got display flex got flex direction column and then we got justify center basic flexbox align item center and let's do color after i have f text align to b center and padding zero one round and then i'm just messing the h1 instead of making a component obviously you can change this let's do font size clamp three rim comma five you put with combo five ram and let me copy this we're still inside the feature container change this to a p tag and let's change clamp first minimum value one run two ram three viewport width and let's set the margin bottom to be on one round and then let's finish it off with the buttons let's do export cons feature button equal to style dot button back to backtick and let's just say font size 1.4 ram let's do um padding of 0.6 ram three ram border is curry brace none let's do background of ffc 500 color hashtag 000 and transition oh 0.2s is out so underneath there we're going to do and colon hover curly brace color hashtag fff background hashtag e31837 transition will be 0.2s is out and cursor pointer whoa save it where's this little feature let's see your features section now right there actually let's see let's refresh actually i don't think i have to import this anywhere yeah let me import this because you can't see it if you didn't import this app.js and just call this feature let me show em auto yeah auto imported and bam there we go feature section is done so now let's create the next dessert section which is here this one just by creating a data file so i'll show you how easy it is like watch check this out all right so let's go ahead and create the second features item which is essentially the uh or the products i guess you can say data file here which is the dessert section so right now we got this so pretty much this is not very difficult all we need to do is go to let's close these folders down go to products data js and you could just sort of copy and paste this so essentially you can just take this and paste it and just change this like product data to but i already got my data file so i'm not going to sit here and retype it so i'm just going to copy in my stuff let me just go here and do that there so now these are different and then i'm just going to copy in the images which is basically the uh just import i call these like sweet one two three and i have the naming it's like weird because uh i was like testing out different photos so you're probably like why is this three by one it just like the name you can change this if you want to it does the same stuff but now if i go so now we got the second array of objects i go to app.js if i go command b i sit here and just straight up paste this down here i can change this to uh let's see what did i put for this yeah i can change this one out to sweet treats for you i can just call it this is the second data file so and i product got to import this and say product data 2. so save it and now you can see we just created this entire little component section it took us what couple seconds a while besides like importing the actual data and you can see how simple and easy it is just sit there and like reuse of files without having to sit here and like go crazy hard coding everything so that's one way to do that and then last but not least let's just add the footer so now i'm just going to go components new folder just say footer and then in the footer i'm going to say new file index.js and then you file for elements dot js so here our afc e footer and pretty much we can just add in the footer info so basically we can say here change this to let's do um footer container and this one's pretty basic but uh yeah this just right here so there's a little container close it out and basically you can just add in it's called this photo wrap and i'm just call this social media because we just got like icons and then we'll have the social media wrap and i'll have the social logo two equals two slash close this should be pizza and then we're gonna have the under there just call this social icons and pretty much we can do like a social icon link so let's do this let's close this out and i can just pass in straight up let's call this um well actually yeah this should be h or f equals two slash targets equals to underscore blank and then we can make the aria label equal to facebook and then here just pass in like the facebook link so it's just going to be fa facebook slash and they can just rinse repeat copy and paste this so do like instagram youtube and then twitter and then also we need to add um rel equals to no opener no referrer and then we just copy that onto each of these and ideally you would just sit here and switch out these with like you know like this would be like instagram and then this could be like fa instagram which is default i'll react icon stuff so i'm saving some time to just copy in my footer code so that like uh i have to sit there and like retype everything but that's basically the general setup and then i'll just import all this so yeah let me add these so basically i'll just copy this to make save some time so import react icons import footer elements and then just go to footer elements bam let's just straight up i'll just copy this in because it's a footer guys nothing something fancy and i can just go through it but basically you got the wrap you know just flex box here max with some more spacing between so that they're separate the react router lock link so essentially the social logo you want to click it and then the icons are a tags because you've got a link off and then i just pass it into here or should be like that and it should auto import and if we did everything properly it's right there so it's basically simple nothing crazy just like the box face between but you guys don't mess around with that but that's basically the footage nothing fancy there and this is what we created so far so pretty much you see here this is the end so if you guys enjoyed this video give us a thumbs up share this with your friends let me know in the comments below anything to revive the code make it better or any other cool tricks and tips you found and aside from that guys i'll see you in the next video peace

Channel: Brian Design

Views: 95,874

Keywords: react website, react website tutorial, react restaurant website, react ecommerce website, react website design, react website 2021, react website responsive, react website from scratch, react website example, react website portfolio, react website tutorial for beginners, react website development, react website using styled components, react js project, react js full course, reactjs tutorial, react js course, react js, pizza website, restaurant website, ecommerce website

Id: GlROncAX4XI

Length: 78min 52sec (4732 seconds)

Published: Sat Oct 31 2020