node,npmの学習4

CSS Modules

Free-Style のススメ ~ CSS Modules は解決策ではない - Qiita
http://qiita.com/kimamula/items/2a5e69269e77ca85008e

定数の共有や、スタイルの拡張などは、 CSS in JS のように JS の世界でできたほうがやりやすそう (慣れの問題かもしれない)
CSS と JS の間での定数の共有ができない

JSスクリプト側でCSSも記述してしまうってことかな。
たしかに分離しておけばデザイナーも困らないし、そのほうができることが増えるかな。
可能なら逆変換もできるならよりいい気がするけど、どうなんだろう。

CSS-ModulesとReact.jsを組み合わせると便利！　 | 酒と涙とRubyとRailsと
http://morizyun.github.io/blog/react-js-css-module/index.html

ES7のdecorators syntaxの場合はこんな感じです。

へー、そんなことできるのか。

CSS Modules 所感 - morishitter blog
http://morishitter.hatenablog.com/entry/2015/09/28/103334

内部の仕組みについて。

:local()に書かれたセレクタがエンコードされることで他のルールセットのセレクタ名と衝突しなくなり、結果的にローカルスコープを得たようになる。 :global()に書かれたセレクタはそのまま展開され、通常のCSSのルールセットと同じ振る舞いをする。

グローバルもかけるのね。

webpackのcss-loaderでCSS Modulesをやる - Qiita
http://qiita.com/_likr/items/c335dec5221024ad56bc

reactとwebpackでやる

reactをつかいそう

ちょっと時間をかけてもホットローディングを使えるようにしたほうがいいかな。。
設定がいろいろあって混乱して無駄にハマった。。
トータルでチェック（バージョンや設定ファイルどもの解析・見える化）してくれるツールがあるといいなあ。。

React Hot Loader 3 と webpack 3 でHot Module Replacement（react-hmreからの移行） - dackdive's blog
http://dackdive.hateblo.jp/entry/react-hot-loader

reduxではstoreの書き方を注意。

まさたか日記
http://mk.hatenablog.com/

react-reduxのHMRできた！ - まさたか日記
http://mk.hatenablog.com/entry/2017/08/22/054327

HMRの完成度アップ、ReducerのHMRも - まさたか日記
http://mk.hatenablog.com/entry/2017/08/23/042158

ReduxのreducerもHot Reloadingさせる方法 - Qiita
http://qiita.com/wadahiro/items/30f7f6a45af19f3ae9c1

Reduxアプリであれば、React Hot LoaderやLiveReactloadを使わずともライブリロードが可能
http://blog.tai2.net/react-redux-reload.html

ストアに全部入っていればホットロードじゃなくてもツールで永続化しつつ開発できると。

reduxにするか。。

eslintを設定変更

babel-eslintを使うのか。。っと思ったら違うのね。

React Code Style with ESLint + Babel + Webpack - RWieruch
https://www.robinwieruch.de/react-eslint-webpack-babel/

AtomでReact×ES6×JSXを書くヒトがpackage「language-babel」を入れた際にErrorが出た際の放水の仕方 - Qiita
http://qiita.com/M-ISO/items/338132b73b894b4170b1

babel-eslintでBabelなLint | たんたか
http://blogs.gine2.jp/taka/archives/3124

サイでもわかる？！ ESLint 導入 - |> Weeeeeeb
http://kuriya0909.hatenablog.com/entry/2015/11/13/105846

ESLintはnpmでインストールします。 インストールするのはeslintとbabel-eslintです。 babel-eslintはbabelでES6をトランスコンパイルに使用している場合、
ESLint標準のパーサー(ASTを作るモジュール)では対応しきれないことがあります。

ESLint は ES6 をフルサポートしていますので、ES6 (と JSX) を使うために babel-eslint は不要です。
babel-eslint はモンキーパッチの塊なので、なるべくなら使わないほうが無難です。
ES2016 以降に提案されてる機能 (stage0 - stage3) を使いたい場合は、そのまま babel-eslint をお使いください。

React のコードを ESLint で検証する - blog @arfyasu
http://arfyasu.hatenablog.com/entry/2016/03/06/161832

ウィザード形式では、以下の質問に答えることで設定ファイルを作成出来ます。
質問内容は中学生でも分かる英語なので、特に説明しなくても問題ないかとｗ

プロトタイピング

覚えてない。。

Redux + React + ES6 の簡単アプリを作成する②(ReactとReduxの連携編) - Qiita
http://qiita.com/gcfuji/items/4c3aec58b74c178d2663

いまはpropTypesパッケージをつかう。

ReactとReduxちょっと勉強したときの📝 - Qiita
http://qiita.com/mgoldchild/items/5be49ea49ebc2e4d9c55

React + Reduxでカウンターアプリの作成 (react-redux使う編) - funxion
http://blog.funxion.jp/236/

一旦、一番参考にした。