個人のメモ用です。

gem: webpackerの追加とインストール

gem 'webpacker', '~> 4.x'

yarnが勝手にやってくれます。
yarnをインストールしていなければ、Homebrewなどでインストールをたしかしないと行けなかったかな？

$bundle
$bundle exec rails webpacker:install

Reactの導入

新しくプロジェクトを作るなら

$rails new myapp --webpack=react

既存のプロジェクトに導入するなら

$bundle exec rails webpacker:install:react

layouts/application.html.erbに一行追加する

layouts/application.html.erb

<head>
    <title>ReactIine</title>
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>

    <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
    <%= javascript_pack_tag    'application' %> #この一行を追加
</head>

gem: react-railsの追加とインストール

gem 'react-rails'

Reactのコンポーネントを作成することができるようになるコマンドかな

$bundle
$rails generate react:install

これで準備完了です！！

最初のコンポーネントを作成

ちゃんと出来ているかテストするために、
コマンドラインでHelloWorldというコンポーネントを作ります。

$rails g react:component HelloWorld greeting:string

app/javascript/components/HelloWorld.jsに以下の用なファイルが出来ます。

javascript/components/HelloWorld.js


import React from "react"
import PropTypes from "prop-types"
class HelloWorld extends React.Component {
  render () {
    return (
      <React.Fragment>
        Greeting: {this.props.greeting}
      </React.Fragment>
    );
  }
}

HelloWorld.propTypes = {
  greeting: PropTypes.string
};
export default HelloWorld

どこのビューでもいいので以下のコードを付け加えます。
今回はわかりやすいようにapplication.html.erbに貼ります。

layouts/application.html.erb

<%= react_component("HelloWorld", { greeting: "Hello from react-rails." }) %>

Greeting: Hello from react-rails.と表示されれば、テスト完了です！！

Rails webpackerによるReact導入

gem: webpackerの追加とインストール

Reactの導入

gem: react-railsの追加とインストール

最初のコンポーネントを作成