title: Electron preload script, React component injection
body: <p>Edge case I know, but I'd like to solve it if I can mainly for educational purposes.  I will likely re-architect this.</p>
  
  <p>Scenario:</p>
  
  <ul>
  <li>Electron app where a bunch of React component are defined in Main process.</li>
  <li>Webview (node integration disabled) wrapping around an existing HTTPS page in a BrowserWindow </li>
  <li>In the webview <strong>preload</strong> script I require('react') and require('react-dom') and retrieve a React.Component extended class (not instance) via remote.getGlobal('classObject')</li>
  <li>In window.onload I render the component after some hacking to overcome Babel/Webpack issue and proxying an object between Main and Renderer process, and render into a div (this won't be a permanent approach)</li>
  <li>The DOM event handlers are not wired up</li>
  </ul>
  
  <p>The issue is why the React DOM event handlers are not wired.</p>
  
  <p>Spent some time tracing through React code but it's too big for me to get my head around quickly.</p>
  
  <p>Anyone understand React event wiring have a quick answer?</p>
  
  <p>Rendered markup is identical to working React setup in native BrowserWindow.</p>
  
  <p><strong>preload.js</strong></p>
  
  <pre><code>'use strict';
  
  window.onload = function () {
  var _require = require('electron');
  
  var webFrame = _require.webFrame;
  var remote = _require.remote;
  window.jq = require('jquery');
  window.React = require('react');
  window.ReactDOM = require('react-dom');
  
  var appOptions = remote.getGlobal('app_options');
  var mainUI = remote.getGlobal('app_ui');
  window.Button = mainUI.componentFactory.getClass('Button');
  let f = function(...args) {
      console.trace('Create window.Button',args)
  
      let b = new window.Button(...args)
      let originalRender = b.render
      b.render = function()
      {
          let c = originalRender()
          let d = {}
          Array.from(Object.keys(c)).forEach((p) =&gt; {
              if (p !== '$$typeof')
                  d[p] = c[p]
              else
                  d['$$typeof'] = Symbol['for']('react.element')
          })
          return d
      }
      return b
  
  }
  Array.from(Object.keys(window.Button)).forEach((p) =&gt; {
      f[p] = window.Button[p]
  })
  window.jq(document).ready(function () {
  
  
      var head  = document.getElementsByTagName('head')[0];
      var link  = document.createElement('link');
      link.rel  = 'stylesheet';
      link.type = 'text/css';
      link.href = 'https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.2/semantic.min.css';
      link.media = 'all';
      head.appendChild(link);
  
      let a = (window.React.createElement(
          f,
          { emphasis: 'primary',onClick: function onClick() {
              console.log('hi');
          }    },
          'Hi!'))
  
      window.ReactDOM.render(a
      , document.getElementById('browserErrorPanel'));
  
      setInterval(function () {
          var a = jq('a[id=Dashboard]');
          if (a.length) a.text('Tim');
      }, 50);
  });
  </code></pre>
  
  <p>};</p>
  
  <p>```</p>