Transpile single React component to use as JS widget

Question

I am working on a fairly complex web app using React.js, and I would like to allow the app's users to use one of the components as an API widget on their sites as well with a script tag (think Google Maps API, Analytics, etc.)

I'm new to React, but I think React takes all of the components, etc. in the app, and bundles them into a single JS file.

Is it possible to bundle only one component into a JS file, then let users place that file in their site, and use it as a widget?

I've tried transpiling the component I want users to use as a widget with reactify , but I can't seem to get it to work.

Any thoughts?

Answer 1

Absolutely, however they will still need to include React as a dependency, or you would have to in your widget.

To use React you don't need to use transpilation, ie you don't need reactify. Building a widget for React is like building a widget for jQuery.

 // Your widget root component var SayHelloComponent = React.createClass({ render() { // You use React.createElement API instead of JSX return React.createElement('span', null, "Hello " + this.props.name + "!"); } }); // This is a function so that it can be evaluated after document load var getWidgetNodes = function () { return document.querySelectorAll('[data-say-hello]'); }; function initializeWidget(node) { // get the widget properties from the node attributes var name = node.getAttribute('data-say-hello'); // create an instance of the widget using the node attributes // as properties var element = React.createElement(SayHelloComponent, { name: name }); ReactDOM.render(element, node); } getWidgetNodes().forEach(initializeWidget); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> <!-- What it would look to include your widget in a page --> <div data-say-hello="Guzart"></div> 

The only reason you would need to transpile your code would be to use JSX and ES6.