DEV Community

Cover image for How to use Material UI in React
Rossano D'Angelo
Rossano D'Angelo

Posted on • Updated on

How to use Material UI in React

Building complex user interfaces is never easy. For this reason, sometimes it makes sense using CSS frameworks that can help us not wasting our time reinventing the wheel.
In this article, I show how to use Material UI components building a React-based application useful to display some football data. In particular, the Italian highest league, Serie A.

Introduction

Creating the project and install necessary dependencies

To easily get started with create-react-app I run the following:

npx create-react-app serie-a-almanac --template typescript
cd serie-a-almanac
npm install --save typescript @types/node @types/react @types/react-dom @types/jest
Enter fullscreen mode Exit fullscreen mode

To install Material UI and Material UI Icons:

npm install @material-ui/core @material-ui/icons
Enter fullscreen mode Exit fullscreen mode

Finally, I need to import the font in the <head></head> of index.html

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" />
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
Enter fullscreen mode Exit fullscreen mode

Defining the basic architecture of the application

Before rushing into the code, I always try to define the basic design of my application. In this phase, I try to imagine my application as more layers.

Alt Text
Alt Text

This is enough to get started.

The project structure

This last preparation phase is, in my opinion, the most important. It's important to me find the best way to arrange components into folders and subfolders.
This is how I arranged the code generated by create-react-app

...
/src
  /components
    /App
      App.css
      App.test.tsx
      App.tsx
  /images
    logo.svg
  index.css
  index.tsx
  react-app-env.d.ts
  serviceWorker.ts
  setupTests.ts
package.json
...
Enter fullscreen mode Exit fullscreen mode

Building the main container, App.tsx

This container is responsible for displaying the header bar and the content corresponding to the URL the user navigates.

The AppBar

import React from 'react';

import { createStyles, makeStyles, Theme } from '@material-ui/core/styles';
import {
  AppBar,
  Toolbar,
  Typography,
  IconButton,
 } from '@material-ui/core';
import MenuIcon from '@material-ui/icons/Menu';

const useStyles = makeStyles((theme: Theme) =>
  createStyles({
    root: {
      flexGrow: 1,
    },
    menuButton: {
      marginRight: theme.spacing(2),
    },
    title: {
      flexGrow: 1,
    },
  }),
);

const App: React.FC = () => {
  const classes = useStyles();

  return (
    <div className={classes.root}>
      <AppBar position="static">
        <Toolbar>
          <IconButton edge="start" className={classes.menuButton} color="inherit" aria-label="menu">
            <MenuIcon />
          </IconButton>
          <Typography variant="h6" className={classes.title}>
            Football Almanac
          </Typography>
        </Toolbar>
      </AppBar>
    </div>
  );
}

export default App;
Enter fullscreen mode Exit fullscreen mode

The CSS-in-JS solution unlocks many great features (theme nesting, dynamic styles, self-support, etc.) so I decided to give it a chance, at least while working with Material UI.

This is what I obtain
Alt Text

The Drawer

Change the App.tsx file as follows

import { Drawer } from '@material-ui/core';

......

return (
  <div>
    <div className={classes.root}>
      ...
    </div>
    <Drawer open={true}>
      Hello Drawer!
    </Drawer>
  </div>
);
Enter fullscreen mode Exit fullscreen mode

Et voila'!

Alt Text

To make this component working properly I need to manage its open|close state.

......
  const [isOpen, setIsOpen] = useState(false);
  const toggleDrawer = (open: boolean) => (
    event: React.KeyboardEvent | React.MouseEvent,
  ) => {
    if (
      event.type === 'keydown' &&
      ((event as React.KeyboardEvent).key === 'Tab' ||
        (event as React.KeyboardEvent).key === 'Shift')
    ) {
      return;
    }

    setIsOpen(open);
  };

  return (
    <div>
      <div className={classes.root}>
        <AppBar position="static">
          <Toolbar>
            <IconButton edge="start" className={classes.menuButton} color="inherit" aria-label="menu" onClick={toggleDrawer(true)}>
              <MenuIcon />
            </IconButton>
            <Typography variant="h6" className={classes.title}>
              Football Almanac
            </Typography>
          </Toolbar>
        </AppBar>
      </div>
      <Drawer open={isOpen} onClose={toggleDrawer(false)}>
        Hello Drawer!
      </Drawer>
    </div>
  );
Enter fullscreen mode Exit fullscreen mode

Alt Text

What's next

In the next step I will create the drawer and I will add some client side navigation with React Router DOM.

Useful resources

Top comments (1)

Collapse
 
lyavale95 profile image
LyAVALE95

Thanks