React & Material UI #26: Header (Appbar + Toolbar) & React Router
In this video we go over:
1:20 Appbar & Toolbar and how they work together
3:10 Everything nested inside Appbar and Toolbar
4:10 Examples of different Headers
5:40 Important props for Appbar and Toolbar
6:40 CodeSandbox explanation and walk around with React Router
8:30 Making our initial Header from the Materiel UI Documentation
10:50 Explanation of how Menu and MenuItems in the header works
12:45 Using withRouter with the Material UI Header
17:05 Using useTheme and media queries to make the header responsive
21:00 Adding logic to make the Header look differently on Mobile vs Desktop
23:00 Creating the Desktop view and styling it with flex
27:40 Cleaning up the code and making it more programmatic
Codesandbox.io link: https://codesandbox.io/s/recursing-pa...
Material UI AppBar Demos: https://material-ui.com/components/ap...
Material UI AppBar API: https://material-ui.com/api/app-bar/
Material UI ToolBar API: https://material-ui.com/api/toolbar/
Material UI Menu and MenuItem documentation:
https://material-ui.com/components/me...
https://material-ui.com/api/menu/
https://material-ui.com/api/menu-item/
The Forge Coding Tutorials...https://theforge.ca
Follow me on Social Media:
/ asistilli
/ anthonysistilli
On this page of the site you can watch the video online React & Material UI #26: Header (Appbar + Toolbar) & React Router with a duration of hours minute second in good quality, which was uploaded by the user Anthony Sistilli 11 July 2020, share the link with friends and acquaintances, this video has already been watched 81,559 times on youtube and it was liked by 1.3 thousand viewers. Enjoy your viewing!
