Create a Material React app

How to use create-react-app with Material web components.


Getting started

Source code is available here: fibo/material-react-app.

Material is a beautiful and open source design system, by Google. There are some unofficial and popular packages implementing Material with React but now there is an official one: Material Components for React (MDC React)

Create React App (CRA) is the official React development tool and let you

Set up a modern web app by running one command.

Let’s create a webapp that uses both Material and React, plus TypeScript.

Create a react app with TypeScript template.

npx create-react-app material-react-app --template typescript
cd material-react-app
yarn start

If everything went well your browser will open and you can start coding and see changes live thanks to awesome livereload.

CRA creates also a git repo, I am going to push it on GitHub. Of course, you are going to use a different repo name and URL. For instance

git remote add origin
git push -u origin master

We are going to add Sass, since it is used by Material for theme customization and it is also supported by CRA. Launch commands

yarn add node-sass
git mv src/App.css src/App.scss

Then update style import in your src/App.tsx

-import './App.css';
+import './App.scss';

Finally, add a .env file with the following content


Create a Layout

Let’s start adding a dismissible drawer as well as other few components to create a basic layout with a top navigation bar.

The navigation drawer slides in from the left and contains the navigation destinations for your app.

Install dependencies

yarn add @material/react-drawer @material/react-material-icon @material/react-top-app-bar @material/react-list

Include Material icons by adding the following to public/index.html file

<link href="" rel="stylesheet">

Replace the content of src/App.scss with the following code

@import '@material/react-drawer/index.scss';
@import '@material/react-top-app-bar/index.scss';
@import '@material/react-list/index.scss';
@import '@material/react-material-icon/index.scss';

.drawer-container {
  display: flex;
  flex-direction: row;
  height: 100vh;
  overflow: hidden;

.drawer-app-content {
  flex: auto;
  overflow: auto;

Replace the content of src/App.tsx with the following code

import React, { useState } from 'react';

import TopAppBar, {
} from '@material/react-top-app-bar';
import Drawer, {
} from '@material/react-drawer';
import MaterialIcon from '@material/react-material-icon';
import List, {
} from '@material/react-list';

import './App.scss';

export default function App () {
  const [drawerIsOpen, setDrawerIsOpen] = useState(false)

  return (
    <div className='drawer-container'>
          <TopAppBarSection align='start'>
            <TopAppBarIcon navIcon tabIndex={0}>
                onClick={() => setDrawerIsOpen(!drawerIsOpen)}


      <TopAppBarFixedAdjust className='top-app-bar-fix-adjust'>
        <Drawer dismissible open={drawerIsOpen}>
            <DrawerTitle tag='h2'>

                <ListItemGraphic graphic={<MaterialIcon icon='folder'/>} />

                <ListItemText primaryText='Mail' />

        <DrawerAppContent className='drawer-app-content'>
          Your inbox content


For sure this section can vary a lot according to your needs. I am going to show, as an example, how I deployed on GitHub Pages.

You need to tell CRA your webapp base URL setting PUBLIC_URL environment variable. It is also achieved setting your package.json homepage attribute. Since I use a custom dommain for my GitHub Pages I added to my package.json file

  "homepage": "",

NOTA BENE: Do not worry about http or https, even the domain does not matter, CRA in will use the slug of the URL, in my case material-react-app, to set relative URLs to bundles, somthing like <script src="/material-react-app/static/js/2.a71d9b2e.chunk.js"></script>

Install gh-pages package to deploy easily.

yarn add gh-pages

Add a deploy script to your package.json

  "scripts": {
    "build": "react-scripts build",
+    "deploy": "gh-pages -d build",
    "eject": "react-scripts eject",
+    "predeploy": "yarn build",
    "start": "react-scripts start",
    "test": "react-scripts test"

From now on, to deploy just launch yarn deploy.

Organize repository

At this point you may want to reorganize your repository. You may notice that there is already a generated by CRA, I am going to edit it to add proper content.

Also, I usually like to have a src/components/ folder, as well as src/reducers, src/pages. Of course this is up to you and/or your team.