title: Run a PhosphorJS DockerPanel with Widgets INSIDE a React component
body: <p>I have a react app, and in one of the components I would like to render a Phosphor desktop (<a href="http://phosphorjs.github.io" rel="nofollow noreferrer">http://phosphorjs.github.io</a>).</p>
  
  <p>Web sources suggest the other way around, running React component inside a Phosphor Widget, but I need to wrap the Phosphor desktop with widgets inside a React component instead. Not sure how to go about it.</p>
  
  <p>This is my first attempt:</p>
  
  <pre><code>import React, { Component } from 'react';
  import './App.css';
  
  import { DockPanel } from 'phosphor-dockpanel';
  import { Message } from 'phosphor-messaging';
  import { TabPanel } from 'phosphor-tabs';
  import { ResizeMessage, Widget } from 'phosphor-widget';
  
  
  class MyWidget extends Widget {
  
    static createNode() {
      console.log('widget:createNode');
      var node = document.createElement('div');
      var app = document.createElement('div');
      app.className = 'todoapp';
      node.appendChild(app);
      return node;
    }
  
    constructor(model) {
      super();
      this.addClass('TodoWidget');
      this._model = model;
      console.log('widget:constructor');
    }
  
    get model() {
      console.log('widget:getModel');    
      return this._model;
    }
  
    onAfterAttach(msg) {
      console.log('onAfterAttach');
      //this._model.subscribe(() =&gt; this.update());
      this.update();
    }
  
    onUpdateRequest(msg) {
      console.log('widget:onUpdateRequest');    
      var data = { model: this._model };
      var host = this.node.firstChild;
      //React.render(React.createElement(app.TodoApp, data), host);
    }
  }
  
  
  class ReactDockPanel extends Component {
    constructor(props) {
      super(props);
    }
  
    componentWillMount() {
      this.panel = new DockPanel();
      this.panel.id = this.props.id;
  
      this.widget = new MyWidget();
      this.panel.insertLeft(this.widget);
    }
  
    componentDidMount() {
      this.panel.attach(this.node);
    }
  
    render() {
      return (
        &lt;div ref={el=&gt;this.node=el}&gt;
        &lt;/div&gt;  
      );
    }    
  }
  
  class App extends Component {
  
    render() {
      return (
        &lt;ReactDockPanel id='main'&gt;
        &lt;/ReactDockPanel&gt;
      );
    }
  }
  
  export default App;
  </code></pre>
  
  <p>I'm not sure how to replace React.render(React.createElement(app.TodoApp, data), host); Phosphor docs are for reference but not for learning so I'm going by their only example code.</p>
  
  <p>Ideally I'd like to be able to render like this:</p>
  
  <pre><code>&lt;ReactDockPanel id='mydesktop'&gt;
    &lt;SomeWidget insert='left' /&gt;
    &lt;SomeOtherWidget insert='right' /&gt;
  &lt;/ReactDockPanel&gt;
  </code></pre>
  
  <p>Not sure it can be done.</p>