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.

Alinaaline

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.

Alinaaline

you can do it Dan's way with Webpack. If you are using RequireJS / AMD and want to start using React, I created a DIY solution for hot-reloading for RequireJS + React, see my answer – Vogel

Answer 2

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.com/@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.com/ORESoftware/hr4R

but I recommend 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.

Vogel