DC4

Rails5 + ES6 + React + react-router + axios + CSS Modules でTodoアプリを作った。

前回 Angular2で作成したTODOアプリのReact バージョンを作成しました。

作ったもの

f:id:Yasun:20170225194059p:plain

todo-rails-xxx-js

構成

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の場合は自分でライブラリを選択する必要があります。

調べた結果、候補として superagentaxios が挙がりました。

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を試す予定です。