Cloud9でRails+React環境構築（3.Material-UIを動かしてみる）

はじめに

引き続きこちらの記事を参考にさせて頂きました。 codezine.jp

手順

Yarnパッケージの追加

package.json（rails root直下）に以下を追加

（省略）
    "webpack-merge": "^4.1.0",
    "material-ui": "^0.18.0",
    "react-tap-event-plugin": "^2.0.1"
  },
（省略）

以下のコマンドを流す。

$ bin/yarn install

エラーが出る。

Yarn executable was not detected in the system.
Download Yarn at https://yarnpkg.com/en/docs/install

あれ？最初の手順で入れたはず、、yarnのバージョンを確認してみる。

$ yarn -v
bash: yarn: command not found

なさそう。

$ npm i -g yarn
/home/ubuntu/.nvm/versions/node/v6.11.2/bin/yarn -> /home/ubuntu/.nvm/versions/node/v6.11.2/lib/node_modules/yarn/bin/yarn.js
/home/ubuntu/.nvm/versions/node/v6.11.2/bin/yarnpkg -> /home/ubuntu/.nvm/versions/node/v6.11.2/lib/node_modules/yarn/bin/yarn.js
/home/ubuntu/.nvm/versions/node/v6.11.2/lib
└── yarn@1.3.2

入った。念のためバージョンを確認。

$ yarn -v
1.3.2

気を取り直してもう一回実行する。

$ bin/yarn install

success Saved lockfile.
Done in 22.78s.

成功した。

ビューファイルを修正

app/views/pages/index.html.erb

<h1>Rails5.1サンプルアプリケーション</h1>
<p>ReactベースのMaterial-UI(カード)を使う</p>

カードコンポーネントを呼び出すReactのコードを記述

まずjsxファイルを作る。

$ touch app/javascript/packs/expandable_example.jsx

以下を実装する。
app/javascript/packs/expandable_example.jsx

import React from 'react'
import ReactDOM from 'react-dom'
import PropTypes from 'prop-types'
import {Card, CardActions, CardHeader, CardText} from 'material-ui/Card'
import FlatButton from 'material-ui/FlatButton'
import baseTheme from 'material-ui/styles/baseThemes/lightBaseTheme'
import getMuiTheme from 'material-ui/styles/getMuiTheme'
import injectTapEventPlugin from 'react-tap-event-plugin'
injectTapEventPlugin()

class CardExampleExpandable extends React.Component {
  constructor(props) {
    super(props)
  }

  getChildContext() {
    return { muiTheme: getMuiTheme(baseTheme) }
  }

  render() {
    return (
      // カードコンポーネントのDOM
      <Card>
        // ヘッダー
        <CardHeader
          title="Rails 5.1サンプルアプリ開発"
          subtitle="Rails 5.1を体感する為のサンプルアプリケーションを開発する。"
          actAsExpander={true}
          showExpandableButton={true}
        />
        <CardActions>
          <FlatButton label="完了" />
          <FlatButton label="中止" />
        </CardActions>
        <CardText expandable={true}>
          ・Rails 5.1より採用されたyarn,webpackを用いる<br/>
          ・Reactを採用しReactベースのMaterial-UIを入れてみる
        </CardText>
      </Card>
    )
  }
}

CardExampleExpandable.childContextTypes = {
  muiTheme: PropTypes.object.isRequired
}

document.addEventListener('DOMContentLoaded', () => {
  ReactDOM.render(
    <CardExampleExpandable />,
    document.body.appendChild(document.createElement('div')),
  )
})

起動確認

$ bin/rails s -b $IP -p $PORT

コンパルでエラーが出る。

[Webpacker] Compiling…
[Webpacker] Compilation failed:
（省略）
ERROR in ./node_modules/react-tap-event-plugin/src/TapEventPlugin.js
Module not found: Error: Can't resolve 'react-dom/lib/EventConstants' in '/home/ubuntu/workspace/react_sample/node_modules/react-tap-event-plugin/src'
 @ ./node_modules/react-tap-event-plugin/src/TapEventPlugin.js 22:21-60
 @ ./node_modules/react-tap-event-plugin/src/injectTapEventPlugin.js
 @ ./app/javascript/packs/expandable_example.jsx

画面は表示された。と思ったら、古い画面。 f:id:sprink:20171114213043p:plain

呼び出すjsxの変更

app/javascript/packs/application.jsを変えないといけない。

//require('./hello_react.jsx')
require('./expandable_example.jsx')

コンパルエラーを解決

ググったら以下のissuesを発見
Not compatible with react 16 · Issue #109 · zilverline/react-tap-event-plugin · GitHub

react-tap-event-pluginを以下のバージョンに変更

"react-tap-event-plugin": "^3.0.0"

完成

f:id:sprink:20171116212232p:plain

Reinvent Yourself

技術メモや日々思っていることなど