Let’s get some Materials

Published in

Around the App in 365 days

3 min readMay 11, 2018

Yes, the current version of our app is ugly as hell. This is because, so far, we have just used basic HTML components (input, divs) and styled them ourselves.

But we can do better!

Of course, if we had a UX person in our team of one, they would have designed a custom set of components to give our app a unique design. But we are on our own here, and it’s time we use something that’s pretty out of the box.

So what we really need, is a component library, preferably Open Source.

And there are a LOT of them. Here are a few:

These can be split into two categories: the pure React players (libraries that are built from scratch, for React), and the ones that are React components built on top of an existing (and agnostic) library.

I personally prefer using a library that is built specifically for React, and from the list above, we have two main examples: React Material-UI and React Toolbox.

React Toolbox

React Toolbox was my favourite library for a long time, and I used it to build Retrospected, my retrospective tool for agile teams.

Unfortunately, the library is not as well maintained as it once was with only a few commits per month (no commits in April for instance, which is a bad sign), and no compatibility with React 16 in the latest version. It is a shame, as the library itself was a joy to use.

React Material-UI (Next)

This one is also quite old, but is (by far) the most used. 35k stars (!!!) on GitHub, and commits every day, which means it’s actively maintained.

This is the one we are going to use for our project.

Once thing to note here is that we are going to use the “next” (i.e. beta) version of it, as it is, according to the docs, very stable, to the point that they strongly advise people to use the beta version over the stable one.

Installing React Material-UI (commit)

Installing Material-UI couldn’t be simpler:

yarn add material-ui@next

Then, open /public/index.html and add the following two stylesheets in the HTML header:

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

This will load the Roboto font, and the Material icons.

Replacing our ugly Input by its Material-UI equivalent (commit)

Importing a component from Material-UI is quite simple:

import { TextField } from 'material-ui';

On line 4, you can see how we replace our simple styled-component input by this TextField component, exposing 3 of its props to the outside.

In src/game.js, nothing changes, except that we add a label to the input.

With that minimal change, our Input looks a lot better!

Replacing the Header (commit)

First of all, when we installed Material-UI, we didn’t install the icons. Let’s do that now:

yarn add @material-ui/icons

In this commit, we do some tidying up by moving some of the pages into their own folder.

We are also creating a separate component for the header: src/Layout/header.js.

In this file, we use quite a few components from Material-UI, namely the AppBar, the Toolbar, the IconButton and Typography.

It shows how you can compose elements in a neat way, without having to write a single line of CSS.

Replacing the User List (commit)

Finally, we are replacing our very crude user list by a proper Material UI list: