Reactを勉強するためにまずはRailsに突っ込んでみた

Reactを体験・検証する環境を作ってみました。
とりあえず慣れていて、色々検証しやすいだろうと、
根拠なく思ったのでRailsに突っ込みます。

動作環境

• Ruby 2.3.1
• Rails 5.0.0.1
• react-rails 1.8.2

構築手順

Gemfileに以下記述

gem 'react-rails'

で、インストール

bundle install --path vendor/bundle

--pathオプションをつけている理由は
システムのgemをクリーンに保つためです。
詳しくは以下を参照して下さい。
別にクリーンじゃなくても良い場合は
つけなくてもOKです。

qiita.com

続いて、以下のコマンドを実行して、
初期化します。

bundle exec rails g react:install

実行するとファイルが作られたり、
読み込みのためのrequire文が挿入されたりします。

あとは作られたapp/assets/javascripts/components/以下に
Reactのソースを書いて、viewで呼び出します。
早速お決まりのHello Worldを表示します。
拡張子は.jsxです。jsx形式のファイル多いな…（Adobeとか）

まずは以下のコマンドを叩いてファイルを作ります

bundle exec rails g react:component HelloWorld

作成されたapp/assets/javascripts/components/hello_world.js.jsxに
以下を記述します。

var HelloWorld = React.createClass({
  render: function() {
    return <div>Hello World!!</div>;
  }
});

上で記述したコンポーネント（部品のようなもの？）を
viewで呼び出します。

react-railsを導入すると呼び出すための
react_componentというヘルパーメソッドが
用意されます。便利です。

<%= react_component 'HelloWorld' %>

これで呼び出した場所に'Hello World!!'と
表示されました。簡単簡単。

ファイル構成等作り込みだすと、もっと凝った構成に
なったりすると思いますが、
とりあえずReactの体験・検証をするには十分な環境が整いました。
早速この環境で勉強してみようと思います。

現在日本語での専門書がオライリー本だけのようでした、
悩まなくて済むのでありがたい。

入門 React ―コンポーネントベースのWebフロントエンド開発