Cloud9でRails+React環境構築(3.Material-UIを動かしてみる)
はじめに
前回の続き sprink.hatenablog.com
引き続きこちらの記事を参考にさせて頂きました。 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
画面は表示された。と思ったら、古い画面。
呼び出す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"
完成