railsでreact.js入門

React.jsを学んでみようと思うが導入方法とかがいまいちよくわからない。 どうせなら学習中のRuby on Railsで触ってみたい、その方がとっつきやすく感じる。 ということでこのページを参考にreact.jsの触りを学んでみる

そもそもreact.jsとは？

Facebookが公開しているjavascriptのライブラリ。 https://github.com/facebook/react 公式で

React is a declarative, efficient, and flexible JavaScript library for building user interfaces. といっているようにフレキシブルなインターフェイスを作るためのライブラリということらしい。

railsでの導入方法

react-railsというgemがあるのでこれをGemfileに追加するだけ。

目標

railsでのreact.jsの導入方法とreact.jsの基本的な扱い方を学ぶ。

方法

このページに従ってやってみる。エラー、疑問点はその場でググる。

環境

Rails 5.0.2 ruby 2.3.3p222 react-rails 1.11.0

Tutorial開始

やった手順を全部ここに書いても元サイトのパクリにしかならないことに気づいたので、 やってみて気付いたこと気になったことなどをまとめる。

事前準備

gemを追加したらgeneratorを叩けばいいだけのらくらく設定だ。

$ rails g react:install

このgeneratorの動作はreact-railsの公式の説明とコマンドの出力を見る限り components.jsというマニフェストファイル

//= require_tree ./components

と、コンポーネントを入れるapp/assets/javascripts/components/ディレクトリを作る

• application.jsに以下を追加する。

//= require react
//= require react_ujs
//= require components

の2つだ。 ※実際にはcomponents以下に.gitkeepというファイルも追加されているが、詳細はこちらを参照

Your first component

この章でHello Worldの表示まで行く。 目を引く点は2つ

1. jsファイル内でhtmlタグを使っている 正確にはjsxという独自言語でhtmlタグ+アルファが使えるといったほうが正しい このファイルの中でReact.createClassと宣言されている変数の中身が実際のページに表示される。

2. react用のヘルパー viewファイル内で <%= react_component('CommentBox') %>というように呼び出すことができる。 generatorでjsxファイルを生成するときに指定した名前がキャメルケースでCommentBoxだったのに生成されたファイル名がスネークケースでcomment_box.js.jsxだったことから考えると、 このヘルパーはキャメルケースで宣言し、Component以下のスネークケースの同名ファイルからキャメルケースの同名変数を参照すると考えられる。

考察と調査以上に文章構成に時間がかかってしまったため今回はここまでとして、次回に続く...

引用 http://qiita.com/joe-re/items/96f12dda4a62470d1d7c