@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 😉
@@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."
@@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 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
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 !
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.
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.
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.
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
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?
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.
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.
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!
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.
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
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.
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❤
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. 🤔
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!
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
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.
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!
You should use the previous Value on the setOpen Function which is given you as a Argument in the Callback of setOpen() instead of using the current state. Otherwise you maybe open the Dropdown-Menü but maybe wanted to close it.
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.
my comment is number 500 i was wondering if there is any plugin in wordpress doing the same thing Thanks for this amazing video ❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️
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.
I honestly have never seen a tutorial this short with such good quality, incredible job 🙌🏻
I try to pack 1hr into 10 minutes, so this video was actually 6 minutes too long ;)
@@Fireship any possibility you do this step by step? sometimes is too fast lol
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.
@@darkfoxwillie looool just pause it
I've just started digging into React, would definitely love to see more stuff like this
@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 😉
@@Ctrl_Alt_Elite you said it perfectly
agree. as a front end person, this was helpful to see made in react
I've just started with Angular2, but it seems to me that I need React too
Wölf I completely agree
Day 35 of quarantine: Fireship now doing React.
🤣😅
Haha :D
The world is turning upside down!
@@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."
@@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.
THIS....IS....AWESOME!
Keep the react reverse engineering videos coming dude!
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
I started my react journey last week and I really enjoyed building this drop-down menu with React
We all would love to more React videos. :)
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!
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 !
You finally on React, please continue. I am glad. Looking forward for more React content
oww fireship doing React; someone wake me up
I told myself I'd never do it, but these are crazy times in the world.
@@Fireship why?
@@Fireship do it more, it's fun!
@@kotel94 No observables, no thanks.. it's so old fashioned
@@Fireship We hope these crazy times last longer and happen more frequently :)
Finally 🔥 got into React... If I haven't watched this I would never use css transition in my life
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!!
Am i the only one who feels that i dont know anything about web development when i watch fireship videos
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.
This is so awesome. I never fully understood the css transition group before this video.
Nice! It's actually inspired by ng-animate from Angular 1, so I know it well :)
@@Fireship keep up the good work. & Stay safe :)
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.
15:39
Made me think something was wrong with my earphones
I actually jumped a little from my chair.
My fault, bad audio edit 🤕
@@Fireship
it is really make me freaking out.
Also more of react and Code this code that series😍😍love from India
Indeed. More react! 🤩 Oh! and don't forget to unstar Angular on GitHub. ✊😉
Yes
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.
Title : Avanced Dropdown Menu
Fireship : *makes facebook 2.0*
Good video! Keep it up!
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
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?
RUclips is fed up with React content already. Here is what Fireship does. Awesome. Would love to more interactive UI content like this
I 'v just started with React and I was stuck on doing animation this is awesome ♥♥♥
The most profitable 16 min I spend on last 4 momths. amazing, new suscriber.
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.
For the longest time I thought this was the official Firebase RUclips channel...
Shoutout to fireship for doing amazing stuff to my developer journey
I really appreciate your instructions. They're clear, concise, and just the right level of verbosity.
I never looked into react and have so far only made simple handwritten websites.. while watching this video my mind just went 🤯
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.
More React content, please! I didn't realize there was so much hate for it, but I love that you cover them all.
We want more videos like this one!! More React!! :D
Great video - I guess I will binge watch your whole channel ;)
These are the videos we LOVE AND WANT 🙌😍😍😍😍😍❤️
Holy moly! You sir deserve a medal...
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!
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 ❤️
@@radubuta5004 Yo! Thanks man! Means a lot!
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.
Wish all tutorials were at this pace, so good
I see that you're slowly transitioning to using React. Have been waiting for this day. Congrats and welcome to React
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
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.
Yes, some ionic react content is overdue on this channel.
Would love a lot more of these kinda advanced tutorials! Not many people do them. Great video as always btw :)
Beginner friendly UI tutorials? Yes please!
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..
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.
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❤
0:15 That Tiger looks just... CRISP
Awesome as always, and would love more of that beginner-friendly content.
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. 🤔
Need more videos like this, cloning components from popular sites.
Dude this is amazing and so smooth it gives softness vibes
that's some high level react that we've just witnessed!
Would love more react stuff, great video btw!
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.
these are some pro frontend skills. Great practices - please keep making high-quality videos
@Fireship Yes man! We would love some UI tutorials! 🔥🔥🔥🔥🔥
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!
It's exactly like ng-animate 😁
YESS! More react content
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!
Just got into react recently, loving it! Will appreciate more videos! 👌✌️ 💥
wow learnt so much about css in just 15mins. Concise and informative!
Step 1 : this is easy
Step 2 : bit complicated
Step 3 : Aww shit🤯
Uploaded just when I needed it.
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
wish i had found your channel sooner, great content and most importantly you explain the vocabulary really well. Thanks for the knowledge!
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.
There is so much great information, explained so well, packed into this video.
I would like to see more react content and small features like this. Thanks for the video!
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!
Thank you ONE PUNCH JEFF for this incredible content
You should use the previous Value on the setOpen Function which is given you as a Argument in the Callback of setOpen() instead of using the current state. Otherwise you maybe open the Dropdown-Menü but maybe wanted to close it.
you're a god of tutorials
Bruv I just started building an animated drop down tonight and lo and behold...
I had to rewatch this, time to replicate on my project
Hooray! Love the react videos. Great content as always. Would love to see more react videos like this.
Please use rgb instead of hex values for colors!!!
Aside from that great tutorial!
This tutorial is awesomeness on steroids👏👏👏👏
I Bow down to thee my friend... This is an absolutely wonderful video.
Clear, concise and to the point while saving us time. Thank you!
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.
did you get a solution for that ?
great RUclips recommendation ,I want to create website for my semester project don't know how to start
Thank you. Incredible explanations. I hope I will see more videos in react.
Thanks for short and informative tutorial, keep up the good work, your are helping a lot here 😁
This tutorial is excellent! Would love to see more React tutorials like this.
Thanks for giving such a nice dropdown menu with React & CSS Animation tutorial for beginners.😇 This tutorial was very helpful for all beginners.😉
I'd just like to say, that this channel rocks. You're great at explaining things.
Wish list: Beginner friendly Angular & Vue Frontend projects.
Very good, there is the possibility of doing it in angular
OMG I loved it sooo much, but now I will have to watch several times, I am too dummy to understand everything at the very first time.
Thank you for this! Love when you do React projects.
I wish there were more videos of making components like this.
This is cool! Please continue doing something like this.
Very nice vídeo. Nice and clean. We need more this kind of vídeos
The presentation of this video is on point
You have to idea how much this just helped me!!!!
Definitely love these beginner videos
my comment is number 500 i was wondering if there is any plugin in wordpress doing the same thing Thanks for this amazing video ❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️
Please make more videos like this, love to see this kind of content. Thank you so much
damn, thats too good, I'd like to see more content like this from you
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.
Would be cool to see how to tackle it masochistically without the CSSTransition dependency though