Can I edit React components without reloading the browser?

Question

If React offers DOM reconciliation, is it possible to dynamically reload component's code and re-render it after I edit it?

I'm looking for a solution that allows me to edit JSX file, save it, and have the component update itself in the browser, without reloading the page, unmounting it or losing its state.

Ideally this should work without browser plugins.

Answer 1

You can use react-hot-loader, a drop-in Webpack loader that enables live editing for React components in your projects. No browser plugins or IDE hooks required.

It marries Webpack Hot Module Replacement (HMR) with React.

You can use this if:

• Your React components donʼt have nasty side-effects;
• Youʼre willing to switch to Webpack for modules (it's not hard to switch, see the walkthrough);
• You have a spare couple of hours (minutes if you already use Webpack).

How it works:

• It uses Webpack HMR API to learn about the “module update available” event.
• It changes React.createClass calls to special createClass and updateClass functions that store the component's prototype and later update it with fresh version;
• When all prototypes are updated, it calls forceUpdate to re-render the components.

There is a demo video, an explanatory blog post and a React tutorial app fork with live-edit configured.

And it's all vanilla JS.