create-react-app で Material-UIの画面を表示してみる

create-react-appでプロジェクトを作成し、Material-UIを利用した画面を表示します

環境設定

ローカルの開発環境はこちら * macOS High Sierra(v10.13)でJavaScript開発環境を整える

create-react-app でプロジェクトの雛形作成して起動してみる

$ cd ~/
$ create-react-app material
$ cd material
$ npm start
Compiled successfully!

You can now view material in the browser.

  Local:            http://localhost:3000/
  On Your Network:  http://192.168.11.15:3000/

Note that the development build is not optimized.
To create a production build, use npm run build.

ブラウザで確認

f:id:ichi-bit:20171121174304p:plain

material-ui インストール

$ cd ~/material
$ npm install --save material-ui
+ material-ui@0.19.4
added 18 packages in 9.907s

App.js

material-ui の機能を以下のように実装

maretial-ui の使用するコンポーネントをrequireする
Appbarのメニューアイコンクリックでメニューを表示
Reactロゴ画像とwelcome文言をAvatarとテキストのListItemで表示
To Get started... 文言を Chipで表示

import React, { Component } from 'react';
import logo from './logo.svg';
// import './App.css';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import AppBar from 'material-ui/AppBar';
import Avatar from 'material-ui/Avatar';
import List from 'material-ui/List/List';
import ListItem from 'material-ui/List/ListItem';
import Menu from 'material-ui/Menu';
import MenuItem from 'material-ui/MenuItem';
import Popover, {PopoverAnimationVertical} from 'material-ui/Popover';
import Chip from 'material-ui/Chip';

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      open: false
    };
  }

  handleToggle = (event) => {
    this.setState({
      open: !this.state.open,
      anchorEl: event.currentTarget,
    });
  }

  handleRequestClose = () => {
    this.setState({
      open: false,
    });
  };

  render() {
    return (
      <div className="App">
        <MuiThemeProvider>
          <div>
            <AppBar title="Title" iconClassNameRight="muidocs-icon-navigation-expand-more" showMenuIconButton={true} onLeftIconButtonTouchTap={this.handleToggle} />
            <Popover
              open={this.state.open}
              anchorEl={this.state.anchorEl}
              anchorOrigin={{horizontal: 'left', vertical: 'bottom'}}
              targetOrigin={{horizontal: 'left', vertical: 'top'}}
              onRequestClose={this.handleRequestClose}
              animation={PopoverAnimationVertical}
            >
              <Menu>
                <MenuItem primaryText="Refresh" />
                <MenuItem primaryText="Help &amp; feedback" />
                <MenuItem primaryText="Settings" />
                <MenuItem primaryText="Sign out" />
              </Menu>
            </Popover>
          </div>
          <header>
            <List>
              <ListItem leftAvatar={<Avatar src={logo} />}>
                Welcome to React
              </ListItem>
            </List>
          </header>

          <Chip>
            To Get started, edit <code>src/App.js</code> and save to reload.
          </Chip>

        </MuiThemeProvider>
      </div>
    );
  }
}

export default App;