Material UI in React #4 - Header - adding notification component, reusable menu and much more!

Hello fellow react devs! I am happy to share the fourth part of the series. In today's episode you will learn how to add a custom notification component and hook it up with the reusable MUI menu. I am aiming to create Authentication page and in this part I managed to create a global Header component with lots of various items included, enjoy!

Material UI in React #4 Chapters
0:00 - 0:23 - Intro
0:23 - 6:08 - Notification component
6:08 - 7:31 - Reusable menu component
7:31 - 11:37 - Linking functionality between Menu & Notification
11:37 - 13:45 - Customizing Menu & Notification components
13:45 - 14:24 - Avatar component
14:24 - 15:26 - Global Header component
15:26 - 18:54 - Adding middle row items to Header
18:54 - 21:30 - Styling out Header component
21:30 - 24:10 - Adding conditional logics to display diff title on diff URL
24:10 - 24:56 - Outro

Completed lesson 4 on Github:
If you wish to pull the previous version just pull the 'lesson-3-styles' branch:

📚 Support me:

🌎 Find me here:

Links:

#react #materialui #notification

[JamieMcCann-mqpl]

Small thing, IconButton for MUI doesn't take an anchorEl prop. You don't even have to pass it to the custom NavigationBell component. It is referenced and set when you pass the click handler.

[denmccormik]

Thank you for new episode - going to watch this tomorrow.

[mrus]

The videos and structure is good however if you are trying to follow you are too fast. There is an approach, tell them what you are going to see, show them, and then tell them what they have seen. This gives viewers time to see what you have done as you jump so around too much without having time to take it in.

[Gourab__paul]

Love your content and I will see everything from start. :)

[fao]

Great video again!. Thanks! I hope your channel grows and you keep adding great content. - Fernando

[JasonWee]

your video content is good but the speed is overly quick, u r driving like 100kmph... please slow it down.., it is very hard for beginner.

[jccorman]

Do you know why we get a "React does not recognize the `anchorEl` prop on a DOM element." error?

[crisagazzola]

In the Header.js file, how does styling the IconButton work if there's not object called "helpIcon" defined in headerStyles? Thank you for the tutorial I've learned so much.

[sulemanahsan]

could you kindly change your theme colour? it is not visible clearly ?

[parag]

Good video, very helpful but in this video you skipped the main part of making the header flex and aligning the top and middle items, I was expecting to learn that and you skipped exactly that content.

[Lucas-fufc]

Going too fast and doing some redundant stuff and jumping around (eq. notification bell component, could have just made the component straight away instead of first putting it in authentication and then deleting it from authentication and then creating component and setting it in component and importing it back to authentication. Could've just set it straight into authentication or created the component straight up and then imported) Otherwise good tutorial ! Thanks for it !

[asmarali]

Your color theme is just terrible. It's hard to see