How to use react inside a polymer component? - reactjs

Question

It seems it could posible to use react inside a polymer web component but I couldn’t find a working example, only this, but it seems outdated.
HTML
<link rel="import" href="http://www.polymer-project.org/components/polymer/polymer.html" />
<polymer-element name="my-polymer" constructor="" attributes="name">
<template>
<P>I AM {{name}}</P>
<div id="reactContainer"></div>
</template>
<script type="text/jsx">
/** #jsx React.DOM **/
Polymer('my-polymer', {
created: function(){},
ready: function(){},
attached: function(){},
domReady: function(){
React.renderComponent(<MyReact name="REACT INSIDE POLYMER"/>, this.$.reactContainer);
},
detached: function(){},
attributeChanged: function(attrName, oldVal, newVal) {}
});
</script>
</polymer-element>
<my-polymer name="POLYMER"></my-polymer>
JS
/** #jsx React.DOM */
var MyReact = React.createClass({
render: function() {
return (
<p>I AM {this.props.name}</p>
);
}
});

Answer 1

The main things you gotta take care of before, is:
transform the index.jsx into index.js javacript form (https://github.com/jsx/JSX)
babel --plugins transform-react-jsx
Bundle up your reactApp with Traceur Compiler, Babel, Rollup or webPack. Since imports aren't yet implemented in browsers.
make sure you main file index.js, doesn't render's react. That's going to be Polymer's responsibility.
npm run build (obtained with npm run build for reac-redux)
index.js
import React from 'react'
import { render } from 'react-dom'
import { createStore } from 'redux'
import { Provider } from 'react-redux'
import App from './components/App'
import reducer from './reducers'
window.Render = render;
window.React = React;
window.CreateStore = createStore;
window.Provider = Provider;
window.App = App;
window.Reducer = reducer;
example-component.html
<link rel="import" href="../polymer/polymer-element.html">
<dom-module id="example-component">
<template>
</template>
<script src="./main.bundleFromReact.js"></script>
<script>
class ExampleComponent extends Polymer.Element {
static get is() { return 'example-component'; }
ready() {
super.ready();
const store = CreateStore(Reducer);
Render(
React.createElement(
Provider,
{store: store},
React.createElement(
App,
null
)
),
this.shadowRoot
);
}
}
window.customElements.define(ExampleComponent.is, ExampleComponent);
</script>
</dom-module>
tl;dr
You can see my simplest example without importing here:
<link rel="import" href="../polymer/polymer-element.html">
<script src="../react/react.min.js"></script>
<script src="../react/react-dom.min.js"></script>
<dom-module id="example-component">
<template></template>
<script>
class HelloMessage extends React.Component {
render() {
return React.createElement(
'div',
{}, `Hello ${this.props.name}`);
}
}
class ExampleComponent extends Polymer.Element {
static get is() { return 'example-component'; }
ready() {
super.ready();
var mountPoint = document.createElement('span');
this.shadowRoot.appendChild(mountPoint);
ReactDOM.render(
React.createElement(HelloMessage, {name: 'Maestro'}),
mountPoint
);
}
}
window.customElements.define(ExamplComponent.is, ExamplComponent);
</script>