@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 !
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.
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?
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!
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.
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.
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.
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!
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.
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.
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. 🤔
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
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.
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❤
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!
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.
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.
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.
