React
HMR
create-react-app

create-react-appでHMR

CRAで生成したアプリでejectしないでwebpack HMR使用、かつ状態を維持する方法。

https://daveceddia.com/hot-reloading-create-react-app/
によれば、

With just 3 lines of code, you can turn on HMR, but with one big caveat: React state and DOM state are not preserved between reloads. This is kind of a bummer.

わずか3行のコードで、HMRを有効にできますが、1つの大きな注意点があります。React状態とDOM状態はリロードの間に保持されません。

つまり、

if (module.hot) {
  module.hot.accept();
}

を追加すればよい。ただし、stateをもったコンポーネントをリロードしたときに、そのコンポーネントの状態が維持できなくなってしまったように見える(CRA 1.4.0ではできていた)。(変更がなかった他のコンポーネントの状態は維持される)

上の記事は続いており、該当のコンポーネントの状態も保存する方法がかかれているように見える。ただしかなり面倒くさいように見える。

以降は削除

今はCRAでHMRはサポートされており(CRA1.4.0で確認)、後述の修正は不要であり、index.jsに以下を追加すればよい。

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(<MyComponent name="world" />,document.getElementById('root'));

// 以下を追加
if (module.hot) {
  module.hot.accept('./App', () => {
    ReactDOM.render(<App />, document.getElementById('root'))
  })
}

以下は削除

create-react-appは現時点(react-scripts 0.8.4)ではコンポーネント単位でのHMR(Hot Module Replacement)をサポートしていない、と明示されています。

Limitations
Some features are currently not supported:
 - Hot reloading of components.

Webpackの設定を見ると

node_modules/react-scripts/config/webpack.config.dev.js
219:    // This is necessary to emit hot updates (currently CSS only):
220:    new webpack.HotModuleReplacementPlugin(),

を見るとdev-serverで設定されてはいます。ただしコンポーネントのstateが維持されません。
ページ全体のリフレッシュがされてしまうようです。

stateを維持するためには、Babelの方で手を加えるためのプラグイン
npm install babel-preset-react-hmre --save-dev
を入れて、react-scriptのWebPackの設定を以下のように修正します。

node_modules/react-scripts/config/webpack.config.dev.js
119:        query: {
120:          // @remove-on-eject-begin
121:          babelrc: false,
-122:          presets: [require.resolve('babel-preset-react-app')],
+122:          presets: [require.resolve('babel-preset-react-app'), 'react-hmre'],
123:          // @remove-on-eject-end
124:          // This is a feature of `babel-loader` for webpack (not Babel itself).

node_modulesの配下を修正するので、upgrade時などには毎回修正する必要があります。