Embeddable JavaScript widget with React

Question

Is it possible to create an embeddable JavaScript widget using the React JavaScript library, where:

1. the React library is "embedded" within the widget
2. the version of the embedded React library can be different from the React library on the page loading the widget, like can be done with jQuery.

I'm lookin for functionality as described in:

• http://blog.swirrl.com/articles/creating-asynchronous-embeddable-javascript-widgets/
• http://shootitlive.com/2012/07/developing-an-embeddable-javascript-widget/

Answer 1

For the requirements you mentioned, the best solution is browserify (or similar). Using reactify transform you can have the JSX to JS happen all in one step. Browserify (and Webpack) are very common the react community, so nearly all libraries are published to npm for easy consumption.

Browserify packs your JavaScript, your React version of choice, and any libraries into a single JS file which doesn't use globals or other patterns that conflict with other code running on the page.

You can also look into some libs like react-css to isolate your styles from the page styles. The styles will also be isolated in your bundle. Of course if the page does something like div {margin: 1em}, the only solutions are iframes or web-components.