Turns out React 16 didn't break React Transform's HMR

Moved React Hot Loader usage instructions to the FAQ instead

[ci skip]

CHANGES.md

@@ -7,29 +7,7 @@
 
 ## Fixed
 
-- Added `'createClass'` and `'createReactClass'` to the factory function names [React Transform](https://github.com/gaearon/babel-plugin-react-transform) looks for, so React component hot reloading will work for React 15 apps using [`create-react-class`](https://www.npmjs.com/package/create-react-class), imported as one of those names.
-  - **Note:** React 16 seems to have broken use of React Transform (which has been deprecated for some time); in the meantime for React 16 apps you should [disable use of React Transform with the `--no-hmre` flag](https://github.com/insin/nwb/blob/master/docs/Commands.md#nwb-serve) and install and use [React Hot Loader](https://github.com/gaearon/react-hot-loader), which requires a top-level component to be added to your app.
-
-    The following `nwb.config.js` tweaks will provide the Babel and Webpack config React Hot Loader requires:
-
-    ```js
-    module.exports = function({command}) {
-      let config = {
-        type: 'react-app'
-      }
-      // Only include react-hot-loader config when serving a development build
-      if (command.startsWith('serve')) {
-        config.babel = {plugins: 'react-hot-loader/babel'}
-        config.webpack = {
-          config(webpackConfig) {
-            webpackConfig.entry.unshift('react-hot-loader/patch')
-            return webpackConfig
-          }
-        }
-      }
-      return config
-    }
-    ```
+- Added `'createClass'` and `'createReactClass'` to the factory function names [React Transform](https://github.com/gaearon/babel-plugin-react-transform) looks for, so React component hot reloading will work for apps using [`create-react-class`](https://www.npmjs.com/package/create-react-class) imported as one of those names.
 
 ## Changed
 

docs/FAQ.md

@@ -5,6 +5,7 @@
 - [How do I enable CSS Modules?](#how-do-i-enable-css-modules)
 - [What can I configure to reduce bundle size?](#what-can-i-configure-to-reduce-bundle-size)
 - [How can I copy non-JavaScript files when building a React component/library?](#how-can-i-copy-non-javascript-files-when-building-a-react-component-library)
+- [How can I use React Hot Loader instead of React Transform?](how-can-i-use-react-hot-loader-instead-of-react-transform)
 
 ---
 
@@ -74,3 +75,40 @@ Try configuring [`babel.cherryPick`](/docs/Configuration.md#cherrypick-string--a
 ### How can I copy non-JavaScript files when building a React component/library?
 
 Pass a [`--copy-files` flag](/docs/guides/ReactComponent.md#--copy-files).
+
+### How can I use [React Hot Loader](https://github.com/gaearon/react-hot-loader) instead of [React Transform](https://github.com/gaearon/babel-plugin-react-transform)?
+
+> [React Transform](https://github.com/gaearon/babel-plugin-react-transform) is deprecated in favour of [React Hot Loader](https://github.com/gaearon/react-hot-loader), but nwb is still using the former as it can be activated entirely via the configuration nwb manages, whereas React Hot Loader requires a component to be added to your app.
+
+- `npm install react-hot-loader`
+- Disable use of React Transform by passing a [`--no-hmre` flag](https://github.com/insin/nwb/blob/master/docs/Commands.md#nwb-serve) to the `serve` command you're using. e.g. in your app's `package.json`:
+
+  ```json
+  {
+    "scripts": {
+      "start": "nwb serve-react-app --no-hmre",
+    }
+  }
+  ```
+- Provide the Babel and Webpack config React Hot Loader requires in your `nwb.config.js`:
+
+  ```js
+  module.exports = function({command}) {
+    let config = {
+      type: 'react-app'
+    }
+    // Only include react-hot-loader config when serving a development build
+    if (command.startsWith('serve')) {
+      config.babel = {plugins: 'react-hot-loader/babel'}
+      config.webpack = {
+        config(webpackConfig) {
+          // React Hot Loader's patch module needs to run before your app
+          webpackConfig.entry.unshift('react-hot-loader/patch')
+          return webpackConfig
+        }
+      }
+    }
+    return config
+  }
+  ```
+- Use React Hot Loader's `<AppContainer>` component in your app's entry module (usually `src/index.js` in apps using nwb) as per its [Getting Started docs](https://github.com/gaearon/react-hot-loader#getting-started).