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
Пікірлер: 646
Day 35 of quarantine: Fireship now doing React.
@ericaskari
4 жыл бұрын
🤣😅
@peterveliki7918
4 жыл бұрын
Haha :D
@Fireship
4 жыл бұрын
The world is turning upside down!
@facinick
4 жыл бұрын
@@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
3 жыл бұрын
@@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.
I honestly have never seen a tutorial this short with such good quality, incredible job 🙌🏻
@Fireship
4 жыл бұрын
I try to pack 1hr into 10 minutes, so this video was actually 6 minutes too long ;)
@darkfoxwillie
4 жыл бұрын
@@Fireship any possibility you do this step by step? sometimes is too fast lol
@yusukeko78
4 жыл бұрын
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
3 жыл бұрын
@@darkfoxwillie looool just pause it
I've just started digging into React, would definitely love to see more stuff like this
@Ctrl_Alt_Elite
4 жыл бұрын
@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
4 жыл бұрын
@@Ctrl_Alt_Elite you said it perfectly
@patrickmanfra9205
4 жыл бұрын
agree. as a front end person, this was helpful to see made in react
@olenahryhorets1676
4 жыл бұрын
I've just started with Angular2, but it seems to me that I need React too
@xq_nemesis
3 жыл бұрын
Wölf I completely agree
THIS....IS....AWESOME! Keep the react reverse engineering videos coming dude!
I started my react journey last week and I really enjoyed building this drop-down menu with React
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
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!!
Would love a lot more of these kinda advanced tutorials! Not many people do them. Great video as always btw :)
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!
You finally on React, please continue. I am glad. Looking forward for more React content
Awesome as always, and would love more of that beginner-friendly content.
I really appreciate your instructions. They're clear, concise, and just the right level of verbosity.
Hooray! Love the react videos. Great content as always. Would love to see more react videos like this.
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 !
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.
These are the videos we LOVE AND WANT 🙌😍😍😍😍😍❤️
I was waiting for this!!! A react tutorial from you!!! YUUHUUU
Would love more react stuff, great video btw!
oww fireship doing React; someone wake me up
@Fireship
4 жыл бұрын
I told myself I'd never do it, but these are crazy times in the world.
@aditya_gupta
4 жыл бұрын
@@Fireship why?
@kotel94
4 жыл бұрын
@@Fireship do it more, it's fun!
@LarsRyeJeppesen
4 жыл бұрын
@@kotel94 No observables, no thanks.. it's so old fashioned
@mrala
4 жыл бұрын
@@Fireship We hope these crazy times last longer and happen more frequently :)
This tutorial is excellent! Would love to see more React tutorials like this.
these are some pro frontend skills. Great practices - please keep making high-quality videos
Clear, concise and to the point while saving us time. Thank you!
Wish all tutorials were at this pace, so good
Dude this is amazing and so smooth it gives softness vibes
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!
Uploaded just when I needed it.
Cool man, we need more tutorials like this, thank you a lot, love your channel 👍
More React content, please! I didn't realize there was so much hate for it, but I love that you cover them all.
15:39 Made me think something was wrong with my earphones
@HdeHidratado
4 жыл бұрын
I actually jumped a little from my chair.
@Fireship
4 жыл бұрын
My fault, bad audio edit 🤕
@danisob3633
4 жыл бұрын
@@Fireship
@lololtoday
4 жыл бұрын
it is really make me freaking out.
Thank you for this! Love when you do React projects.
Great video - I guess I will binge watch your whole channel ;)
We all would love to more React videos. :)
Just got into react recently, loving it! Will appreciate more videos! 👌✌️ 💥
I would like to see more react content and small features like this. Thanks for the video!
I 'v just started with React and I was stuck on doing animation this is awesome ♥♥♥
I see that you're slowly transitioning to using React. Have been waiting for this day. Congrats and welcome to React
Finally 🔥 got into React... If I haven't watched this I would never use css transition in my life
wish i had found your channel sooner, great content and most importantly you explain the vocabulary really well. Thanks for the knowledge!
This is so awesome. I never fully understood the css transition group before this video.
@Fireship
4 жыл бұрын
Nice! It's actually inspired by ng-animate from Angular 1, so I know it well :)
@_saurabhshah
4 жыл бұрын
@@Fireship keep up the good work. & Stay safe :)
Beginner friendly UI tutorials? Yes please!
Please make more videos like this, love to see this kind of content. Thank you so much
This is cool! Please continue doing something like this.
Man your content is so insanely good. Thank you so much!
I'd just like to say, that this channel rocks. You're great at explaining things. Wish list: Beginner friendly Angular & Vue Frontend projects.
Shoutout to fireship for doing amazing stuff to my developer journey
The most profitable 16 min I spend on last 4 momths. amazing, new suscriber.
wow learnt so much about css in just 15mins. Concise and informative!
@Fireship Yes man! We would love some UI tutorials! 🔥🔥🔥🔥🔥
Am i the only one who feels that i dont know anything about web development when i watch fireship videos
There is so much great information, explained so well, packed into this video.
Wow what a great video! Would love to see more!
KZread is fed up with React content already. Here is what Fireship does. Awesome. Would love to more interactive UI content like this
I'm definitely down to this. Perfect content keep it up.
Holy moly! You sir deserve a medal...
You have to idea how much this just helped me!!!!
0:15 That Tiger looks just... CRISP
that's some high level react that we've just witnessed!
Need more videos like this, cloning components from popular sites.
Awesome stuff. Please make more of these!!! 🔥🔥
Thanks for short and informative tutorial, keep up the good work, your are helping a lot here 😁
Definitely love these beginner videos
Amazing. i've implemented this in my app, thank you!
Also more of react and Code this code that series😍😍love from India
@chizuru1999
4 жыл бұрын
Indeed. More react! 🤩 Oh! and don't forget to unstar Angular on GitHub. ✊😉
@thecashewtrader3328
2 жыл бұрын
Yes
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
4 жыл бұрын
It's exactly like ng-animate 😁
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.
Thanks men, this is exactly what I was looking for
Thank you ONE PUNCH JEFF for this incredible content
Loved this !!! Great content , gonna implement this with react router
A really nice exercise to do in the morning :) Thanks!
At last, REACT
AMAZING! very nice job, thanks for all!
Hi man...amazing work..Would definitely love to see more stuff like this
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. 🤔
wow ! amazing! loved it! Congrats
We need more tutorials like this 😍
damn, thats too good, I'd like to see more content like this from you
Very nice vídeo. Nice and clean. We need more this kind of vídeos
I'd like to see more videos like this one! Please make more! thanks!
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!
amazing..looking forward for some more cool stuff with HTML CSS and React for beginners in React
Really slick menu design
Very interesting tutorial, I'm looking forward to try doing it on my own.
you're doin an awesome job !
Thank you. Incredible explanations. I hope I will see more videos in react.
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..
beginner friendly UI!! Yesss
Thank u so much for teaching me react and css in short video
This tutorial is awesomeness on steroids👏👏👏👏
That was awesome !! . Cant thank you enough :)
I had to rewatch this, time to replicate on my project
I never looked into react and have so far only made simple handwritten websites.. while watching this video my mind just went 🤯
Just what i needed ❤ subscribed!
Great.. we need more content like this
Thank you! Please add more content like this! :)
Awesome work 🙌 Keep the good work 😍
Thanks for the great tutorial!
I Bow down to thee my friend... This is an absolutely wonderful video.
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.
you're a god of tutorials
Great content and easy to follow. thanks man