How to use react inside a polymer component?

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>