Advanced Dropdown Menu - React & CSS Animation Tutorial for Beginners

Learn React & CSS by reverse-engineering Facebook's new multi-level dropdown UI in this beginner-friendly tutorial github.com/fireship-io/229-mu...
React reactjs.org/
CSS Transitions developer.mozilla.org/en-US/d...
Install the quiz app 🤓
iOS itunes.apple.com/us/app/fires...
Android play.google.com/store/apps/de...
Upgrade to Fireship PRO at fireship.io/pro
Use code lORhwXd2 for 25% off your first payment.
My VS Code Theme
- Atom One Dark
- vscode-icons
- Fira Code Font

[@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.

[@HausOfEneko]

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

[@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

[@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!

[@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!!

[@DerJP]

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

[@sumanth3036]

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

[@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 !

[@curiouslycory]

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

[@monour2840]

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

[@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.

[@ahmadsalaah]

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

[@ypucandeleteit]

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

[@sambegstha3516]

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

[@jackmaison4209]

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

[@sl0wlyedits277]

Would love more react stuff, great video btw!

[@aaronstroud5278]

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

[@sathishshaj7815]

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

[@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!

[@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 :)

[@cecibenitez3917]

Dude this is amazing and so smooth it gives softness vibes

[@nubl37]

Wish all tutorials were at this pace, so good

[@stevecastaneda]

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

[@arthurmiranda8896]

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

[@adnanamin3666]

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

[@planetmall2]

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

[@rp2804]

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

[@gabrielgutierrez6282]

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

[@_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 :)

[@kevintech2442]

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

[@shreerangvaidya9264]

Uploaded just when I needed it.

[@winnietheboomdj]

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

[@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.

[@Vino359]

Shoutout to fireship for doing amazing stuff to my developer journey

[@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.

[@daryllman]

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

[@AustinJohnson-zt5pt]

Beginner friendly UI tutorials? Yes please!

[@nirmalpatel29]

We all would love to more React videos. :)

[@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

[@user-kg5jh2ct4r]

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

[@duytan4802]

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

[@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..

[@coldym]

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

[@erendoru6006]

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

[@wheelbegood]

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

[@abhinav.sharma]

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

[@tough_year]

Awesome stuff. Please make more of these!!! 🔥🔥

[@tobiascornille]

Man your content is so insanely good. Thank you so much!

[@urishmueli]

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

[@PrNizar]

Holy moly! You sir deserve a medal...

[@dazamora]

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

[@adnanfarooq88]

Hi man...amazing work..Would definitely love to see more stuff like this

[@vishwaspaikra3019]

We need more tutorials like this 😍

[@leonlai80]

This is cool! Please continue doing something like this.

[@JordanAF808]

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

[@WesleyFranks]

Definitely love these beginner videos

[@woojaejun3335]

A really nice exercise to do in the morning :) Thanks!

[@jishnubiswas9399]

Loved this !!! Great content , gonna implement this with react router

[@atokwame3632]

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

[@borislavyanev1542]

Amazing. i've implemented this in my app, thank you!

[@Nikita-iv4jp]

Very interesting tutorial, I'm looking forward to try doing it on my own.

[@spiceydev]

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

[@sumanth3036]

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

[@sihamebazi9795]

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

[@geneanthony3421]

Really slick menu design

[@adnanfarooq88]

amazing..looking forward for some more cool stuff with HTML CSS and React for beginners in React

[@davidmikan7925]

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

[@hoon8825]

I'd like to see more videos like this one! Please make more! thanks!

[@oviirup]

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

[@WilmanArambillete]

wow ! amazing! loved it! Congrats

[@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!

[@omkard5671]

This tutorial is awesomeness on steroids👏👏👏👏

[@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

[@asyncpipe]

you're a god of tutorials

[@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?

[@xsticcyds5459]

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

[@SonderCrow]

The presentation of this video is on point

[@julianlozano5197]

Amazing video. Please more react tutorials 👊

[@IThinkDiff3rent]

you're doin an awesome job !

[@alejandrobenitez6965]

AMAZING! very nice job, thanks for all!

[@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. 🤔

[@vexingcoder3437]

Just what i needed ❤ subscribed!

[@azatecas]

you motivate me to reach your level of knowledge and experience thank you and keep it up

[@sweatypotato248]

Thanks men, this is exactly what I was looking for

[@aleksszukovskis2074]

0:15 That Tiger looks just... CRISP

[@adityavashishtha9183]

Great content and easy to follow. thanks man

[@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.

[@MJ-yz9ik]

Thank you ONE PUNCH JEFF for this incredible 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 😁

[@Webtricker]

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

[@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.

[@TiagoDiass2]

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

[@gunasekarant6498]

Awesome work 🙌 Keep the good work 😍

[@CryptoData]

Thanks for the great tutorial!

[@amandioreal2293]

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

[@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.

[@nithigd1014]

Thank u so much for teaching me react and css in short video