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

  • @philheathslegalteam
    @philheathslegalteam4 жыл бұрын

    Day 35 of quarantine: Fireship now doing React.

  • @ericaskari

    @ericaskari

    4 жыл бұрын

    🤣😅

  • @peterveliki7918

    @peterveliki7918

    4 жыл бұрын

    Haha :D

  • @Fireship

    @Fireship

    4 жыл бұрын

    The world is turning upside down!

  • @facinick

    @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

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

  • @dagoeneko
    @dagoeneko4 жыл бұрын

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

  • @Fireship

    @Fireship

    4 жыл бұрын

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

  • @darkfoxwillie

    @darkfoxwillie

    4 жыл бұрын

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

  • @yusukeko78

    @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

    @Mauro0

    3 жыл бұрын

    @@darkfoxwillie looool just pause it

  • @Ctrl_Alt_Elite
    @Ctrl_Alt_Elite4 жыл бұрын

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

  • @Ctrl_Alt_Elite

    @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

    @upthinker2336

    4 жыл бұрын

    @@Ctrl_Alt_Elite you said it perfectly

  • @patrickmanfra9205

    @patrickmanfra9205

    4 жыл бұрын

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

  • @olenahryhorets1676

    @olenahryhorets1676

    4 жыл бұрын

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

  • @xq_nemesis

    @xq_nemesis

    3 жыл бұрын

    Wölf I completely agree

  • @mrviometal4948
    @mrviometal49484 жыл бұрын

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

  • @noelemmanuel5715
    @noelemmanuel57153 жыл бұрын

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

  • @chillingwithkids552
    @chillingwithkids5522 жыл бұрын

    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

  • @IOSAppCrazy
    @IOSAppCrazy4 жыл бұрын

    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
    @DerJP4 жыл бұрын

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

  • @jaroslavhuss7813
    @jaroslavhuss78133 жыл бұрын

    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
    @sumanth30364 жыл бұрын

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

  • @monour2840
    @monour28404 жыл бұрын

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

  • @curiouslycory
    @curiouslycory4 жыл бұрын

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

  • @jackmaison4209
    @jackmaison42094 жыл бұрын

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

  • @rashidulislam9636
    @rashidulislam963611 ай бұрын

    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 !

  • @HugRunner
    @HugRunner4 жыл бұрын

    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.

  • @rp2804
    @rp28044 жыл бұрын

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

  • @kevintech2442
    @kevintech24424 жыл бұрын

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

  • @sl0wlyedits277
    @sl0wlyedits2774 жыл бұрын

    Would love more react stuff, great video btw!

  • @mrala
    @mrala4 жыл бұрын

    oww fireship doing React; someone wake me up

  • @Fireship

    @Fireship

    4 жыл бұрын

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

  • @aditya_gupta

    @aditya_gupta

    4 жыл бұрын

    @@Fireship why?

  • @kotel94

    @kotel94

    4 жыл бұрын

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

  • @LarsRyeJeppesen

    @LarsRyeJeppesen

    4 жыл бұрын

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

  • @mrala

    @mrala

    4 жыл бұрын

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

  • @aaronstroud5278
    @aaronstroud52783 жыл бұрын

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

  • @ypucandeleteit
    @ypucandeleteit4 жыл бұрын

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

  • @sambegstha3516
    @sambegstha35164 жыл бұрын

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

  • @nubl37
    @nubl372 жыл бұрын

    Wish all tutorials were at this pace, so good

  • @cecibenitez3917
    @cecibenitez39177 ай бұрын

    Dude this is amazing and so smooth it gives softness vibes

  • @davidvideauortega287
    @davidvideauortega2874 жыл бұрын

    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!

  • @shreerangvaidya9264
    @shreerangvaidya92644 жыл бұрын

    Uploaded just when I needed it.

  • @winnietheboomdj
    @winnietheboomdj4 жыл бұрын

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

  • @stevecastaneda
    @stevecastaneda4 жыл бұрын

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

  • @akinjidesleek
    @akinjidesleek4 жыл бұрын

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

  • @HdeHidratado

    @HdeHidratado

    4 жыл бұрын

    I actually jumped a little from my chair.

  • @Fireship

    @Fireship

    4 жыл бұрын

    My fault, bad audio edit 🤕

  • @danisob3633

    @danisob3633

    4 жыл бұрын

    @@Fireship

  • @lololtoday

    @lololtoday

    4 жыл бұрын

    it is really make me freaking out.

  • @planetmall2
    @planetmall24 жыл бұрын

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

  • @wheelbegood
    @wheelbegood4 жыл бұрын

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

  • @nirmalpatel29
    @nirmalpatel294 жыл бұрын

    We all would love to more React videos. :)

  • @adnanamin3666
    @adnanamin36663 жыл бұрын

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

  • @gabrielgutierrez6282
    @gabrielgutierrez62824 жыл бұрын

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

  • @ahmadsalaah
    @ahmadsalaah4 жыл бұрын

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

  • @user-kg5jh2ct4r
    @user-kg5jh2ct4r4 жыл бұрын

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

  • @sathishshaj7815
    @sathishshaj78154 жыл бұрын

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

  • @arthurmiranda8896
    @arthurmiranda8896 Жыл бұрын

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

  • @_saurabhshah
    @_saurabhshah4 жыл бұрын

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

  • @Fireship

    @Fireship

    4 жыл бұрын

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

  • @_saurabhshah

    @_saurabhshah

    4 жыл бұрын

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

  • @AustinJohnson-zt5pt
    @AustinJohnson-zt5pt4 жыл бұрын

    Beginner friendly UI tutorials? Yes please!

  • @duytan4802
    @duytan48024 жыл бұрын

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

  • @leonlai80
    @leonlai804 жыл бұрын

    This is cool! Please continue doing something like this.

  • @tobiascornille
    @tobiascornille4 жыл бұрын

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

  • @RavMucha
    @RavMucha4 жыл бұрын

    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
    @Vino3592 жыл бұрын

    Shoutout to fireship for doing amazing stuff to my developer journey

  • @dazamora
    @dazamora3 жыл бұрын

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

  • @daryllman
    @daryllman4 жыл бұрын

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

  • @abhinav.sharma
    @abhinav.sharma4 жыл бұрын

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

  • @Lerndemy
    @Lerndemy3 жыл бұрын

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

  • @JordanAF808
    @JordanAF8083 жыл бұрын

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

  • @urishmueli
    @urishmueli4 жыл бұрын

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

  • @sumanth3036
    @sumanth30364 жыл бұрын

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

  • @erendoru
    @erendoru4 жыл бұрын

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

  • @PrNizar
    @PrNizar3 жыл бұрын

    Holy moly! You sir deserve a medal...

  • @spiceydev
    @spiceydev4 жыл бұрын

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

  • @aleksszukovskis2074
    @aleksszukovskis20744 жыл бұрын

    0:15 That Tiger looks just... CRISP

  • @coldym
    @coldym2 жыл бұрын

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

  • @oviirup
    @oviirup2 жыл бұрын

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

  • @tough_year
    @tough_year4 жыл бұрын

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

  • @atokwame3632
    @atokwame36322 жыл бұрын

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

  • @WesleyFranks
    @WesleyFranks3 жыл бұрын

    Definitely love these beginner videos

  • @borislavyanev1542
    @borislavyanev15423 жыл бұрын

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

  • @thriftykapila8420
    @thriftykapila84204 жыл бұрын

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

  • @chizuru1999

    @chizuru1999

    4 жыл бұрын

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

  • @thecashewtrader3328

    @thecashewtrader3328

    2 жыл бұрын

    Yes

  • @chregano
    @chregano4 жыл бұрын

    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

    @Fireship

    4 жыл бұрын

    It's exactly like ng-animate 😁

  • @johanndaveldebeer9532
    @johanndaveldebeer95324 жыл бұрын

    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.

  • @sweatypotato248
    @sweatypotato2483 жыл бұрын

    Thanks men, this is exactly what I was looking for

  • @MJ-yz9ik
    @MJ-yz9ik Жыл бұрын

    Thank you ONE PUNCH JEFF for this incredible content

  • @jishnubiswas9399
    @jishnubiswas93994 жыл бұрын

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

  • @woojaejun3335
    @woojaejun33354 жыл бұрын

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

  • @SONURAJ-tq8xu
    @SONURAJ-tq8xu4 жыл бұрын

    At last, REACT

  • @alejandrobenitez6965
    @alejandrobenitez69652 жыл бұрын

    AMAZING! very nice job, thanks for all!

  • @adnanfarooq88
    @adnanfarooq884 жыл бұрын

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

  • @zl7289
    @zl72892 жыл бұрын

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

  • @WilmanArambillete
    @WilmanArambillete4 жыл бұрын

    wow ! amazing! loved it! Congrats

  • @vishwaspaikra3019
    @vishwaspaikra30194 жыл бұрын

    We need more tutorials like this 😍

  • @TiagoDiass2
    @TiagoDiass23 жыл бұрын

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

  • @amandioreal2293
    @amandioreal22932 жыл бұрын

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

  • @hoon8825
    @hoon88254 жыл бұрын

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

  • @SquashBox
    @SquashBox4 жыл бұрын

    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!

  • @adnanfarooq88
    @adnanfarooq884 жыл бұрын

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

  • @geneanthony3421
    @geneanthony34212 жыл бұрын

    Really slick menu design

  • @Nikita-iv4jp
    @Nikita-iv4jp4 жыл бұрын

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

  • @IThinkDiff3rent
    @IThinkDiff3rent4 жыл бұрын

    you're doin an awesome job !

  • @sihamebazi9795
    @sihamebazi97953 жыл бұрын

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

  • @rkd-me
    @rkd-me4 жыл бұрын

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

  • @mattytrane
    @mattytrane3 жыл бұрын

    beginner friendly UI!! Yesss

  • @nithigd1014
    @nithigd10142 жыл бұрын

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

  • @omkard5671
    @omkard56713 жыл бұрын

    This tutorial is awesomeness on steroids👏👏👏👏

  • @srikanthac1506
    @srikanthac15063 жыл бұрын

    That was awesome !! . Cant thank you enough :)

  • @raymondmichael4987
    @raymondmichael49872 жыл бұрын

    I had to rewatch this, time to replicate on my project

  • @davidmikan7925
    @davidmikan79254 жыл бұрын

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

  • @vexingcoder3437
    @vexingcoder34374 жыл бұрын

    Just what i needed ❤ subscribed!

  • @dipenparmar2273
    @dipenparmar22733 жыл бұрын

    Great.. we need more content like this

  • @briancool6
    @briancool63 жыл бұрын

    Thank you! Please add more content like this! :)

  • @gunasekarant6498
    @gunasekarant64984 жыл бұрын

    Awesome work 🙌 Keep the good work 😍

  • @CryptoData
    @CryptoData Жыл бұрын

    Thanks for the great tutorial!

  • @nav.r
    @nav.r3 жыл бұрын

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

  • @AlexandriaLibraryGame
    @AlexandriaLibraryGame3 жыл бұрын

    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.

  • @asyncpipe
    @asyncpipe2 жыл бұрын

    you're a god of tutorials

  • @adityavashishtha9183
    @adityavashishtha91834 жыл бұрын

    Great content and easy to follow. thanks man

Келесі