読者です 読者をやめる 読者になる 読者になる

コンパイラかく語りき

文系新卒プログラマーのメモ

React.js in Rails を試す(前半)

React.js Rails

「試す」なんて気軽に書きましたが、まだRails初心者です。Reactに至っては、公式のチュートリアルを1度やった限りです。

果たして達成できるのでしょうか…。

 

参考にしたのはこちらの記事。

qiita.com

 

いつもどおり、rails new。なにはともあれ。

$ rails new

 

そして、Gemに'react-rails'を追記。

f:id:chuck0523:20151102231714p:plain

 

さらに、以下のコマンドを実行。

$ rails g react:install

Reactを使えるようにしてくれる魔法を生成してくれるgeneratorとのこと。

 

そして、componentを定義してくれるgeneratorを叩きます。

$ rails g react:commentBox

 

jsxファイルが生成されます。

f:id:chuck0523:20151102232058p:plain

 

生成されたファイルをこのように書き換えます。

f:id:chuck0523:20151102232244p:plain

 

そしてビューを作成。

f:id:chuck0523:20151102232821p:plain

react_componentとは、react-railsをインストールした際に作られたヘルパーだそう。

引数に文字列を与えることで、そのコンポーネントをレンダーしてくれるよう。

 

ルーティングを設定。

f:id:chuck0523:20151102232937p:plain

 

ローカルホスト立ち上げ。

f:id:chuck0523:20151102232949p:plain

 

コンポーネントが表示されていることを確認。

f:id:chuck0523:20151102233003p:plain

 

こんなにカンタンにできてしまうんだ…。やっぱりRailsすごい。

 

 

コンポーネントを追加。

f:id:chuck0523:20151102233605p:plain

 

コンポーネントから呼び出します。

f:id:chuck0523:20151102233652p:plain

 

ローカルで確認するとこのとおり。

f:id:chuck0523:20151102233706p:plain

 

次にpropで値渡しを行います。

f:id:chuck0523:20151102235023p:plain

こんな感じ。this.propは親から渡される情報。  

 

このコメントの部品を、親要素に渡してみます。

f:id:chuck0523:20151102235300p:plain

コメントを2つ生成して、それぞれauthor情報を渡しています。

 

これをローカルで表示するとこのとおり。

f:id:chuck0523:20151102235406p:plain

 

次に、propsの値をJSONに格納します。

 

まずは、erb内にJSONを書きます。

f:id:chuck0523:20151103001351p:plain

 

まあ、結果は変わりませんが、一応ローカルで確認。

f:id:chuck0523:20151103001455p:plain

きちんとビューから渡ってきた値を、Reactが処理できています。

 

今日はここまで。

続きはまた次回やっていきます。