Advanced Dropdown Menu - React & CSS Animation Tutorial for Beginners

[@dagoeneko]

I honestly have never seen a tutorial this short with such good quality, incredible job 🙌🏻

[@Fireship]

I try to pack 1hr into 10 minutes, so this video was actually 6 minutes too long ;)

[@darkfoxwillie]

@@Fireship any possibility you do this step by step? sometimes is too fast lol

[@yusukeko78]

Seriously, it feels "just right" to let you think through how to do it and actually let you absorb it. A phenomenal job for a tutorial.

[@Mauro0]

@@darkfoxwillie looool just pause it

[@philheathslegalteam]

Day 35 of quarantine: Fireship now doing React.

[@ericaskari]

🤣😅

[@peterveliki7918]

Haha :D

[@Fireship]

The world is turning upside down!

[@facinick]

@@Fireship hey, can you reply to my comment "Hey, can anybody let me know what if I want to add more levels to it (like this has primary->secondary, what I want is a->b->c->d->etc, how would the transition properties work then? just adding submenus to submenus in the source code of this obviously doesn't work properly out oft he box."

[@Qexia]

​@@facinick I'm not very keen on React but I assume the principle should be the same. Assuming you'll render data from an object that you pass. Check if a property has children, if it does. Have it render a secondary menu. IDK how it works in React but I've already done something like that in Angular.

[@Ctrl_Alt_Elite]

I've just started digging into React, would definitely love to see more stuff like this

[@Ctrl_Alt_Elite]

@Malik Bagwala Maybe if you're experienced in React but for someone new to React this is still very informative, especially if it's the first frontend framework you're learning. It helps you see how other people work in React, i.e. their development process. You can adapt the stuff you find useful to your own workflow. It's all about perspective my friend 😉

[@upthinker2336]

@@Ctrl_Alt_Elite you said it perfectly

[@patrickmanfra9205]

agree. as a front end person, this was helpful to see made in react

[@olenahryhorets1676]

I've just started with Angular2, but it seems to me that I need React too

[@xq_nemesis]

Wölf I completely agree

[@mrviometal4948]

THIS....IS....AWESOME! Keep the react reverse engineering videos coming dude!

[@chillingwithkids552]

I never seen tutorial with 1x speed other than this... no bullishitting before and after the videos.... clear and crispy from start to end ..well done mate

[@noelemmanuel5715]

I started my react journey last week and I really enjoyed building this drop-down menu with React

[@rashidulislam9636]

Pretty complex to understand for a beginner like me but after understanding and being able to create similar results, I am impressed with your code. The layering of things is beyond amazing. I wish to reach where you are! Thanks !

[@nirmalpatel29]

We all would love to more React videos. :)

[@jaroslavhuss7813]

I really love this guy's work since he is not doing "beginner lvl videos" all the time! This guy is pure javascript god! Please, keep it going!

[@sumanth3036]

You finally on React, please continue. I am glad. Looking forward for more React content

[@IOSAppCrazy]

Dude I would love more in this series! I spend a lot of time doing backend, and want to step up my front-end game!!

[@mrala]

oww fireship doing React; someone wake me up

[@Fireship]

I told myself I'd never do it, but these are crazy times in the world.

[@aditya_gupta]

@@Fireship why?

[@kotel94]

@@Fireship do it more, it's fun!

[@LarsRyeJeppesen]

@@kotel94 No observables, no thanks.. it's so old fashioned

[@mrala]

@@Fireship We hope these crazy times last longer and happen more frequently :)

[@_saurabhshah]

This is so awesome. I never fully understood the css transition group before this video.

[@Fireship]

Nice! It's actually inspired by ng-animate from Angular 1, so I know it well :)

[@_saurabhshah]

@@Fireship keep up the good work. & Stay safe :)

[@dazamora]

The most profitable 16 min I spend on last 4 momths. amazing, new suscriber.

[@user-kg5jh2ct4r]

I see that you're slowly transitioning to using React. Have been waiting for this day. Congrats and welcome to React

[@Andy98221]

I absolutely loved the video. Im not the biggest CSS fan but I really enjoyed watching it. As a suggestion I'd say to put in title something like "Facebook nav/tear down" to help People discover this video

[@wheelbegood]

Great video - I guess I will binge watch your whole channel ;)

[@sumanth3036]

KZbin is fed up with React content already. Here is what Fireship does. Awesome. Would love to more interactive UI content like this

[@xsticcyds5459]

Title : Avanced Dropdown Menu Fireship : *makes facebook 2.0* Good video! Keep it up!

[@sathishshaj7815]

Finally 🔥 got into React... If I haven't watched this I would never use css transition in my life

[@thriftykapila8420]

Also more of react and Code this code that series😍😍love from India

[@chizuru1999]

Indeed. More react! 🤩 Oh! and don't forget to unstar Angular on GitHub. ✊😉

[@thecashewtrader3328]

Yes

[@stevecastaneda]

More React content, please! I didn't realize there was so much hate for it, but I love that you cover them all.

[@DerJP]

Would love a lot more of these kinda advanced tutorials! Not many people do them. Great video as always btw :)

[@freeac8551]

Hey there! I just wanted to tell you that your content is god-tier, no doubt about that. But the only thing I request of you is to slow down the pace of your voice, as you might know that slowing down youtube's playback do distort the voice, but speeding it up doesn't. Please consider this!!! Love you, as always❤

[@Kazyek]

Props for making it in a standard way so it works in firefox =D, as opposed to facebook's own, hahah Small feedback: - There's a visual glitch with the right arrows svg on both chrome and firefox; on firefox, they're too big because they have no fixed size (I gave them a height of 50px and it looks decent). - Since you didn't gave them "fill: var(--text-color)", they don't show up on chrome, and show up as black on my firefox. - Would be quick and free to deploy the public demo on github pages =D

[@MrAknur]

Helped a lot, thank you! I am on my learning JS way, I think it would be nice to learn together and share some experience through Discord etc. if you would like of course, what do you think?

[@johanndaveldebeer9532]

Weird how goal oriented implementation can make you understand something better, i learned more about react in this vid than an actual 2 hour react tutorial.

[@AlexandriaLibraryGame]

Finally, I never understood React until now. What is react? A way to create your own custom html elements, (inside javascript). Is a way to extend what you do with html.

[@phantom7132]

Annotation @8:36: The onClick-handler works and flips the boolean but due to the fact that setState is asynchronous it is not recommended to get the current state and flip it. Instead just make use of the prevState variable: setOpen((prevState) => !prevState);. This guarantees that the props getting updated 100% as well as the prevState.

[@HugRunner]

It would be cool to see the difference in implementation of something like this in React, Angular and Vue. And, maybe some responsive design aspect to show how to make sure it works on mobile etc. as well.

[@akinjidesleek]

15:39 Made me think something was wrong with my earphones

[@HdeHidratado]

I actually jumped a little from my chair.

[@Fireship]

My fault, bad audio edit 🤕

[@danisob3633]

@@Fireship

[@lololtoday]

it is really make me freaking out.

[@pagalpantipupun]

I can not count how much I learn from this guy. ultimately awesome. Could you please make some pro tips and more videos on ionic 5.

[@Fireship]

Yes, some ionic react content is overdue on this channel.

[@curiouslycory]

I really appreciate your instructions. They're clear, concise, and just the right level of verbosity.

[@rp2804]

These are the videos we LOVE AND WANT 🙌😍😍😍😍😍❤️

[@ypucandeleteit]

these are some pro frontend skills. Great practices - please keep making high-quality videos

[@ahmadsalaah]

I 'v just started with React and I was stuck on doing animation this is awesome ♥♥♥

[@MightyMoud]

MAAAAAAAAN! I swear to god you inspire me soooooo much! One day I really wanna be like you! I have a very small YT channel but I really wish to be on your level one day!

[@radubuta5004]

Hey man, your weather card tutorial was pretty good for beginners (like me), so keep up the good work, and glad to find you here ❤️

[@MightyMoud]

@@radubuta5004 Yo! Thanks man! Means a lot!

[@rkd-me]

I really like your tutorials, quick and dense with knowledge! I hate when i watch tutorials and for the 10 minutes they talk about irrelevant things..

[@monour2840]

Awesome as always, and would love more of that beginner-friendly content.

[@chregano]

CSS Transition group feels like ng-animate. Very cool. I am an AngularJS (hide) developer learning React now. Great video as usual. More React content would be awesome. Thanks!

[@Fireship]

It's exactly like ng-animate 😁

[@Vino359]

Shoutout to fireship for doing amazing stuff to my developer journey

[@cecibenitez3917]

Dude this is amazing and so smooth it gives softness vibes

[@aleksszukovskis2074]

0:15 That Tiger looks just... CRISP

[@PrNizar]

Holy moly! You sir deserve a medal...

[@nubl37]

Wish all tutorials were at this pace, so good

[@isaacvr]

I remember that this kind of content was what made me to subscribe. It will be cool that you take it back and let the AI rest for a while. Thanks.

[@kelleyvanevert]

Wooo... while the tutorial as a whole is great, I'm surprised to see the bad (& weird!) practice of nesting functional component definitions! At 10:00, the DropdownItem component definition is nested in the DropdownMenu component definition. The result is that no item instance will ever outlive any re-render of the menu, effectively upending the whole point of using a react component. If you want to use a react component, you should not nest the definition. If you just want to re-use some rendering logic, that's also fine, make it a "normal" function (w/o capital letter and props param), so as to not cause confusion, and nest it however you like.

[@sl0wlyedits277]

Would love more react stuff, great video btw!

[@andreasdevjs298]

We want more videos like this one!! More React!! :D

[@davidmikan7925]

I never looked into react and have so far only made simple handwritten websites.. while watching this video my mind just went 🤯

[@jackmaison4209]

Hooray! Love the react videos. Great content as always. Would love to see more react videos like this.

[@eccentric_node]

Beginner friendly UI tutorials? Yes please!

[@SquashBox]

This video and the one where you showed us how to add color themes to websites were my favorite. These beginner friendly tutorials are fantastic!

[@arthurmiranda8896]

wish i had found your channel sooner, great content and most importantly you explain the vocabulary really well. Thanks for the knowledge!

[@assad.rajab-2]

Thanks!

[@davidvideauortega287]

Great tutorial! Pretty high quality. The end result is awesome! Would you consider making the exact same menu using Angular instead of React? It would be really interesting!

[@fatal510]

For the longest time I thought this was the official Firebase KZbin channel...

[@zl7289]

That’s so great. Now I’m thinking about how to make a mock-up of it to make the developer clearly understand what exactly the functions are and how do they work. 🤔

[@oviirup]

Need more videos like this, cloning components from popular sites.

[@jouebien]

if you have fixed height nav bar you end up with a non accessible component when you have text with in it. Users should be able so scale text on the page to 200% (that may vary in the EU and US but that is what it is in the AU). When using SVGs directly set the title attribute otherwise screen readers treat them as an image without alt text. Otherwise make sure the link has an accessible attribute like aria-label and the SVG is ignored by the screen reader. Remember not everyone uses the mouse make sure your drop downs are accessable by the open and close being triggered by return (if closed make sure the tab cursor skipps over the links inside the drop down) or use tab and shift+tab to open and close the drop down programmatically.

[@coldym]

that's some high level react that we've just witnessed!

[@adnanamin3666]

Just got into react recently, loving it! Will appreciate more videos! 👌✌️ 💥

[@omkard5671]

This tutorial is awesomeness on steroids👏👏👏👏

[@abhinav.sharma]

@Fireship Yes man! We would love some UI tutorials! 🔥🔥🔥🔥🔥

[@shreerangvaidya9264]

Uploaded just when I needed it.

[@Lerndemy]

Am i the only one who feels that i dont know anything about web development when i watch fireship videos

[@kevintech2442]

I was waiting for this!!! A react tutorial from you!!! YUUHUUU

[@aaronstroud5278]

This tutorial is excellent! Would love to see more React tutorials like this.

[@RavMucha]

I'd just like to say, that this channel rocks. You're great at explaining things. Wish list: Beginner friendly Angular & Vue Frontend projects.

[@daryllman]

wow learnt so much about css in just 15mins. Concise and informative!

[@gabrielgutierrez6282]

I would like to see more react content and small features like this. Thanks for the video!

[@dealloc]

Nesting components (a function component inside a function component) goes against the composition over inheritance pattern, that React is built around. There are a lot of pitfalls such as ending using the wrong variables of props and hooks between components, leading to non-optimal behavior. Not only will it make your components harder to read, maintain and debug but it will also cause unnecessary updates to child components that otherwise doesn't need to be updated-and in this case constructed each time every time your parent component updates. If you want to share variables/props around, pass them as props to the child components. This is the recommended way, and lets React correctly handle the lifecycle of components.

[@JordanAF808]

There is so much great information, explained so well, packed into this video.

[@MJ-yz9ik]

Thank you ONE PUNCH JEFF for this incredible content

[@santoshdahal4911]

yes on beginner-friendly tutorial.... more conceptual lesson rather than step by step walkthrough....I wouldn't feel like I am doing on my own plus we can learn a lot more concept

[@leonlai80]

This is cool! Please continue doing something like this.

[@appeiroon]

you're a god of tutorials

[@tobeqz7065]

YESS! More react content

[@adamm2716]

this was really cool and i learnt alot. i tried taking it the next step further and making each item its own component but i messed it up. lol so now i am watching it again to see if i can learn more.

[@atokwame3632]

Thanks for short and informative tutorial, keep up the good work, your are helping a lot here 😁

[@sambegstha3516]

Clear, concise and to the point while saving us time. Thank you!

[@amandioreal2293]

Very nice vídeo. Nice and clean. We need more this kind of vídeos

[@urishmueli]

Wow what a great video! Would love to see more!

[@planetmall2]

Thank you for this! Love when you do React projects.

[@mehdiabderrahmaneyahiaoui4700]

Thank you for the great tutorial. I have two questions. How to prevent two dropdown to appear at the same time? ( opening one closes the second one) and How to close the dropdown when clicking outside of the modal.

[@michelpomerantzeff1749]

did you get a solution for that ?

[@Webtricker]

Thanks for giving such a nice dropdown menu with React & CSS Animation tutorial for beginners.😇 This tutorial was very helpful for all beginners.😉

[@duytan4802]

Please make more videos like this, love to see this kind of content. Thank you so much

[@spiceydev]

You have to idea how much this just helped me!!!!

[@sihamebazi9795]

Thank you. Incredible explanations. I hope I will see more videos in react.

[@patrickkaipainen3301]

Nice! I've been struggling with getting smooth transitions on components that are mounted and unmounted depending on state. Height is especially tricky because you need to know how tall the container is going to be once a child is added or removed from it.

[@patrickkaipainen3301]

Would be cool to see how to tackle it masochistically without the CSSTransition dependency though

[@nav.r]

I Bow down to thee my friend... This is an absolutely wonderful video.

[@WesleyFranks]

Definitely love these beginner videos

[@winnietheboomdj]

Cool man, we need more tutorials like this, thank you a lot, love your channel 👍

[@Enjoy-it-Now]

my comment is number 500 i was wondering if there is any plugin in wordpress doing the same thing Thanks for this amazing video ❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️

[@erendoru]

I'm definitely down to this. Perfect content keep it up.

[@LeCrowTV]

The presentation of this video is on point

[@TiagoDiass2]

damn, thats too good, I'd like to see more content like this from you

[@rutymaster9572]

Very good, there is the possibility of doing it in angular

[@spongechameleon6940]

Bruv I just started building an animated drop down tonight and lo and behold...

[@geneanthony3421]

Really slick menu design

[@vishwaspaikra3019]

We need more tutorials like this 😍