RailsのWebpackでReactに挑戦 (1)

タイトルそのままなのですが、前回作った環境 を元にReactのチュートリアルをやってみたいと思います。

が、今回はただの準備編です。まだ内容には触れずに導入時に作られたサンプルを確認して概要を掴んでみます。

今回の実行環境です。

$ ruby -v
ruby 2.4.0p0 (2016-12-24 revision 57164) [x86_64-darwin15]

$ bundle exec rails -v
Rails 5.1.4

$ node -v
v8.7.0

---

実装します。

まずは、トップページのコントローラーを作ります。

react_test $ bundle exec rails g controller frontpages index
Running via Spring preloader in process 4765
      create  app/controllers/frontpages_controller.rb
       route  get 'frontpages/index'
      invoke  erb
      create    app/views/frontpages
      create    app/views/frontpages/index.html.erb
      invoke  test_unit
      create    test/controllers/frontpages_controller_test.rb
      invoke  helper
      create    app/helpers/frontpages_helper.rb
      invoke    test_unit
      invoke  assets
      invoke    coffee
      create      app/assets/javascripts/frontpages.coffee
      invoke    scss
      create      app/assets/stylesheets/frontpages.scss

トップページを作ります。

routes.rb

Rails.application.routes.draw do
  root 'frontpages#index'
end

Railsでインストールした時に作られたサンプルを確認してみましょう。

app/javascript/packs/hello_react.jsx (それにしても階層にすっごい違和感ｗ)

// Run this example by adding <%= javascript_pack_tag 'hello_react' %> to the head of your layout file,
// like app/views/layouts/application.html.erb. All it does is render <div>Hello React</div> at the bottom
// of the page.

import React from 'react'
import ReactDOM from 'react-dom'
import PropTypes from 'prop-types'

const Hello = props => (
  <div>Hello {props.name}!</div>
)

Hello.defaultProps = {
  name: 'David'
}

Hello.propTypes = {
  name: PropTypes.string
}

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

むぅ・・・なんだコレ・・・。

JSもままならぬ身としてはキツイサンプルです。

import React from 'react'
import ReactDOM from 'react-dom'
import PropTypes from 'prop-types'

これはライブラリを呼んでいるっぽい。どうやらライブラリ自体はローカルにインストールされていますね。

それぞれ・・・

node_modules/react/index.js
node_modules/react-dom/index.js
node_modules/prop-types/index.js

ここにいるようです。 そして・・・

const Hello = props => (
  <div>Hello {props.name}!</div>
)

これは・・・アロー関数みたいなのだけれども・・・中身にHTMLが・・・？？ そして、引数付きメソッドのような感じ？？

でもconst なので、定数ですよね・・。引数付き定数？？

おまけに、次の

Hello.defaultProps = {
  name: 'David'
}

Hello.propTypes = {
  name: PropTypes.string
}

に至ってはだいぶ難解ですが、どうもこちらはバリデーションか何かっぽいですね。 これは要実験です。

私のようなボンクラがこれ以上考えても仕方ないので、とりあえず動かしてみましょう。

ともかくサンプルを呼び出す記述が書いてあったので言うとおりに・・・。

app/views/frontpages/index.html.erb

<h1>Frontpages#index</h1>
<p>Find me in app/views/frontpages/index.html.erb</p>

<%= javascript_pack_tag 'hello_react' %>

と、 <%= javascript_pack_tag 'hello_react' %> を追記してみます。

起動します。

１つ目のターミナルではRailsを

bundle exec rails s

２つ目のターミナルでは、webpackを動かします。

./bin/webpack-dev-server

トップページ、localhost:3000に接続すると・・・

よし・・・ここまで壮大な手間をかけてようやくHelloWorld的なやつができました。

ここまでやって今更なのですが、ちょっとカッコよくreact言ってみたかっただけなのに何なの？この苦行・・・。

そして起動だけで駄文が長くなったので、サンプルの実験は一旦切る事を決意ｗ