Material-UIの使い方

[Material-UI](http://www.material-ui.com/#/)はReact向けのUIコンポーネントキットです。
BootstarpのGridシステム抜きといったイメージです。

# 例
## ボタン
次のボタンを表示します。
![スクリーンショット 2016-06-15 14.52.36.png](https://qiita-image-store.s3.amazonaws.com/0/15964/8ba3b42e-6b85-64af-deb0-8f8723810b37.png "スクリーンショット 2016-06-15 14.52.36.png")


## jsx

[公式サンプル](http://www.material-ui.com/#/get-started/usage)ではES2015の[import文](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/import)を使っています。

```js
import getMuiTheme from 'material-ui/styles/getMuiTheme';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import MyAwesomeReactComponent from './MyAwesomeReactComponent';
```

JavaScriptのmodule機構はまだ仕様が未確定です。requireを使う場合は次のように書きます。

```js
const {getMuiTheme, MuiThemeProvider} = require('material-ui/styles');
const {RaisedButton} = require('material-ui');
```

ボタンを表示する例は...

```js:index.jsx
const React = require('react');
const ReactDOM = require('react-dom');
const {getMuiTheme, MuiThemeProvider} = require('material-ui/styles');
const {RaisedButton} = require('material-ui');

const App = () => (
  <MuiThemeProvider muiTheme={getMuiTheme()}>
    <RaisedButton label="Default"/>
  </MuiThemeProvider>
);

ReactDOM.render(
  <App/>, document.querySelector('#container'));
```

## html
JavaScriptにトランスパイルした`bundle.js`を読み込むhtmlを用意します。

```html:index.html
<!DOCTYPE html>
<html>
  <body>
    <div id="container">
    </div>
    <script src="bundle.js"></script>
  </body>
</html>
```

# ビルド
## 準備

`package.json`を作ります。

```
npm init -y
```

必要なnpmモジュールをインストールします。

```
npm i -D react browserify babelify babel-plugin-transform-react-jsx material-ui react-dom react-tap-event-plugin
```

babelの設定ファイルを作ります。

```js:.babelrc
{
  "plugins": ["transform-react-jsx"]
}
```

## 実行

```
node_modules/browserify/bin/cmd.js -t babelify index.jsx -o bundle.js
```

# 動作確認

`index.html`を開いて最初のボタンが表示されれば成功です。

ボタンのスタイルはインラインで埋め込まれています。
スタイルシートを読み込む必要はありません。

```html
<div data-reactroot="" style="color: rgba(0, 0, 0, 0.870588); transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms; box-sizing: border-box; font-family: Roboto, sans-serif; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-shadow: rgba(0, 0, 0, 0.117647) 0px 1px 6px, rgba(0, 0, 0, 0.117647) 0px 1px 4px; border-radius: 2px; display: inline-block; background-color: rgb(255, 255, 255);">
    <button tabindex="0" type="button" style="border: 10px; box-sizing: border-box; display: inline-block; font-family: Roboto, sans-serif; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); cursor: pointer; text-decoration: none; outline: none; font-size: inherit; font-weight: inherit; transform: translate3d(0px, 0px, 0px); position: relative; min-width: 88px; height: 36px; line-height: 36px; width: 100%; padding: 0px; border-radius: 2px; transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms; text-align: center; background-color: rgb(255, 255, 255);">
        <div>
            <div style="height: 36px; border-radius: 2px; transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms; top: 0px;"><span style="position: relative; opacity: 1; font-size: 14px; letter-spacing: 0px; text-transform: uppercase; font-weight: 500; margin: 0px; padding-left: 16px; padding-right: 16px; color: rgba(0, 0, 0, 0.870588); -webkit-user-select: none;">Default</span></div>
        </div>
    </button>
</div>
```

# 参考

- [Material UIを使ってカッコいいUIのReactアプリケーションを作ってみた – PAYFORWARD](http://blog.takanabe.tokyo/2015/12/11/1778/)
- [React でマテリアルデザインを実装する Material UI を試してみる - syonx](http://syonx.hatenablog.com/entry/2015/03/29/171528)
- [webpack+React+material-uiの環境を最小手順で作成 - Qiita](http://qiita.com/takaki@github/items/724d97a20d3ae194ded4)