diff --git a/CHANGES.md b/CHANGES.md index 41782b47..c0996b2e 100644 --- a/CHANGES.md +++ b/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 diff --git a/docs/FAQ.md b/docs/FAQ.md index e0a7e91e..8348feaa 100644 --- a/docs/FAQ.md +++ b/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 `` 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).