Rails5 + ES6 + React + react-router + axios + CSS Modules でTodoアプリを作った。
前回 Angular2で作成したTODOアプリのReact バージョンを作成しました。
作ったもの
構成
todo-rails-xxx-js/front/react-ver at master · yassun/todo-rails-xxx-js · GitHub
React
Angular同様に公式のチュートリアルがとても充実していました。
Tutorial: Intro To React - React
ライフサイクルについてはコチラの記事がとても参考になりました。
React component ライフサイクル図 - Qiita
react-router
React.jsのシンプルなルーティングライブラリです。
こちらも公式チュートリアルがあります。 GitHub - reactjs/react-router-tutorial
axios
APIとの通信時にAngularの場合はhttpモジュールが用意されているのですが、 Reactの場合は自分でライブラリを選択する必要があります。
調べた結果、候補として superagent
と axios
が挙がりました。
GitHub - mzabriskie/axios: Promise based HTTP client for the browser and node.js
GitHub - visionmedia/superagent: Ajax with less suck - (and node.js HTTP client to match)
今回はAngularのhttpモジュールに似ているという理由で axios
にしました。
CSS Modules
CSSモジュール ― 明るい未来へようこそ | プログラミング | POSTD
Reactと組み合わせることでCSSもコンポーネント単位で管理することができます。
今までBEM記法等の命名ルールで行っていたことをwebpack(style-loader, css-loader)で自動的に行ってくれます。
今回のようにデザインテンプレートを使用している場合でも、 グローバルで使うために宣言されたクラスとローカルだけで使いたいクラスがコンポーネントを見た際に解かる利点がありました。
その他
css/jsのbundleにwebpack、ES6のコンパイルにBabelを使用しました。
まとめ
今回の構成は何かを作る際に第一候補として考えたいと思ってます。
その際にはRails 5.1 でもJSに関する変更点が多く入っているので、この当たりも合わせて試していきたいです。 weblog.rubyonrails.org
次回はVue.js と Flowtypeを試す予定です。