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
Auf dieser Seite können Sie das Online-Video React & Material UI #26: Header (Appbar + Toolbar) & React Router mit der Dauer stunde minuten sekunde in guter Qualität ansehen, das der Benutzer Anthony Sistilli 11 Juli 2020 hochgeladen hat, den Link mit Freunden und Bekannten teilen, dieses Video wurde auf Youtube bereits 81,559 Mal angesehen und es wurde von 1.3 tausend den Zuschauern gefallen. Viel Spaß beim Betrachtenden Zuschauern gefallen!
