This is highly experimental tech. If you’re enthusiastic about hot reloading, by all means, give it a try, but don’t bet your project on it. Either of the technologies it relies upon may change drastically or get deprecated any day. You’ve been warned 😉 .
No effort went into making this user-friendly yet. The goal is to eventually kill this technology in favor of less hacky technologies baked into React. These projects are not long term.
First, install the Babel plugin:
npm install --save-dev babel-plugin-react-transform
Then, install the transform:
npm install --save-dev react-transform-hmr
.babelrc to include a plugin configuration for
react-transform. It contains array of the transforms you want to use:
"presets": "es2015" "stage-0""env":// only enable it when process.env.NODE_ENV is 'development' or undefined"development":"plugins": "react-transform""transforms":"transform": "react-transform-hmr"// if you use React Native, pass "react-native" instead:"imports": "react"// this is important for Webpack HMR:"locals": "module"// note: you can put more transforms into array// this is just one of them!
Make sure you process files with
babel-loader, and that you don’t use React Hot Loader (it’s not needed with this transform).
It is up to you to ensure that the transform is not enabled when you compile the app in production mode. The easiest way to do this is to put React Transform configuration inside
.babelrc and ensure you’re calling
NODE_ENV=production. See babelrc documentation for more details about using
Warning! This doesn't currently work for stateless functional components that were introduced in React 0.14!
This transform enables hot reloading when used together with React Native Webpack Server. However note that you should not use
.babelrc to configure it with React Native. Otherwise you’ll get
Uncaught SyntaxError: Unexpected reserved word in
There are two problems why
.babelrc doesn’t work well in React Native:
babel-plugin-react-transformto not be compiled into a
Until we have better
.babelrc support in React Native, you should configure React Transform together with
var fs = ;var path = ;var webpack = ;var config =debug: truedevtool: 'source-map'entry:'index.ios': './src/main.js'output:path: pathfilename: '[name].js'module:loaders:test: /\.js$/exclude: /node_modules/loader: 'babel'query:stage: 0plugins:plugins:;// Hot modeif processenvHOTconfigdevtool = 'eval';configentry'index.ios';configentry'index.ios';configentry'index.ios';configoutputpublicPath = '';configplugins;// Note: enabling React Transform and React Transform HMR:configmoduleloaders0queryplugins;if processenvNODE_ENV === 'production'configplugins;configplugins;moduleexports = config;
See React Native Webpack Server examples for details.