LoginSignup
1
1

More than 5 years have passed since last update.

node,npmの学習4

Posted at

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

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

プロトタイピング

覚えてない。。

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/

一旦、一番参考にした。

1
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
1