[React] MacでMaterial-UIを導入


![](https://farm1.staticflickr.com/600/23569743811_094bb905ac_z.jpg)

[Material UI](http://material-ui.com/#/)とは、
> 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** が開かれ下記のように表示されていれば成功。

![Kobito.5NBDl0.png](https://qiita-image-store.s3.amazonaws.com/0/170309/dae3cff8-8d3c-7778-14cb-cbfd341781ae.png "Kobito.5NBDl0.png")


## (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