Package Exports
- react-hot-loader
- react-hot-loader/package
- react-hot-loader/package.json
This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-hot-loader) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.
Readme
react-hot-loader
This is a highly experimental proof of concept of React live code editing.
It marries React with Webpack Hot Module Replacement by monkeypatching React.createClass.
Inspired by react-proxy-loader.
Running Example
npm install
cd example
webpack-dev-server --hot
open http://localhost:8080/webpack-dev-server/bundleThen 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
Installation
npm install react-hot-loader
Usage
var Button = require('react-hot!./button');When a component is imported that way, changes to its code should be applied without unmounting it or losing its state.
You can also specify loader in config before jsx-loader:
module: {
loaders: [
{ test: /\.jsx$/, loaders: ['react-hot', 'jsx-loader'] }
]
}This will enable hot reload for all JSX files.