React Props Material

Elvenware Logo

TOC

Overview

The Goal is to add Material-UI to our application to gussy up the menu and give our app a more standard appearance.

Screenshots

We are adding several things to our Web App.

Git Explorer App Bar

IMAGE: Git Explorer with an AppBar on top

When the user clicks on the hamburger menu a Material-UI Drawer opens with three Material-UI MenuItems on it. In this screenshot the menu has the focus, the main page is in shadow, and the Chrome Developer Tools are open to the Sources page.

Git Explorer Menu Open

IMAGE: Git Explorer with the menu open. We combine a Material-UI AppBar and Drawer to make the menu.

Get Started

Link in Material-UI.

yarn add material-ui

or:

npm install --save material-ui

New:

yarn add @material-ui/core
yarn add @material-ui/icons

Add Roboto Font

I'm not sure this is necessary, but some folks do get fussy about fonts:

Here we Import fonts and icons as HTML:

<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" />

We are not using Pug on the client side, but if you ever want to use it:

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")

Wrap Everything in MuiThemeProvider

In index.js wrap your entire application in a Material-UI MuiThemeProvider.

// YOUR IMPORTS HERE
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';

ReactDOM.render(
    <MuiThemeProvider>
        <App/>
    </MuiThemeProvider>,
    document.getElementById('root')
);

Right now we are using the default theme, but you can use this as a place to introduce Material UI Themes

Like this:

// YOUR IMPORTS HERE
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import darkBaseTheme from 'material-ui/styles/baseThemes/darkBaseTheme';
import getMuiTheme from 'material-ui/styles/getMuiTheme';

ReactDOM.render(
    <MuiThemeProvider muiTheme={getMuiTheme(darkBaseTheme)}>
        <App />
    </MuiThemeProvider>,
    document.getElementById('root')
);

registerServiceWorker();

Our new theme is similar to the one shown above, but the colors are a bit muted, a bit darker.

A darker theme

Create Menu

In ElfHeader import AppBar and Drawer from the Material-UI package:

import AppBar from 'material-ui/AppBar';
import Drawer from 'material-ui/Drawer';

In the render method create the AppBar:

<AppBar
    title="GitExplorer"
    iconClassNameRight="muidocs-icon-navigation-expand-more"
    onLeftIconButtonClick={this.handleToggle}
/>

A method of ElfHeader called handleToggle will change the state of open. When open changes, the Drawer in our menu slides open and closed:

constructor(props) {
    super(props);
    this.state = {
        open: false
    };
}

handleToggle = () => this.setState({ open: !this.state.open });

The render method has a couple Material-UI AppBars, MenuItems and a Drawer:

<div>
    <AppBar
        title="GitExplorer"
        iconClassNameRight="muidocs-icon-navigation-expand-more"
        onLeftIconButtonClick={this.handleToggle}
    />
    <Drawer
        docked={false}
        width={200}
        open={this.state.open}
        onRequestChange={this.handleToggle}
    >
        <AppBar title="Git Explorer"/>

        <MenuItem
            primaryText='Git User'
            containerElement={<Link to="/"/>}
            onClick={this.handleToggle}
        />
        // MORE MENU ITEMS HERE
    </Drawer>
</div>

Buttons

<RaisedButton
    label="Query Git API"
    labelPosition="before"
    primary={true}
    icon={<ActionAndroid />}
    style={styles.button}
    onClick={this.queryGitApi}
/>

We need to define our styles in a file called components/elf-styles.js which looks like this:

const styles = {
    button: {
        margin: 12,
    },
    exampleImageInput: {
        cursor: 'pointer',
        position: 'absolute',
        top: 0,
        bottom: 0,
        right: 0,
        left: 0,
        width: '100%',
        opacity: 0,
    },
};

export default styles;

Define a FontIcon

Here is where you can find a bunch of icons you can use in your application:

import FontIcon from 'material-ui/FontIcon';
import { red500 } from 'material-ui/styles/colors';
import styles from './elf-styles';

// CODE OMITTED HERE

<RaisedButton
    label="Query Git API"
    labelPosition="before"
    primary={true}
    icon={<FontIcon
        class="material-icons"
        color={red500}>rss_feed</FontIcon>}
    style={styles.button}
    onClick={this.queryGitApi}
/>

Turn it in

Add another menu item for the Micro page.

All versions of our App are called GitExplorer at this point. So let's add a tag to designate the place where you added the material theme and pushed this assignment.

Some reminders on using Git Tag:

git tag -a v6.0.1 -m "Adding material ui support and a darker theme"
git push origin v6.0.1
git tag -n

Here is the documentation on using the n<num> flag when displaying git tags: n<num> specifies how many lines from the annotation, if any, are printed when using -l. The default is not to print any annotation lines. If no number is given to -n, only the first line is printed. If the tag is not annotated, the commit message is displayed instead.

You should also merge your latest GitExplorer back into Master.