Hey, You. Learn a React UI Library Already!

Maybe you are like me. You love React development, you’re all about using your JavaScript skills to build websites with smooth flowing logic that do wonderfully interesting things. Unfortunately, every time you think you have something amazing to show your friends and family you realize none of these people can get past the fact that your site is minimally styled... So pedestrian.

Okay, well maybe your site is less than minimally styled, maybe your site looks like it was built during the dotcom boom.

Well my friends, what you need is a brief introduction to the wonderful world of React UI libraries!.. specifically Material UI.

Material, Semantic, Bootstrap, maybe one or all of these names sound familiar. Maybe you have even messed around with them once or twice. React Libraries are becoming more and more popular by the day, and for good reason. These libraries allow developers to skip over much of the design related code that would normally slow them down and get to what really matters, features sweet sweet features.

Material UI, my personal favorite, is built on what Google has termed a “Paper” model. If you look at a site styled with Material you can see why.

It looks like someone has laid out pieces of paper on a table, so very clean, so nice! This style may look familiar if you have ever used any Google product besides Search or Gmail.

So let’s talk features. The first component you might encounter is the Card. I found the Card, and through it the rest of Material, with a lucky Google search. I was searching online for “card-like elements in React” and wouldn’t you know it Google recommended their UI library to me, how kind.

Importing react is as simple as any other library. Navigate to the root file of your project in the command line and simply type:

npm i --save @material-ui/core

From there almost every component in the Material library can be destructured off of the main reference like so:

import { <your-component> } from @material-ui/core

or

import <your-component> from @material-ui/core/<your-component>

The second way is also valid, but after five imports or so the upper section of your React file will start to get a bit cluttered, so it’s best to de-structure what you can.

The Card is a Paper component with a bit more functionality built in. Cards are just what they say they are. They look like index cards that float just above the background. Have a list of employees that you want to display? Throw each employee’s information into a Card and voila! You have your first Material component. Each employee will be contained in a neatly rendered block which will scale with the size of the web page.

Maybe line them up in a Grid. What’s that? Grid is capitalized? Why yes, yes it is. Remember CSS flex-box? Well I see your flex-box and raise you Grid. Grid will handle all of your basic gridification. You can resize, redistribute and reorganize to your hearts content all with a few simple components!

The code above will render a simple three column Grid with employee information contained within aesthetically pleasing boxes. Simple eh? Add the two other features you see, “CardContent and Typography” and you will be throwing out professionally styled React websites like it’s your job (and maybe it really is your job!)

Now I don’t want anyone to get the impression that I am advocating for the trashing of CSS knowledge in favor of these libraries, no. These libraries are a tool that should be used to accomplish a given task. If your goal is to learn about styling, or just to become a professional web developer in general, learn CSS. Just as a professional React developer should understand JavaScript at a deep level, so should you understand CSS before diving into these libraries.

But if you are a web developer who knows the basics of CSS and needs a way to spin up beautiful websites in a flash. Material UI (or any React UI library) is your salvation. React libraries will give your projects the style they need for your users to notice what really matters. And at the end of the day, isn’t that what a great design is? A structure so well crafted that it becomes invisible only highlighting exactly what is intended?

Anthony Sistilli, a YouTuber has a 31 part video playlist, yes 31 parts, on the subject of using Material UI with React.

I would highly recommend his videos to anyone who is interested in learning more. I find code alongs to be the best way to learn apart from just going out and building projects.

So there you are, now go forth and build!

Ned Brennan is a full stack web developer, quixotically trying to solve all of the worlds problems one code block at a time.