Material-UI チュートリアル + マウス移動可能な webアプリを作成する

# はじめに
Reactを勉強中に、Material-UIで作成した要素をマウスで移動するようなUIを実現したく、
react-draggableというモジュールを使用してみました。

# できること

1. Material-UIの公式サンプルのボタン要素をマウス移動可能にする
2. Reactのアプリを０から作成して移動可能なコンポーネントを作成する

# 環境
- MacBook Pro (2.7 GHz Intel Core i5,16 GB 1867 MHz DDR3)
- macOS Sierra

# 手順

## 1. Material-UIの公式サンプルをマウス移動可能にする

まずはMaterial-UIのレポジトリをもってきます。

```
$ git clone https://github.com/mui-org/material-ui.git
```

examples/create-react-app に npxのcreate-react-appコマンドで作成したサンプルがあります。
サンプルを実行してみましょう。

```
$ cd examples/create-react-app
$ npm install
$ npm start
```
ブラウザが立ち上がり、ボタンが表示されます。

<img width="438" alt="スクリーンショット 2018-07-15 23.11.59.png" src="https://qiita-image-store.s3.amazonaws.com/0/197729/306fb62e-126f-cf30-fd8a-5348b5706768.png">


こちらにreact-draggbleを導入していきます。

```
$ npm install react-draggable
$ vim src/pages/index.js
```

```jsx:src/pages/index.js
import { withStyles } from '@material-ui/core/styles';
import withRoot from '../withRoot';
import Draggable from 'react-draggable';//<-- 追加

...

<Draggable>//<-- 追加 Draggableタグで挟む
<Button variant="contained" color="secondary" onClick={this.handleClick}>
    Super Secret Password
</Button>
</Draggable>//<-- 追加 Draggableタグで挟む
```

再度実行してみます。

```
$ npm start
```

<img width="681" alt="スクリーンショット 2018-07-15 22.20.03.png" src="https://qiita-image-store.s3.amazonaws.com/0/197729/8202d84e-015a-122f-74ec-060e99c4aaa0.png">

これでボタンをマウスで移動できるようになりました。


## 2. Reactのアプリを０から作成して移動可能なコンポーネントを作成する

Reactのアプリを作成するのには、nodeをインストールするとついてくるnpxに標準装備されている
create-react-appコマンドが便利なようです。

インストール方法は[こちら](https://medium.com/codingthesmartway-com-blog/getting-started-with-material-ui-for-react-material-design-for-react-364b2688b555)に書いてある通りに進めます。

```
$ npx create-react-app react-material-ui
$ cd react-material-ui
$ npm install @material-ui/core
$ npm install contentful
```

ここでは、Material-UIのAppBarを追加してみます。
src/index.js と同じ場所に、NavBar.jsというファイルを作成します。

```jsx:src/NavBar.js  
import React from 'react'
import AppBar from '@material-ui/core/AppBar'
import Toolbar from '@material-ui/core/Toolbar'
import Typography from '@material-ui/core/Typography'
const NavBar = () => {
    return(
        <div>
        <AppBar position="static">
            <Toolbar>
                <Typography variant="title" color="inherit">
                React & Material-UI Sample Application
                </Typography>
            </Toolbar>
        </AppBar>
        </div>
    )
}
export default NavBar;
```

このコンポーネントをsrc/App.jsの方から呼び出しましょう。

```jsx:
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import NavBar from './NavBar' //<-- 追加
import Draggable from 'react-draggable'; //<-- 追加

class App extends Component {
  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h1 className="App-title">Welcome to React</h1>
        </header>
        <p className="App-intro">
          test: To get started, edit <code>src/App.js</code> and save to reload.
        </p>
        <Draggable>  //<-- 追加
        <div>        //<-- 追加
          <NavBar /> //<-- 追加
        </div>       //<-- 追加
        </Draggable> //<-- 追加
      </div>
    );
  }
}
```

実行してみます。

```
$ npm start
```

<img width="1163" alt="スクリーンショット 2018-07-15 23.03.21.png" src="https://qiita-image-store.s3.amazonaws.com/0/197729/db0aeb36-1242-72f7-9145-a080f92e8d25.png">

無事に、追加した一番下の青いバーだけマウスで移動可能になりました。