react-fullstack を調べてみた

WEBフロントの開発環境を色々改めておりまして、今気になっているwebpack-dev-serverでHMRできるやつをyeomanで探してみました。現在generatorsの上位にある koistya氏の react-fullstack (react-starter-kit) が素敵だったので、気になったところだけピックアップして調べてみました。

HMR (Hot Module Replacement) について

webpackにバンドルされているlivereloadみたいなやつです。
ファイルを編集するとブラウザに変更がリアルタイムで反映されるのはlivereloadと同じなんだけど、これはリロードさえせずに変更が反映され、まさにポルターガイスト現象。
https://webpack.github.io/docs/hot-module-replacement.html

HMRだけのboilerplateは結構ある様ですね。いずれも開発時はwebpack-dev-serverか、独自にexpressを立ち上げるものが多いです。（webpack-dev-serverも内部はexpressらしい）

CSS Modules(CSS in JS) について

以下の記事にwebpackのcss-loaderが実現する、cssグローバル汚染終焉が書かれております。
https://medium.com/seek-ui-engineering/the-end-of-global-css-90d2a4a06284#.u8gb3nobc

すごく良いんだけど、:local(.foo) っていうのがなんか回りくどい感じがしていたところ、react-fullstackに使われている isomorphic-style-loader でその回りくどさを払拭していた。react-fullstackと同じ作者。
https://github.com/kriasoft/isomorphic-style-loader

ContactPage.js

import withStyles from 'isomorphic-style-loader/lib/withStyles';
import s from './ContactPage.scss';
...
render() {
    return (
      <div className={s.root}>
        <div className={s.container}>
          <h1>{title}</h1>
          <p>...</p>
        </div>
      </div>
    );
  }
...
export default withStyles(ContactPage, s);

ContactPage.scss

.root {
}
.container {
  margin: 0 auto;
  padding: 0 0 40px;
  max-width: $max-content-width;
}

<div class="ContactPage_root_c4z" data-reactid=".1c4vwf3rqww.1">
  <div class="ContactPage_container_2pQ" data-reactid=".1c4vwf3rqww.1.0">
    <h1 data-reactid=".1c4vwf3rqww.1.0.0">Contact Us</h1>
    <p data-reactid=".1c4vwf3rqww.1.0.1">...</p>
  </div>
</div>

scssのセレクタはすごくシンプルなのに、これでスタイルがあたるので驚き。吐き出されるセレクタ名書式はcss-loaderと同様、webpack.configのパラメータで設定できる。HMRとisomorphic-style-loaderどちらも開発中はexpressサーバで行うので任意のバックエンドを利用する場合は以下の記事を参照されると良いかと。

webpackのHot Module ReplacementでWebフロントエンドを爆速開発