終於到了要踏進ReactJs的這一步了，
我的這一步，是好多新朋友的一大步！！

我這裡剛開始接觸就卡在三個選項：

1. 單純用ReactJs，就好像你單單引入Bootstrap CDN link到Rails Views中一樣。
2. 使用官方推出的react-rails。
3. 非官方shakacode推出的react_on_rails。

我看分別講一下這兩個好了（第一個說實在是我馬上剔除的選項，所以剩下2跟3了），

官方的React-Rails

一定要稍微瀏覽一下他的Github頁面！

前後端分開？

我抽回到我最原始使用ReactJs的理由，我是想把前後端分開，最好前端收在一起，後端收在一起。仔細看看Github的教學：

rails g react:install

This will:
create a components.js manifest file and a app/assets/javascripts/components/ directory, where you will put your components
place the following in your application.js:

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

為什麼前後端切開還放在app/assets/javascripts/components底下？

js.jsx?

這個坑我摔了很久，請看看這裡，會加入asset pipeline，又可以使用BabelTransformer，有問題到底是BabelTransformer的問題，還是asset pipeline的問題？

Component Generator!!

優點優點優點！！
這個點是很吸引我的，能產生Component，不用重新刻，這不是很DRY嗎？

QQ 但為了前後端分開，我還是放棄他了....

非官方的React-on-Rails

一樣，一定要稍微瀏覽一下他的Github頁面！
不囉唆，看看下面的文字：

Project Objective: To provide an opinionated and optimal framework for integrating Ruby on Rails with modern JavaScript tooling and libraries, including Webpack, Babel, React, Redux, React-Router. This differs significantly from typical Rails architecture. ** When considering what goes into react_on_rails, we ask ourselves, is the functionality related to the intersection of using Rails and modern JavaScript? If so, then the functionality belongs right here. In other cases, we're releasing separate npm packages or Ruby gems. ** If you are interested in implementing React using traditional Rails architecture, see react-rails.

npm, webpack

他用了npm把前端的package都放在一起，前端的很多套件不會跟Rails有關係，這樣切割很方便。還有webpack可以做些模組化的工作，像是壓縮、css/image loader、共用程式碼優化。

有react-router, redux, 還解決了Deploy問題

整合了React的Router，也有Redux架構，甚至解決我很懊惱的Deploy digested的問題。

還要擔心form authenticityToken?

來，直接看這裡。

import ReactOnRails from 'react-on-rails';

// reads from DOM csrf token generated by Rails in <%= csrf_meta_tags %>
csrfToken = ReactOnRails.authenticityToken();

// compose Rails specific request header as following { X-CSRF-Token: csrfToken, X-Requested-With: XMLHttpRequest }
header = ReactOnRails.authenticityHeaders(otherHeader);

好吧，其實以前版本沒有。但有了他以後，簡直太棒啦！！

Server-render跟Client-render那些我就不說了，其實React-on-Rails跟React-rails很多地方很類似，甚至他們最後還有一句

We owe much gratitude to the work of the react-rails gem.

其實各有各得好壞，我也用過React-rails，所以才有這麼多的體悟。
雖然還有很多很多功能或API都還沒用到，但跌的坑也是很多，所以寫這些讓大家參考。

再強調一次，我是把我後來會用到的React-on-Rails跟其他比較，我不是說誰誰誰不好，千萬不要誤會啊！！

OK，明天來裝Gem，來玩範例！！