react-hot-loader

This is a stable for daily use in development implementation of React live code editing. It works on top of webpack-dev-server and can be run directly or through a Grunt or Gulp task. It marries React with Webpack Hot Module Replacement by wrapping React.createClass calls in a custom function that updates components' prototypes when the changes come in. Inspired by react-proxy-loader.

• Get inspired by a real project video demo.

• Read how it works.

• For barebone example, check out React tutorial app forked to use Webpack and react-hot-loader and integration walkthrough.

• If you're into CoffeeScript, check out coffee-react-quickstart that uses react-hot-loader with Gulp.

• Run npm install && npm start to have fun with the bundled example:

Installation

npm install react-hot-loader

Usage

Read the walkthrough!

Seriously! It covers:

• porting a project to use Webpack;
• enabling Hot Module Replacement;
• integrating react-hot-loader.

Also check out coffee-react-quickstart for an integration example with Gulp and CoffeeScript.

Exceptions

Hot reload is disabled for modules that contain no React.createClass calls and/or don't export a valid React class. For example, in the sample project, app.jsx doesn't get live updates because it is assumed to have side-effects.

Several components in one file will work as long as their displayNames are different.

Options

• notify: Loader can use desktop Notification API to show notifications when a module has been reloaded, or if it loads with an error. By default, this feature is disabled because it doesn't work well with webpack-dev-server iframe mode used in the example. If you don't use webpack-dev-server's iframe mode, you might want to enable notifications. Valid values are none (default), errors and all. If notify is errors or all, module load errors won't cause page refresh.

Running Example

npm install
npm start
open http://localhost:8080/webpack-dev-server/bundle

Then edit example/a.jsx and example/b.jsx. Your changes should be displayed live, without unmounting components or destroying their state.

Implementation Notes

Currently, it keeps a list of mounted instances and updates their prototypes when an update comes in.

A better approach may be to make monkeypatch createClass to return a proxy object as suggested by Pete Hunt:

The problem is that references to component descriptors could be stored in any number of places. What we could do is wrap all components in "proxy" components which look up the "real" component in some mapping

License

MIT (http://www.opensource.org/licenses/mit-license.php)