react-routerでsingle pageなrails scaffold

React をちょっと触ってみたい、というのと 最近すこし Ruby on Rails も勉強はじめた、ということで、rails g scaffoldで作るような管理画面のViewを react-router を使ってSingle Page Applicationで作ってみた。

• https://react-router-scaffold.herokuapp.com/

(source code: https://github.com/sugyan/react-router-scaffold)

既に React.jsでRailsのScaffoldを再現してみた - Qiita という記事があり、これをおおいに参考にさせていただいております。

違いとしては、

• Bootstrapで見た目を変えてる
• React 0.13でサポートされているES6 classes記法などを使って書いてみた
• HashでなくHistory APIを使うページ遷移
• サーバサイドのvalidationを入れていてエラーが返るとそれをフォームに反映
• submit成功時などのflash noticeを無理矢理に実装
• paginationを追加

など。一覧でのソートやフォームのコンポーネント管理とかもやろうと思ったけど未実装…。

雑感

• RailsもReactも素人な状態で両方に同時に手を出したら分からないことだらけでつらい
• Turbolinksとの相性とか ES6のsyntaxでUglifyが効かなくてHerokuで動かせなかったり
• Reactが0.13になってからreact-routerが対応されるまで暫く動かなくなっちゃったり
• そもそも最初はCoffeeで書くべきなのか、とかそのへんもよく分からなかった
• まだまだ上手い書き方が身に付いてなくて無限に書き直しが発生する。勉強が足りない。
  • ツッコミいただけると幸いです

参照

• 一人React.js Advent Calendar 2014 - Qiita

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