Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
31
Help us understand the problem. What are the problem?

More than 5 years have passed since last update.

posted at

updated at

Organization

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

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

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

ソースコードについて

MITライセンスですので自由に改変してください。
もっとうまい人が書けば短くリファクタリングできると思います。PR歓迎です。
Fluxについては意識していません。(というかまだちゃんと理解していないです)

使用したライブラリなど

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

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

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

react-bootstrap

Oficial: http://react-bootstrap.github.io/
Github: https://github.com/react-bootstrap/react-bootstrap

デザインまで手を加えようとしてやめました。別のプロダクトでは使用しています。
文字通り、BootstrapのデザインをReactのコンポーネントで提供してくれます。
公式サイトを見ていただければわかりますが、ほぼすべてのコンポーネントを再現してくれています。ありがたいです。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
31
Help us understand the problem. What are the problem?