If React offers DOM reconciliation, is it possible to dynamically reload ponent'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 ponent update itself in the browser, without reloading the page, unmounting it or losing its state.

Ideally this should work without browser plugins.

If React offers DOM reconciliation, is it possible to dynamically reload ponent'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 ponent update itself in the browser, without reloading the page, unmounting it or losing its state.

Ideally this should work without browser plugins.

• javascript
• reactjs
• livereload
• hotswap

2 Answers 2

You can use react-hot-loader, a drop-in Webpack loader that enables live editing for React ponents 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 ponents 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 ponent's prototype and later update it with fresh version;
• When all prototypes are updated, it calls forceUpdate to re-render the ponents.

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.

You can, and I created an example project demonstrating how to create these facilities for yourself using ES5 and RequireJS - it works with React and also with Backbone - it could probably work with Angular and Ember etc, as long as you use AMD modules and RequireJS.

Here's all the information: https://medium./@the1mills/hot-reloading-with-react-requirejs-7b2aa6cb06e1

the basic steps are:

1. gulp.js watchers listen for filesystem changes

2. socket.io server in gulpfile sends a message to all browser clients with the path of the file that changed

3. client deletes cache representing that file/module, and re-requires it (using AJAX to pull it from the server filesystem)

4. front-end app is configured / designed to re-evaluate all references to the modules that it wishes to hot-reload, in this case, only JS views, templates and CSS are available to hot reload - the router, controllers, datastores are not configured yet. I do suspect all files could be hot reloaded with the only exception being data stores.

You can see an example project here: https://github./ORESoftware/hr4R

but I remend reading the article above first.

This is a simpler more DIY implementation of hot-reloading than using Babel/ES6 and React-Hot-Loader.

Webpack was not primarily designed for hot-reloading- if it were, hot-reloading would no longer be an experimental feature, nor would it using polling to see filesystem diffs, which it currently does (see my article).

The RequireJS / AMD spec was basically made for hot-reloading, if you think about it.