Material UIを色々試してみます。 react-browserify-rails-seedからSeedプロジェクトをダウンロードして色々試します。

前準備

ダウンロードしたSeedを展開します。

2016/04/21現在、material-uiが依存するreactのバージョンは、14でなければならないみたいなので、package.jsonを下記のように変更しておきます。

diff --git a/package.json b/package.json
index 60b6e7c..300d86a 100644
--- a/package.json
+++ b/package.json
@@ -14,8 +14,8 @@
   "author": "Toshiyuki HINA",
   "license": "MIT",
   "dependencies": {
-    "react": "^15.0.1",
-    "react-dom": "^15.0.1"
+    "react": "^0.14.0",
+    "react-dom": "^0.14.0"
   },
   "devDependencies": {
     "babel-plugin-add-module-exports": "^0.1.2",

以下のコマンドを実行します。

$ bundle install --path vendor/bundle && npm install

material-uiのインストール

$ npm install material-ui --save

インストール時にUNMET PEER DEPENDENCY react-tap-event-plugin@^0.2.0と怒られますが、tapイベントは使わないので取り合えず気にしないことに。。

最初のコンポーネント

material-uiのREADME.mdのUsageに従って作っていきます。

$ bundle exec rails g react:component app
$ bundle exec rails g react:component my_awesome_react_component

app/views/home/index.html.erbで、Appを読み込みます。

<%= react_component 'App' %>

AppコンポーネントとMyAwesomeReactComponentのコードはそれぞれ以下。 READMEに記載されているコードをそのままコピーするとエラーになりますね。。（コンポーネントのパスが違う。）

import React from 'react';
import getMuiTheme from 'material-ui/lib/styles/getMuiTheme';
import MuiThemeProvider from 'material-ui/lib/MuiThemeProvider';
import MyAwesomeReactComponent from './my_awesome_react_component';

export default class App extends React.Component {

  render() {
    return (
      <MuiThemeProvider muiTheme={getMuiTheme()}>
        <MyAwesomeReactComponent />
      </MuiThemeProvider>
    );
  }
  
}

import React from 'react';
import RaisedButton from 'material-ui/lib/raised-button'

export default class MyAwesomeReactComponent extends React.Component {

  render() {
    return (
      <RaisedButton label="Default" />
    );
  }
  
}

ここまで出来たら、rails sしてブラウザで確認してみます。http://localhost:3000/home/indexにアクセスしましょう。以下のような画面が表示されたらOKです。

f:id:hinathy:20160421111625p:plain