Rails
reactjs

React.jsでRailsのScaffoldを再現してみた

More than 3 years have passed since last update.

RailsのScaffoldで生成されるアプリケーションを、React.jsで再現させてみました。

Github: https://github.com/Peranikov/rails-scaffold-react

Demo: https://rails-scaffold-react.herokuapp.com/


ソースコードについて

MITライセンスですので自由に改変してください。

もっとうまい人が書けば短くリファクタリングできると思います。PR歓迎です。

Fluxについては意識していません。(というかまだちゃんと理解していないです)


使用したライブラリなど


react-rails

https://github.com/reactjs/react-rails

assets-compileでJSXをJSに変換してくれるgemです。rails g react:installとコマンドを打つことでapp/assets/javascripts/配下にcomponentsというディレクトリが生成されるので、React.jsのcomponentはここに配備するようにします。

また、React.jsの特徴であるserver-side renderingをRailsのhelperを通して実現できることも特徴です。


Reactable

Official: http://glittershark.github.io/reactable/

Github: https://github.com/glittershark/reactable

TableをReact.jsのコンポーネントで提供してくれます。オブジェクトを引き渡すだけでカラムとデータを自動で表示してくれたり、ページネーションやフィルター、ソートも標準装備しているすごいやつです。


react-router

https://github.com/rackt/react-router

React.jsでのルーティングを提供してくれます。'artiles/:id'などのパスにも対応できます。


おまけ:使用していないライブラリなど


react-bootstrap

Oficial: http://react-bootstrap.github.io/

Github: https://github.com/react-bootstrap/react-bootstrap

デザインまで手を加えようとしてやめました。別のプロダクトでは使用しています。

文字通り、BootstrapのデザインをReactのコンポーネントで提供してくれます。

公式サイトを見ていただければわかりますが、ほぼすべてのコンポーネントを再現してくれています。ありがたいです。