#01 Complete React Portfolio Website Project | NavMenu

[Music] [Music] so [Music] [Applause] [Music] hello everyone welcome to the part 1 of the project today we are going to create these navigation menu as you can see that in the top of the web page so this is the menu that we are going to create we are going to use react.dom to create this navigation menu and also we are going to make it fully responsive uh let me show you uh what will be the mobile as you can see that uh in the mobile we are going to see this nav menu something like that whenever i'll click this hamburger menu the lamb menu will come from the top of the page and we can close it and we can go to any of the pages as you can see yeah that's what uh we are going to make in this video and i hope you guys will like it also if you want to get some interesting tips and tricks about web design and development you can follow us on instagram the handle is instagram.com web underscore cipher also if you face any kind of problem with this tutorial you can join our facebook community group we have a great and helpful community and you can post your problem there so with that saying let's get started [Music] so here as we considered we have our averages and also i'm using a separate terminal uh as you can see here if you want to use uh the visual studio code integrated terminal you can actually use it from here i'm using a separate one here as you can see so first of all let's actually start the server so for that i just can use npm start as you already know which will start the server and as you can see that the server is open here and i can see my welcome text and if you notice that i only change the name of the site and you can see here so for that what you can do you can go to the public folder and here you find the index.html and from here you can find the title and you can change the name of the site and also if you want to change the fair icon here uh what you can do you can actually link the fab icon here and make sure that your favorite can is placed inside of a public folder because this fab icon is actually a static file so for that it should be inside of public folder so i will not change it and i will keep it uh the react logo here so today as you know that we are going to create this navigation menu and we are going to use react router dom for that to create the all route as you can see that the about route projects route the contact route so let's get back to our project here so let's say that first of all let's create a component here for this nav menu and inside this source folder inside the source folder let's get a new folder name it components so inside these components folder let's get a new file and this will be our first component so let's name it nav menu so you can name it anything and also if you notice that the first letter is actually capital so because the reason behind that is it is a component and a component can be used in multiple places so for that reason we just uh give the first letter capital uh this is just a naming convention uh nothing special so let's create this nav menu.js and as you can see that the nav menu.js is here so first of all let's actually import react here from react and also let's create a functional component so export uh function export default function and let's name it nav menu and here let's actually return a simple h1 and let's say that uh hello from the nav menu and if i save that we can't see it because we are not using this snap menu anyway so let's go back to our app.js and here instead of this text so here first of all let's actually import this nav menu and here as you can see that import nav menu from the file name so let's give it the path so inside the components i have this snap menu file and from the file i will actually import the snap menu and once we imported this nav menu now we can actually use this component inside this function here so let's actually use it so let's say that nav menu and let's actually create the component and if i create the component so here as you can see that i have a spelling mistake sorry that's my mistake so once we resolve that as you can see that we can see in the text from our nav menu so inside this nav menu we are going to create this nav list so for that come here and instead of this text let's say that i will have a div inside this div i will have a ul and inside this url i will have link sorry list item first one will be the home and let's actually give it about and we have projects and the last one is the contact and if we save i should see the list as you can see so right now this text as you can see that these are actually a normal text we need to make it uh nav links as you can see here so for that first of all let's go back to our app.js so because we are going to use react router dom and for that we need to uh import our browser router so let's go back to our app.js and here let's import browser router so let's give it a small name the name i think router will be fine so browser router as the router for from react router dom router is here right now we are not using this router let's actually use it here so we need to wrap whole thing with this router so let's actually create the router first of all and we need to wrap this nav menu with this router and once we do now we are inside of a router so here uh what i need to do first of all in our nav menu let's actually go back to our nav menu here so as you can see that these are all just a list item so we need to make it link so for that let's actually cut this text and break it and here we are going to use nav links nav link and this is from react router dom so for that we need to import it so in our visual studio code we have a auto import feature so for that what you can do you can actually write the name and after that place your cursor in the end of the name and after that control space and it will give you a option for auto import as you can see that i can see the nav link auto import so if i enter hit enter as you can see the nav link is auto imported here from react router dom so this is a really helpful feature that you will find in visual studio code so you should definitely use it so now we are actually uh importing this uh nav link after that let's actually give it a text here so the text will be inside of this nav link so let's say that home and now uh we should have another attribute in our nav link which is the two so if we consider it as a link these two will be the href means uh whenever i will click this home where should we will go so if i click the home we will go to the our home page means only a forward slash which indicates the home page so let's do it for all of the link that we have here so let's do it for this about so nav link and inside that the text will be about and here the two will be slash about so this is the route that we are going to have for the about so same thing for our projects so let me copy this and paste it here instead of about i will have projects here and the route will be the project projects actually and for the last one the contact and here let's say that contact and the route will be contact so now if i click one of them let's actually click the about as you can see that the route is actually changing now the route is actually uh about and now it is projects now it is contact means we are actually having the perfect nav link here as you can see so after that what i need to do i need to actually change the content means whenever i will click the about i should see about page if i click project i should see the project page so right now we are actually having the same thing that we have in our app.js means the nav menu but we are not seeing a specific page here so for that uh we need to create the pages so let's create the pages you need to create another folder inside of the source so let's create a folder inside of the source the folder name will be page or pages so now let's create a new file here and this will be our first page so let's actually name it home dot yes so now as you can see that we have our home.js and once again we need to actually do the import react and create the functional component and to make it easier what you can do you can install a plugin here extension actually so the name of these uh i think i already installed this this one i think yeah so you can install uh this extension which will give you some uh really helpful snippets so once you installed this uh extension what you can do you can actually write rfc which will create a functional component and as you can see that the react is actually already imported we have the name according to our file name and we have a pretty good extractor to start with the file so now we can write anything inside here directly so let's say that this is home page and if i save now yeah that's our home page so it is really helpful when you are writing the same thing again and again so instead of that what you can do you can write rfc or fc to create a functional component which will create a functional component for you so now we have our home.js and let's actually create the other pages about projects and contact so inside of our pages let's get another file which will be about dot js and here let's say rfc and here let's say that h1 this is about page and let's create the next one which is the projects dot jazz so basically this is for the the name is this should be projects.js not comma so rfc once again and here i will have the h1 this is projects page and for the last one let's actually create the last one new file here and the name will be contact dot js so here once again rfc and it will create and set this h1 let's say that this is contact page now we have our all the pages means all four pages as you can see here now what i need to do i need to go to our app.js and if i uh want to use them let's actually use the home here so home and let's actually do the emit abbreviation and after that i can auto import that so here where is my auto import yeah here is the auto import and if i hit enter as i can see the home is imported here so if i save now i can see the text from the home page here so if i uh do the same for the about projects and contact so let's say that about and auto import that and after that projects if i can spell or import that also and finally the contact and how to import this so if i save i can see all the text as you can see that from uh the pages as you can see so right now we are actually having all these pages together in our app.js here as you can see so now what i need to do actually i need to tell the react router dom that whenever i click about means whenever the route will change and it will be slash about show me the only about page content don't show all the content show me the content according to my routes so how can we say that so for that what i need to do i need to uh import couple of things here i need to import the route and after that i also need to import the switch from react router dom so now we need to use this route and switch so how can we use them so for that what i need to do after the nav menu let's actually give some space here so here first of all let's actually use the switch here not the switch so inside this switch what i need to do i need to create our individual route so let's create our first route here so the route as you can see so here i need to give it a path so path will be so let's actually create the route for our about page so let's say that whenever we will have a path of about whenever we will have a route of about what uh which one we wanna show we wanna show the about component so let's actually give the about component inside of our route so now as you can see that we have route here which path is slash about and whenever we will have this route we will show this about component and now also we are actually facing an error i think this will be the switch something like that now yeah now as you can see that uh it is working so now you can see that we can't see our about text here we can see the text for home projects and contact but we are not seeing the text for about because now we are saying that we will show this about component only when the route is actually slash about so if i click this about and now i can see the about page content because now the route is slash about so that's what we need to do for our all of the component so let's actually do it so let's duplicate it and let's say that the second out will be for our projects projects and whenever we will call this we will have our project component here so let's do it for our contact and let's say that contact so now let's actually test it out let's remove these two components because now we are actually having this component here and here as you can see so if i save now i can see only the home because the home is actually our default component that we have we will get into it in a moment so let's actually check it out let's see that if i click the about i can see the about page only if i click the projects i can see the projects page only i can see if i click the contact i can see the contact page only so also beside that as you can see that every time we have a home page because this homepage is outside of our switch so let's actually create a route for this home on also so if i come here let's create another route here and for this one the path will be a forward slash and whenever i will have a path of forward slash which means i will have my home page and let's remove the home page from here so if i save now as you can see that i can't see the home page anymore because the home page will be shown here if we have a route of forward slash only means whenever i will click my home page i will see my home page here as you can see so there is a problem right now as you can see that it is working perfectly but there is a problem so let's say that if we have this route means if we have our homepage route in the beginning of our switch statement as you can see that we have a home page and if i go to the about i can see that still my homepage is showing but my route is changed why it is happening because as you can see that we are checking here uh we are checking for a forward slash only and here if you notice that we have already a forward slash route and inside of this switch if it match with one of the path it will show the component and it will not go further so it will check for this forward slash first of all and it will find this for slash and after that it will not go further and it will not check for about our projects so every time if you click another route as you can see that the content will remain same because it will check for the forward slash in the beginning and if it finds the forward slash route as you can see here it will show the component content and it will not go further so to fix this problem what you need to do you need to have this route in the end of all of your route so we have all these three route and after this all of three routes we will have our home route so if i save now this should be fixed so right now the route is actually going perfectly and after that let's actually create the nav menu here as you can see that the nav menu is not looking good so let's actually give some style to our nav menu so let me close all of this uh page and let's go to the nav menu.js so let's actually give some style here so for the style as you already know we are using uh style components and for that what i need to do i need to create a constant and let's actually give it a name so let's say that nav menu style and here let's say that styled dot div and we need to give a couple of vectors here and inside this vector we can write our css so also you need to import this style from a style component so for that as i already showed you place your cursor in the end of the component name or the thing that you want to import just press ctrl space and it will give you all the possible intelligence and here you will find the auto import thing so if i click that as you can see that this style is imported from a style component so right now let's actually give some style here so let's say that let's say that background will be red and if i do i can't see any kind of background red because we are not using these styles anywhere so let's actually use this we will use this in this div so right now as you can see that we have the style for div actually so for that uh we need to make sure that this is the div that we are going to replace with the name so navy uh what is the name nav menu style so if i do nam banyan style and now it will apply this style inside this div and if i save i should see the background color red yeah it's working so right now uh let's actually give some style here so position will be so i will go fast here and i will not explain every line here so the position will be fixed because these will be a sticky header and let's say that the set index will be 100 means it will be in the top of our every layer so top will be zero and also left will be zero and width will be let's say that hundred percent and uh padding will be uh let's say that one ram and zero for the left and right and if i do uh i can see this because right now it is actually having in the top of our every layer so that's why we can see it is overlapping so after that uh what i need to do and to give it a background color so background will be so if i go to my global style so here is the styles and inside that i have global stats so as you can see that inside the global style i have some variables here so those are the variables color variables for our the project so from here as you consider we have a variable for dark bg so let's use it so variable dark bg and if i use that so as you can see that we have a background color and for that background color we can't see the text which is behind this navigation menu and after that let's actually do some style for our ul and let's say that the max width will be 1200 pixel and margin will be 0 and auto and after that let's say that the width will be let's say that 90 percent and our text alignment will be center and if we save as you can see that and after that uh so this is really handy from our style components that we can use nesting very easily here that we saw in sas so let's say that display will be inline block and after that border radius will be 8 pixel and transition will be 0.3 second ease and background color and after that let's say that whenever i'll hover one of the item so the same thing whenever i'll hover one of the things so let's say that background color will be bar deep black once again these all variables are coming from global style as you can see here so let's say that for our anchor tag display will be inland block and after that uh font family will be i already have the font face for roberto mono regular and if you want to see the font face you can go to styles typography and here you will find all the font face and as you can see that we have a robot omano regular here so after that let's actually say that padding will be uh something like one rim for the top and bottom and two ram for the left and right and finally the font size will be torn if i do i can see the fonts that is just increased here and the color let's say that the variable gray one and after that the outline will be none fine and after that let's say that uh whenever we will have a active class so in our uh this nav link which is from our react router dom we have a special feature here so let me show you so where is our menu so here as you can see that here we have a class this is the class is actually indicating that we are in now homepage if i click the project the project has now the active class and if i click the contact now as you can see that the contact is now having the active class so the problem is as you can see that this home one is actually having these active class uh constantly we need to uh fix that so to fix that here what you can do whenever you are having these home as you can see that home nav link you can pass another uh attribute which is actually exact so which means whenever we will have the exact home uh forward slash home uh home route we will have the active class then otherwise we will not have the active class for the home so if i come here if i if i click the home as you can see that i can see that active plus if i click the about now the active class is actually removed from our anchor tag now it should be inside of our this about as you can see so if i click projects now it is now in the projects if i click the contact now this active is now in contact so what we can do with this class we can actually give some separate style for our list item so for that here i can say whenever i will have a class of active i will change the color which will be the variable white and if i save as you can see that the contact is now appear white here so here as you can see that we have our net menu and i think uh we are using a little bit more space so in our anchor tag let's increase the padding to 2n yeah right now as you can see that it is perfectly accurate and we have our nav menu and there should be a hover change in our ally but for some reason this hover is not working the reason behind that is actually it is deep dark the variable name is deep dark not deep black now as you can see that i have this uh hobart background color change yeah it's looking fine so after that i need to make this uh whole thing responsive as you can see that right now it is actually it is not having the responsiveness so let's actually have the responsive so for that what i need to do i need to have a icon first of all so to have the icon let's actually have the icon inside of our nav style this nav style inside that let's actually have a div with a class of mobile menu icon and here let's say that uh we will have our nav icon so inside that uh we can say if i search for that yeah we are using react account and from that let's actually grab the icon md menu this should be together and as you can see that all the menu from material design will be here so as you consider this is the md menu that we are going to use so what i can do i can actually write this component directly here so md menu and after that we need to import it so control space here and it should be imported automatically no it is not i think we need to import this manually uh for some reason the import is not working for here so it should be md menu from react icon slash md so if i come here i should see the menu as you can see that the menu icon is here so after that what i need to do i need to actually uh have a close button or close icon you can say so this close icon will be inside of our ul so instead of our ul let's create a div and with a class of close nav icon and here i will have my md close so this is from here so if i search for md close as you can see that here is the md close so this is the name and you can use it here and also if you want let's see no there is no auto import yeah i can see the auto import right now yes uh now as you can see that this empty menu sorry this empty close is now auto imported for some reason i can see this error and the icon is not defined sorry md close md close yeah now uh i can see the icon here and i need to do some style for that so let's do the style first of all and after that we will add the functionality so here uh i can see that nav icon and what i need to do in our large device first of all i need to remove that so here i can say that after this here let's say that however i will have this mobile menu icon first of all let's say that position will be absolute and the right will be one ram and also the top will be uh let's give it a m and the width will be for ram and cursor pointer and the display will be none and outline none so we are actually having this display none because we don't want to see it on a large device we want to see it only in mobile device let's actually create a media query after this so let's say that media only screen and max width 768 pixel and whenever we'll have inside of this range uh i want to show my um icon here so let's copy this and let's say that display will be block and as you can see that this okay now as you can see i have lots of typo here screen uh only screen so let's actually remove it here uh from our large device and if i save uh i should see the uh the icon is gone as you can see that if i go to the range inside the range i can see the icon here so that's how we are actually maintaining this uh nav menu icon so however we will be inside of this range we will see it otherwise we will not see the icon so and after that i need to actually do the same thing for our this uh close icon so here uh in our normal style let's say that if we have any kind of close button close nail icon the display will be none so as you can see that i can't see it but whenever i'll go to the inside of range means whenever i'll go to the mobile device i'll just say that close button close name icon will be a display block so now as you can see i can see it but whenever i'll go to the outside of the range i can see it i can't see it so now here as you can see that uh inside this unordered list i have our close button and also i have the list items so let's actually give some style to this uh list item whenever we will see it in the mobile device so inside our media query here let's say that nav dot net items here let's say that transition will be 0.3 second is transform and also background color will be same deep dark and is this nav items actually we will have this nav items in this ul so class name will be nav items nav items yeah so we will have these nav items back on color deep dark and let's see i can't see the deep dark item background color okay because uh my mistake there should be a another dash so now as you can see that the background color is actually deep dark and after that uh what i need to do i need to do some more style here so first of all let's say that the padding will be duram so padding will be 2m and also let's say that the width will be let's say that 90 and also max width let's keep it 100 pixel and if i do as you can see that the max return is now 300 pixel and border yes will be top pixel and after that position will be absolute okay great uh whenever i'm having this position absolute now what i can do i can position it so let's say that right will be uh one run and also the top will be so higher we wanna have this so from the top uh we will have a variable here so let's say that inside that the top this is a css variable top will be wondered because uh we wanna have this top in multiple place i will show you so let's actually use this variable here so bar one ram sorry bar top means it will be uh from the top one and after that uh let's actually uh have some style for this close icon so this close icon is inside of this ul as you can see so for that what i can do i can use the nesting here so i will have this something like that and after that let's say that the width will be something like theorem and margin will be 0 0 and 0 and auto yeah right now as you can see it is in the right side here so after that uh let's actually give it the cursor pointer now as you can see that we can click it and after that uh let's say that i want to if i click open this let me show you whenever i open this as you can see this is a div and inside that i have multiple items i have svg i have path so what i want is actually i want the click event means whenever i'll click this button i will add this click even later but i want the click event in this close nav i can div so what i need to do for that i need to make sure that i don't have the pointer event for the element which is inside of this div i don't want to have the click event for the svg i don't want to have the click event for that path i want to have the click event for the nav icon only so let's actually remove the pointer event for this svg our path so whatever we'll have let's actually select that with the universal selector and let's say that the pointer event will be none so it will make sure that inside this uh close never can whatever we will have we will actually have no pointer even for those element so after that uh let's actually go and do some style for our list item so which is inside of our this ul so here let's say that display will be block instead of in the block and margin bottom will be one rim now as you can see that i have nicely looking uh hamburger menu as you can see but right now we don't have any kind of functionality so let's actually add some functionality here for the closing um for this uh close i can and also the hamburger menu so for that what i need to do i need to use the react hook here so first of all let's actually use our first react hook which is use a state so let's actually get a constant here and let's actually name it show nav and let's create the second one set shown f is equals to user state and also the default value will be the false i import this so auto import here and right now as you can see that oh this should be false yeah so right now as you can see that uh we have this user state so here as you can see that what we have in the user state we have this shown app it is a simple variable and also we have another function which is here as you can see set shown app this is a function which will allow you to change the value of shown f means we have a variable of shownef and we have another function which will allow you to change the value of the shown f i'll show you how we will use it here what i need to do so let's say that uh whenever we will click one of the icon so sorry uh whenever we will click the close icon where is the close here is the close icon so whenever i click that what i will do uh on click on click we wanna run the set shown app so we will make it inverse as you can see that uh for that i can use a exclamation sign and after that the name of the variable which is shown f so right now what it will do whenever i click i will actually change the value of this shown app so here we also need to add some other attribute for that so let's say that the role will be by the way this is from the eslint and here uh we just can see that button the role will be button and also let's say the on key down we need to add a also keyboard listener and here let's say that set show nav it will be same on keyboard uh on key down we will do the same we can actually copy this thing and paste it inside of our on key down and finally we need to add a tab index the tab index will be uh default one the zero and if i do uh there as you can see that we don't have any kind of error so these are the things uh let me actually explain you one more time so however i'll click i will actually uh set the show nav and make it uh inverse value means if we have the value of shown a false we will make it true if we have the true we will make it false so after that uh we have a role of button after that we will have the same thing on key down means whenever i will actually have that tab index of 0 means whenever i will actually press my tab as you can see that it is now selected and after that whenever i will press any key it will uh it will actually run this event means whenever i will press any key down it will run this function as you can see here so here i will do the same thing i will actually inverse the show nav variable so that's what we have we are changing the value of shown app whenever i will click it so but uh we are not doing anything with this show never so now let's uh use this shown a value uh somewhere so that we can see it in action so here in our class name uh in this ul let's actually use it let me increase it a little bit if you can't see it so let's say that instead of nav items so here let's actually check the show nav so if the show nav is false i wanna return the nav items class name and also with that i also want to have a class which is a hide item so whenever the show nav is having a value of false we will have these hide item class as what we want to have else we want to have only the nav item class so let me actually explain you one more time here as you can see that we are actually checking shownab if the show nav is false because as you can see that we are actually having this exclamation sign which means we are checking the opposite opposite thing means in this case we are actually checking for false so if it is false we will have this class means we will have two class we will have nav items we will have show item sorry high datum and on the other hand if it is true we will have only one class which is the nav items i think it is now clear so if i have this let me actually see in our inspect here and let's go to the ul here is the url so if i click that as you can see that the class is actually changing whenever i am clicking uh one time it is having this hard item and another time it is not having the class so it is working perfectly now what we can do we can actually add some style with this height item class let's add the style here so let's say that whenever we will have this this hide item will be actually in action only inside of our media query so inside of our media kodi let's say that nav sorry not nav hide item so whenever i will have this class high datum what i want to do so let's actually make it display none and let's see if i click that as you can see that it is not displayed on so right now as you can see that we have our display none and whenever i will have this hide item class i will actually display the nav or wherever this class is the item will be display none so as you consider i have this nav item and whenever i'll click that i have these hide item class and for that reason as you can see that for that reason the display is none for the element so i can't see the nav menu anymore so that's how we gonna actually add the functionality here so display none so instead of having the display now there is another way how you can actually make it so we will use transform here so transform and translate uh y and here the value will be we will actually calculate it now we are going to use this uh variable that we made in our nav items so let's say that uh here calculate minus 100 minus bar and the name of top variable that we have so if i do that so here as you can see that if you saw uh it is actually going upward because we are actually making the transform translate y and we are making the value in the minus so that it goes up out of the window and now we can't see it so right now we are having the functionality for only the close button uh let's also add the functionality for this uh hamburger menu so the functionality will be similar so for that uh we can actually copy this attribute that we have in our close nav icon div so let's copy this last four line we don't want the class name so copy this and paste it here so here we have our nav icon sorry nav menu here as you can see so here is the div as you can see inside this div just paste the copied code so if i save now i should see it working so if i click this i can see that our menu is here if i close if i click the close icon i can see it is perfectly functional so now as you can see that it is working perfectly with this variable if you notice that we are using this top variable because if you remember we have this top variable here and we used it in the top as a posi where now we are actually having a position absolute and we are actually positioning it from the top one rem and for that reason we need to make sure that whenever we are having a transform transmit y we are actually subtracting or we are adding this minus one ram with this hundred percent and it will work perfectly so fine and as you can see that we have our nav menu working perfectly here what else we need to do here uh i think we need to add some padding padding 0 which will solve the problem right now we have a padding if you remember we added the padding here one ram but in our mobile device we don't need it anymore so whenever the media query will start we will actually have the padding zero and if i save uh i can see in my content back as you can see yeah so if i go to my projects we are now in a project if i go to my about we are now in about but the problem is uh whenever i will click one uh page here means whenever i click one link we can see that the route is changing the content is changing but the menu is still here uh we want to close this menu automatically whenever we'll click one of the icon sorry one of the item so to do that what i need to do i need to do the same thing that we did in our close button so here as you can see that in the close button we are actually doing this uh on click roll on key down and tab index so copy this phone line and paste it in our uh nav link so here we have our first nav link and after the exact let's actually paste it and now remember i'll click this uh home route as you can see that now we are in the home page and also the nav the nav menu is actually closed automatically so we need to paste it inside of this nav link in our every list item so paste it and save it and also do it here also do it here so now as you can see that uh if i click about we are in the about if i click projects if i click contact everything is working perfectly fine yeah that's it uh we have our nav menu working perfectly here we have the responsiveness we have our uh default nav menu style here with the direct router dom we can't see the text here because uh the text is actually under this uh nav menu and in the nav menu we have a same background color the background color that we can we are seeing in our page so if i remove the background color i can see the text but it is uh under the nav menu style means nav menu div so that's why i can't see it uh but that's not a issue and also here one more thing that we can do in our nav menu icon we need uh we can do the same thing that we did in our closed network and we can actually uh remove all the pointer event that we have inside the icon so here i can say just a pointer event none and this will remove all the pointer event inside the svg or any kind of element will not have any kind of click event so that's it uh we have completed the nav menu here and i will see you in the next part of the project so that's it guys if you like this video please give it a thumbs up and don't forget to share it with your friends and family also if you want to watch more video like this one please subscribe the channel and also turn on the notification bell so that you can get notified whenever i will upload my next video so my name is sarfan and i will see you in the next video till then bye bye good office [Music] [Applause] [Music] you

Channel: WEB CIFAR

Views: 12,075

Keywords: web cifar, shaif arfan, react website, react website tutorial, beginner react js project, build a react website, how to make a react website, react website tutorial for beginners, react website project, react website from scratch, react website portfolio, react website development, react tutorial for beginners, react js project, react js full course, react js website, reactjs for beginners, react portfolio website, react portfolio project, react project

Id: w8NSgfHfLug

Length: 55min 27sec (3327 seconds)

Published: Mon Apr 26 2021