[React] MacでMaterial-UIを導入

Material UIとは、

React Components that Implement Google's Material Design.

開発環境の構築

(1). npm で create-react-app コマンドツールをインストール

$ npm install -g create-react-app

(2). create-react-app コマンドでReactのサンプルプロジェクトを作る

$ create-react-app hello-react
cd hello-react

これでReactの開発環境のインストールが出来た。
$ npm start コマンドを打つと、
ブラウザから自動的に localhost:3000 が開かれ下記のように表示されていれば成功。

(3). npm でMaterial-UIのインストール

$ npm i material-ui react-tap-event-plugin

バージョン指定も可能

$ npm i material-ui@0.18.6 react-tap-event-plugin

タッチ、タップ、クリックなどのイベントを使うために
react-tap-event-pluginのインストールも必要。

インストール成功したら、プロジェクトのpackage構成ファイル(package.json)に
インストールされたpackageが確認できる。

$ cat package.json
{
  "name": "hello-react",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "material-ui": "^0.18.6",
    "react": "^16.1.0",
    "react-dom": "^16.1.0",
    "react-scripts": "1.0.17",
    "react-tap-event-plugin": "^3.0.2"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  }
}

使ってみる

(1). イベントが使えるように src/index.jsファイルに react-tap-event-plugin関連のコードを下記のように書く。

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';
import injectTapEventPlugin from 'react-tap-event-plugin';

// クリックイベントなどを使えるようにする
injectTapEventPlugin();

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

(2). Material-UIのコンポーネントをimportして使う

Dialogボタンを押すとモーダルが起動するコード例：

src/App.js

import React, { Component } from 'react';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import AppBar from 'material-ui/AppBar';
import Dialog from 'material-ui/Dialog';
import FlatButton from 'material-ui/FlatButton';
import RaisedButton from 'material-ui/RaisedButton';


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

  handleOpen() {
    this.setState({open: true});
  }

  handleClose() {
    this.setState({open: false});
  }

  render() {
    const actions = [
      <FlatButton
        label="Cancel"
        primary={true}
        onTouchTap={this.handleClose}
      />,
      <FlatButton
        label="Submit"
        primary={true}
        keyboardFocused={true}
        onTouchTap={this.handleClose}
      />,
    ];

    return (
      <MuiThemeProvider>
        <div>
          <AppBar title="Title" />
          <RaisedButton label="Dialog" onTouchTap={this.handleOpen} />
          <Dialog
          title="Dialog With Actions"
          actions={actions}
          modal={false}
          open={this.state.open}
          onRequestClose={this.handleClose}
        >
          The actions in this window were passed in as an array of React objects.
        </Dialog>
        </div>
      </MuiThemeProvider>
    );
  }
}
export default App;

サンプルコードの解説

import React, { Component } from 'react';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import AppBar from 'material-ui/AppBar';
import Dialog from 'material-ui/Dialog';
import FlatButton from 'material-ui/FlatButton';
import RaisedButton from 'material-ui/RaisedButton';

ここでは、使用するMaterial-UIのコンポーネントをimport。
ポイントはルートコンポーネントをMuiThemeProviderでラップすることで、
Material UIのコンポーネントを使えるようにする。

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

  handleOpen() {
    this.setState({open: true});
  }

  handleClose() {
    this.setState({open: false});
  }

ここでダイアログの開閉フラグと、イベントを定義する。

残りのコードは実際にMaterial-UIを使っています。（略）

参考になったリンク

https://qiita.com/gcoka/items/bfaaea4973c5abb12ff6
http://marctech.hatenadiary.com/entry/2017/08/15/134239