前回はwebpackでCSSやSass、PostCSSを使えるようにしてみました。

webpackでCSSをコンパイルしてみる&SassとPostCSSを使ってみる

今回は、react-hot-loaderを追加してみます。webpack-dev-serverで自動リロードできるようになるのはいいですが、ファイルを保存するとブラウザがリロードされるのでstateもリセットされてしまいます。

react-hot-loaderでホットリロードを取り入れると保存した時に変更差分のみが更新されるため、stateを保ったまま開発できます。

1. インストール
2. webpackの修正
3. 使ってみる

インストール

React Hot Loader のドキュメントに書かれているように以下のコマンドを打ちます。

npm install --save-dev react-hot-loader

package.jsonに追加されたらOKです。

webpackの修正

webpackを以下のように修正します。

webpack.config.js

// 省略
const plugins = [
  new webpack.HotModuleReplacementPlugin(), // 追加
  new webpack.optimize.OccurenceOrderPlugin()
];
// 省略
module.exports = {
  // 省略
  devServer: {
    hot: true, // 追加
    contentBase: 'public',
    port: 3000,
    inline: true
  },
  module: {
    loaders: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        // 以下書き換え
        loaders: [
          'react-hot',
          'babel'
        ]
      },
      {
        test: /\.css$/,
        // こっちも
        loaders: [
          'react-hot',
          'style',
          'css'
        ]
      }
    ]
  }
// 省略
}

使ってみる

簡単なカウントアップを作って試してみます。srcディレクトリ以下に「app.js」と「Count.js」を作ります。

app.js

import React from 'react';
import { render } from 'react-dom'
import { Count } from './Count.js'
import styles from './style/app.css'
render(
  <Count />,
  document.getElementById("app")
)

Count.js

import React from 'react';
import { render } from 'react-dom';
export class Count extends React.Component{
  constructor() {
    super()
    this.state = {
      count: 0
    }
  }
  handleClick() {
    this.setState({
      count: this.state.count + 2
    })
  }
  render(){
    return(
      <div>
        <span>{this.state.count}</span>
        <button onClick={this.handleClick.bind(this)}>+</button>
      </div>
    )
  }
}

書いたら以下でスタート

npm start

いろいろ書きかえてみます。

gif動画ではjsやCSSを書きかえて保存していますが、カウントアップの数字自体はそのままで、変更したところがオートリロードされているのが分かると思います。

こんな感じで状態を保ったままコードを書いていくことができます。

さいごに

現状はこれで動いてるのでいいと思いますが、GitHubのReadmeに「A Big Update Is Coming」と書かれています。近いうちに大きな変更があるので、書きかえる必要があるかもです。その時はまた試してみようと思います。

1. 初めてでもできるwebpackとbabelを使ってみるまで
2. webpackでReact.jsとwebpack-dev-serverを使えるようにする
3. webpackで開発時にソースマップを出したり本番用に圧縮する
4. webpackでCSSをコンパイルしてみる&SassとPostCSSを使ってみる
5. react-hot-loaderを使ってReactでHMRをやってみる