Tuesday, August 6, 2019

Material-UI + React Router - #6 Responsive Drawer

In this next episode, we're going to beautify our blog with Material UI components. Before we move on to that, let's also update our dependencies, which, as it turns out, is as simple as executing a single command: yarn upgrade --latest. Be sure to pass the "latest" flag, so that the versions in package.json get updated and overwritten too. Once our deps are up-to-date, we can install Material UI, as well as Material Icons.

Prior to the release of v1, we would pull in the latest beta pre-release by specifying material-ui@next tag. Now that MUI is officially out, we can install it with @material-ui/core. The "@" symbol denotes a scoped NPM package, and is generally used to group related packages in the same project (ex: @angular/core and both being part of angular repo).

With Material UI, this is necessary because both v1 and the now legacy v0.x live side by side on the same master branch. The latest v1 resides in a scope folder, and that's how the two are differentiated for the time being. On the same note, @material-ui/icons is another scoped package within the material-ui repo (previously, a stand-alone material-ui-icons package).

As some of you requested, this video in the series will focus on the drawer component in MUI. I decided to go with the reponsive drawer due to its universality across devices, mixed with a clipped drawer that sits below the app bar. We will refactor our app to suit this new design and make it resize accordingly depending on the viewport. This will be achieved with the Hidden helper component. Last but not least, you will learn how to normalize the styling of your app with CssBaseline, such that the UI will appear identical independently of the target browser.

Alright, we've got a ton of work to do, let's get started already!

Drawers Helper

No comments:

Post a Comment