Live code editing with Browserify and React
4.x
series (many thanks to @EugeneZ who's the author of these changes)Starting from 4.0.0-beta.1
, LiveReactload will be using react-hot-loader
as its hot reloading component. This approach allows us to keep up with the newest work of react-hot-loader
community, providing better developer experience to you Browserify users. From now on, react-hot-loader
bug fixes and middleware (such as e.g. react-redbox
) can be used with LiveReactload just like they can be used with Webpack HMR.
In order to migrate your 3.x
LiveReactload application to the new version, you must apply the following steps:
react-proxy
and babel-plugin-react-transform
dependencies from package.json
using npm uninstall
or yarn remove
npm install
or yarn add
to get the latest livereactload
and react-hot-loader
packages.react-transform
section of your Babel config with react-hot-loader/babel
. See installation instructions for how the config should look now. (It's must simpler.)import { AppContainer} from 'react-hot-loader'
to the file where you render your root component, and then wrap your root component in this container. ReactDOM.render(<App/>, ...)
becomes
ReactDOM.render(<AppContainer><App></AppContainer>, ...)
.module.onReload
it must be replaced with module.hot.onUpdate
. This isn't simply a rename, this hook works differently now. Despite this, if you were following the commonly used patterns for this hook in the LiveReactload examples, simply renaming it should work just fine.The full documentation and examples of the new version are available here.
--no-babel
option to disable "Could not detect LiveReactLoad transform..." warning with non-babel transpilers #144 #145 (thanks @pizza2code!)Function