Modern Full-Stack Development

 A Quick Detour: Material-UI
Around 2014, Google realized that most of the web app products were going in 
different directions in terms of look, feel, and function. Android, too, was a completely 
different beast visually, and in fact, Android is where the eventual solution began. They 
determined that this wasn’t a sustainable direction to go and they needed to come up 
with something to unify their products.
As a result, the Material Design language was created (
https://material.io
). 
Although it’s not terribly important for our work here, I think a very brief description of 
Material Design itself is in order.
Material Design is a set of design principles that are informed by how people interact 
with real objects in the physical world. Primarily influenced by print media, Material 
Design begins with concepts like sheets of paper and their digital equivalents. When you 
read a book, you turn pages, and that motion is encapsulated in Material Design, just as 
the underlying pattern of the sheet of paper itself is.
Material Design is concerned with how layers of content can slide over each 
other, for example, and those slides, those animations, are key elements. Everything is 
intended to be reactive to touch (remember that this all started with Android, at least in 
its initial implementation, so touch was automatically a key part of Material Design).
As I said, knowing this doesn’t make a huge difference in our work here, but a little 
context never hurt anybody!
Now, what does matter is the Material-UI library itself (
https://material-ui.com
). 
Simply put, this is a library of React components built on top of Google’s Material Design 
language. Being a React library means you simply add it to your project with NPM like 
any other library, import the appropriate parts of it, and use it in your code. For example, 
if you want to put a button on the screen:
import React from "react";
import Button from "@material-ui/core/Button";
const App = () => (
  
    Hello World
  
);
Chapter 9   Delivering the gooDs: MailBag, the Client

---

249
Now, I’m glossing over something important here, but we’re going to get to it soon 
(in the section on functional components), but focus on what matters here: React was 
imported naturally, and too was the Button component from Material-UI. Then, it’s 
simply a matter of dropping a  tag into the code, and we have ourselves a 
Material-UI button.
The Material-UI library offers a wealth of components with which to build a user 
interface. It has all the usual suspects like buttons, checkboxes, radio buttons, drop- 
down lists, grids, lists, progress bars, alert dialogs, menus, and a lot more. The web site 
referenced in the preceding text does a great job of presenting it all. You’ll find a list of 
components with numerous simple examples for each and then links for the API of each 
that details the properties and options available.
It really is an easy-to-use library that also makes your apps look and function great 
with minimal effort on your part. You’ll only see a small portion of what it has to offer 
in MailBag, so I highly encourage you to spend some time on the Material-UI web site 
exploring all it has to offer. I think you’ll be very impressed, and it will, I bet, quickly 
become your favorite collection of widgets for building UIs with React.