Rails
reactjs

Rails5 APIモードでreact環境構築

はじめに

普段Railsをよく書くのですが、Reactを書く機会が増えてきたので、勉強のためRails/React環境構築をして
みました。思ったよりも簡単に環境構築できて、便利だなーって思いました。

初期設定

$ mkdir rails5-api-react-sample && cd rails5-api-react-sample

$ bundle init

# ここで、Gemfileを開き、#railsとなっているコメントアウトを消す

$ bundle install --path vendor/bundle

# オーバーライドしますか?と聞かれるので全てyで。
$ bundle exec rails new . --api --skip-test --webpack=react

Reactを表示させるための準備

reactをのせるためのController・Viewを用意する

$ bundle exec rails g controller welcome index

ActionController::Apiを継承しているとNo contentと言われるので、
ActionController::Baseを継承させる

welcome_controller.rb
class WelcomeController < ActionController::Base
  def index
  end
end

welcome/index.html.erbにpacks以下のhello_react.jsxを読み込ませるため下記のコードを追記.

welcom/index.html.erb
<%= javascript_pack_tag 'hello_react' %>
routes.rb
Rails.application.routes.draw do
  root 'welcome#index'
end

Railsを立ち上げるとHello React!と表示されます。
簡単にRails/reactの環境作れるんですねー。

ですが、application.jsをトップレベル出ないのが気持ち悪い。。

application.jsをトップレベルに変更する

welcome/index.html.erb
welcome/index.html.erb
# 変更前
<%= javascript_pack_tag 'hello_react' %>

# 変更後
<%= javascript_pack_tag 'application' %>

application.jsでhello_reactを呼び出す形にして

application.js
import React from 'react';
import ReactDOM from 'react-dom';
import Hello from './hello_react.jsx';

console.log('Hello World from Webpacker')

document.addEventListener('DOMContentLoaded', () => {
  ReactDOM.render(
    <Hello name="React" />,
    document.body.appendChild(document.createElement('div')),
  )
})
hello_react.jsx
import React from 'react';
import PropTypes from 'prop-types';

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

Hello.defaultProps = {
  name: 'David'
}

Hello.propTypes = {
  name: PropTypes.string
}

export default Hello;

思ったより簡単に環境作れたー!
次は redux/react-router/observableも導入してみようかな.

参考

Rails5.1のwebpackオプションでReact環境構築