title: How to integrate mmenu jQuery plugin with ReactJS and Meteor
body: <p>So here we are, innovating with Meteor and ReactJS. This is what i did:</p>
  
  <ol>
  <li>Copied the mmenu jQuery plugin inside my <code>client/lib/js/</code> folder.</li>
  <li>Created a component called <code>Menu</code> which has the <strong>mmenu</strong> plugin initialization in the <code>componentDidMount</code> method.</li>
  <li><p>Placed the React <code>Menu</code> in my <code>Layout</code> component, so this how the React tree looked in Chrome when inspected:</p>
  
  <p><code>&lt;Layout&gt;
      &lt;Menu user={this.data.user} /&gt;
      &lt;Home /&gt;
  &lt;/Layout&gt;</code></p></li>
  </ol>
  
  <p>Problem is, when the <code>Menu</code> component renders, the <strong>mmenu</strong> plugin <strong>moves</strong> the corresponding DOM (the <code>nav</code> element) outside of React scope (just bellow the <code>body</code> tag), so React get confused when referencing that unexistent component when it tries to re-render it when <code>user</code> object (passed as props) changes.</p>
  
  <p>The <code>Menu</code> component looks like this:</p>
  
  <pre><code>Menu = React.createClass({
      componentDidMount(){
          const menu = $(this.refs['mmenu']);
          menu.mmenu({ /* some options here */ });
      }
      render(){
          &lt;nav id="menu" ref="mmenu"&gt;
              { this.props.user ? &lt;HomePublic/&gt; : &lt;HomePrivate/&gt; }
          &lt;/nav&gt;
      }
  });
  </code></pre>
  
  <p>As you can see, when invoking <code>menu.mmenu()</code> function, the plugin <strong>moves</strong> the <code>nav</code> element to the body, which looks like this:</p>
  
  <pre><code>&lt;body&gt;
    &lt;nav ...&gt; &lt;/nav&gt;
    &lt;div id="react-root"&gt; ... &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>So my question is: Is there a way to do this so React can re-render the component without errors?</p>