Dropdown Menu - React Tutorial for Beginners

before i start give me a few seconds to advertise my printable products on sg shop your people like scroll out a symbol of the dev and a celebration of life check out my essay shop below description in there you can find other amazing products [Music] hey yo what's up guys this video is for the reaction videos oh i mean this react tutorial for the beginner in this video i just keep everything simple just creating a drop down menu if you're the beginner who's learned react this video is for you you will learn some basic html success and of course react in react we have some fundamental concepts such as component and composition hook before we get started i just like to say this video maybe move at a very fast pace so you can pause the video or slow down the playback speed if you're new here make sure you like and subscribe my channel so you don't miss any of my video in the future now let's get started before we get started we actually need to download node.js so you can check out nodejs.org and download this recommended for most users then you can open up the command line in vs code and run npx create react app it's a packages thus kind of sets everything up for us the whole environment to start writing react code a few moments later [Music] now we can run npm start and it's just gonna open up a live development server so you can see how our react code work in a web page here we have a react logo and some text [Music] in app.js you see a function whose name start with a capital letter you can think of this as a component it looks like a normal function except right here different from javascript is we can return a div and you maybe get confused a little bit but don't worry i'm gonna add egg one hello react and we have a component we support it and then our index.js we import react and react dom okay now right here we have something that looks so strange dot create root that's because react dom dot render is no longer supported in react 18 we use create root for the supply container and return the root the root can be used to render a element into the dome with root.render and put your element right here but randomware there's another folder in the root directory of your react project named public in this folder there is an index.html5 you can see we don't have anything in our body here but we have this div id root so everything get generated inside one div and now if we take a look here it's gonna say hello react we successfully render it this function all right but what's going on here because we usually would not be able to use div inside function in fact if jsa gsa is not actually html but the syntax extension for javascript does allow you to write html in your components but before we continue to create our component let's open up the indexes 5 i'm gonna define some global css variables as our theme [Music] i also do the same thing for the interest list and link element so we finished the initial setup now we already start building the drop down menu inside the app component i add a new div with a class name menu container notice that this is different from the regular html which is normally just class inside of it i have another div with a class name menu trigger where whenever i click on it it will show drop down menu i put my portrait image right here [Music] now i'm gonna open up the css and apply some style to the image i want it to show in a circle at the top right corner so these are all i need [Music] all right come back to app.js i will create a drop down menu so we have a div with class name drop down menu inside of it i have some text like the user name and career continue to add an authorized list type with drop down inside of it wait what is drop down item component especially functional components make it really easy to break your application down to a lot of small reusable pcs so right here i will define new component named drop down item and it returns gsa inside these parentheses we go ahead and add an html li inside of it i have an image type for the logo and a link tag to redirect and now the questions become how do we add multiple drop down items inside the ul tag well we just simply multiple drop down item here but i wanted it drop down item to show different information meanwhile we just have one template right here in react components can pass data and ui element each other using props add props as an argument to your function and then you can breakfast in your template before we continue you can find my icons in the code on my github they live in the icons folder and then you can use this icon by importing a statement to the top of the five that references the path to your icon you import the react component and then name it whatever you want and you can do the same thing for all the other icons okay suppose i want first drop the item show the user icon and the text my pro 5 i just simply pass them in the parentheses so your browser now showed exactly icon and it takes you then we'll focus on the css for making it looks good [Music] [Music] i use both top to create subtle lines let's make boundaries between each drop down item a strap down item is hovering over we might want to change the color slightly we'll target the hover on the icon and the [Music] text to make this color change smoothly i will add the transition where i put the speed variable as 0.5 seconds [Music] okay we go back to our drop down menu i want to add another drop down item and because we already have drop down item component with two props here so we can easily multiple drop down item with any information you want now to open and close a drop down menu i will need to help some stay active and inactive in react we can manage stay using hook called use day so first i need to import it from react in app components we call the usda function with two values inside the bracket the current stay and a function does update stay we can also set the default values as an argument in the usda phones because i want to drop down menu is closed at first but now i'm the user who want to click on the image to show and hide drop down menu to do that i will an unclick event handler in the menu trigger div when the user click on that to set open functions best regard for use day will flip the open value to the opposite of whatever is currently is it's useful for toggling things in our case i want to show the drop down menu when open state is set to true and hide drop down menu when open state is set to phones so we add active or inactive in the drop-down menu class name depending on the open state [Music] [Music] next go to index.css adjustably make drop down menu active stay opacity 1 and in active state opacity 0 i will add transform translate y and transition 0.5 seconds to make it look more smooth [Music] okay that's look good however there's still one problem the menu cannot be closed without clicking trigger button again which is not a great user experience it would be much better if the menu would close when you click the trigger or click anywhere else beside the menu but this video is too long so i will show you how to deal with it in the next video if you like this please hit the subscribe button and give me a thumb up have you have a nice day and bye for now [Music] you

Channel: TK

Views: 86,296

Keywords:

Id: KROfo7vuIGY

Length: 11min 4sec (664 seconds)

Published: Sun Jul 24 2022