material-uiをreactで使いながらのメモ1



# ひとまずapp bar

App Bar - Material-UI
http://goo.gl/OIRvvG

callemall/material-ui: React Components that Implement Google's Material Design.
https://goo.gl/G6JrsN

# iconってなにがあるのか

https://www.materialui.co/icons

色の指定

```
<MenuIcon color="#ffffff" />
```

```
import {red500, yellow500, blue500} from 'material-ui/styles/colors';

<MenuIcon color={red500} />

```

# react-devtools

使うとわかりやすい

# global変数

未定義エラーに注意すれば利用できたっぽい

# Events

http://qiita.com/sisisin/items/05b43f250a4d1b26c356

# 子コンポーネントだけで適用できるのかな。。

Material UIを使ってカッコいいUIのReactアプリケーションを作ってみた – PAYFORWARD
http://goo.gl/k9V9gC


# バグ

material-uiでprops系のエラーが出たときの対象法 | Gaku'sMemo
http://goo.gl/jyVBBa

npm でパッケージのバージョン一覧を確認したりバージョンを指定してインストールしたりする方法 | phiary
http://goo.gl/x9wsLb

webpack+React+material-uiの環境を最小手順で作成 - Qiita
http://goo.gl/GRGRlL

Material UIを使ってカッコいいUIのReactアプリケーションを作ってみた – PAYFORWARD
http://goo.gl/k9V9gC

バージョン指定がマイナーになってしまうけどダウングレードしてみた。

```
    "react": "^0.14.8",     //ここと
    "react-dom": "^0.14.8", //ここ
```

ワーニングでた。

```
npm WARN material-ui@0.15.1 requires a peer of react@^15.0.0 but none was installed.
npm WARN material-ui@0.15.1 requires a peer of react-dom@^15.0.0 but none was installed.
npm WARN react-addons-create-fragment@15.2.0 requires a peer of react@^15.2.0 but none was installed.
npm WARN react-addons-test-utils@15.2.1 requires a peer of react@^15.2.1 but none was installed.
npm WARN react-addons-transition-group@15.2.0 requires a peer of react@^15.2.0 but none was installed.
npm WARN react-tap-event-plugin@1.0.0 requires a peer of react@^15.0.0-0 but none was installed.
```

バージョン依存解決作業、、npmでバージョン調べたり

	npm でパッケージのバージョン一覧を確認したりバージョンを指定してインストールしたりする方法 | phiary
	http://goo.gl/x9wsLb
	
	webpack+React+material-uiの環境を最小手順で作成 - Qiita
	http://goo.gl/GRGRlL
	
	Material UIを使ってカッコいいUIのReactアプリケーションを作ってみた – PAYFORWARD
	http://goo.gl/k9V9gC

確認のコマンドたち

```
npm info material-ui versions
npm info material-ui@0.14.4
npm outdated # 依存モジュールで新しいものが出ているかどうかを確かめたい時に使います。

# 依存モジュールの依存モジュールは最新にしない(あくまで自分が依存しているモジュールだけ最新にする)
david update # davidはモジュールの最新安定バージョンを取ってきてくれるツールです。
david update -u # 安定じゃない最新

npm dedupe # 異なる依存関係のあるバージョンを取捨選択して整理してくれるっぽい

npm list --depth=0 # インストール済み
npm info --depth=0 
```

peerDependenciesを理解したほうがよさそうだけど。。

	package.jsonのpeerDependenciesについて調べた - なっく日報
	http://goo.gl/2kDwmb
	
	Reactコンポーネントをnpmパッケージとして開発する - Hatena Developer Blog
	http://goo.gl/B3Ba8u

	警告が出たら、npm i -D eslint@^1.0.0 eslint-plugin-react@^3.16.1してあげるのが正しい解決方法のようです。
	極力広いバージョンをカバーするような書き方をしなさいとのこと。 v1系をサポートしているなら ^1.0 or 1.x、1.5.2の機能に依存しているなら、>= 1.5.2 < 2 のように。

0.15系

```
npm WARN material-ui@0.15.1 requires a peer of react@^15.0.0 but none was installed.
npm WARN material-ui@0.15.1 requires a peer of react-dom@^15.0.0 but none was installed.
npm WARN react-addons-create-fragment@15.2.0 requires a peer of react@^15.2.0 but none was installed.
npm WARN react-addons-test-utils@15.2.1 requires a peer of react@^15.2.1 but none was installed.
npm WARN react-addons-transition-group@15.2.0 requires a peer of react@^15.2.0 but none was installed.
npm WARN react-tap-event-plugin@1.0.0 requires a peer of react@^15.0.0-0 but none was installed.
```

だめだ。さらに落とす。

0.14系

```
npm WARN material-ui@0.14.4 requires a peer of react-tap-event-plugin@^0.2.0 but none was installed.
npm WARN react-addons-test-utils@15.2.1 requires a peer of react@^15.2.1 but none was installed.
npm WARN react-tap-event-plugin@1.0.0 requires a peer of react@^15.0.0-0 but none was installed.
```

さらに下記で落ち着いた。

```
├── react-addons-test-utils@0.14.8
└── react-tap-event-plugin@0.2.2

```

今度はmaterial-uiの読み込み箇所でたくさんのエラー。

`Module not found: Error: Cannot resolve module 'material-ui/AppBar'`

最新にもどすか。。。
バグはそのうちなおるでしょう。
といいつつ、一踏ん張りしたらちょうどいい塩梅になったかも。

```
"react": "15.0.1",
"react-dom": "15.0.1",
"react-addons-create-fragment": "15.0.1",
"react-addons-test-utils": "15.0.1",
"react-addons-transition-group": "15.0.1",
```