title: JQuery Mobile Components in React
body: <p>"JQuery Mobile Components in React"</p>
  
  <p>I'm quite new to this concept an still need to figure things out. I built an app for mobile purposes and decided to wrap it in React components. My Code:</p>
  
  <p>index.html</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  
  &lt;html lang="de" xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head&gt;
      &lt;meta charset="utf-8" /&gt;
      &lt;title&gt;shounds&lt;/title&gt;
  
      &lt;link rel="stylesheet" type="text/css" href="css/jquery.mobile.squareui.css" /&gt;
      &lt;script src="http://code.jquery.com/jquery-1.11.1.min.js"&gt;&lt;/script&gt;
      &lt;script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"&gt;&lt;/script&gt;
  
      &lt;script src="./ext/react.js"&gt;&lt;/script&gt;
      &lt;script src="./ext/jsx-transform.js"&gt;&lt;/script&gt;
      &lt;script src="//fb.me/react-with-addons-0.11.0.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body data-theme="e"&gt;
      &lt;div id="container" &gt;
          &lt;!--&lt;div data-role="page" id="login"&gt;&lt;div data-role="header" id="loginHeader"&gt;&lt;/div&gt;&lt;/div&gt;--&gt;
      &lt;/div&gt;
      &lt;script type="text/jsx" src="./comp/main.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>main.js //react components</p>
  
  <pre><code>var App = React.createClass({
      render: function () {
          return Page({id: 'login'});
      }
  })
  
  var Page = React.createClass({
      constants: { dataTheme: 'e' },
      render: function () {
          return React.DOM.div({ id: this.props.id + 'Page', 'data-role': 'page', 'data-theme': this.constants.dataTheme },
              Header({ dataTheme: this.constants.dataTheme, id: this.props.id }))
      }
  })
  
  var Header = React.createClass({
      render: function(){
          return React.DOM.div({'data-role': 'header', 'data-theme': this.props.dataTheme, id: this.props.id+'Header' })
      }
  })
  
  
  // Render application.
      React.render(App(null), document.getElementById('container'))
  </code></pre>
  
  <p>The DOM gets created in the container div as expected.</p>
  
  <p>Heres my Problem:</p>
  
  <p>JQM probably isnt aware of the virtual DOM getting created by React and creates an initial page by itsself outside the container div. 
  Even though the DOM is created correctly it wont be displayed as JQM page with Header.</p>
  
  <p>Anyone gone through the same stuff?</p>
  
  <p>Thanks in advance.</p>
  
  <p>EDIT: if it helps in any way -> this is what is created during runtime</p>
  
  <p></p>
  
  <pre><code>    &lt;head&gt;&lt;/head&gt;
      &lt;body class="ui-mobile-viewport ui-overlay-a" data-theme="e"&gt;
          &lt;div class="ui-page ui-page-theme-a ui-page-active" data-role="page" data-url="/E:/dev/workspace/visual/shounds/index.html" tabindex="0" style="min-height: 483px;"&gt;
              &lt;div id="container"&gt;
                  &lt;div id="loginPage" data-reactid=".0" data-theme="e" data-role="page"&gt;
                      &lt;div id="loginHeader" data-reactid=".0.0" data-theme="e" data-role="header"&gt;&lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;script src="./comp/main.js" type="text/jsx"&gt;&lt;/script&gt;
          &lt;/div&gt;
          &lt;div class="ui-loader ui-corner-all ui-body-a ui-loader-default"&gt;&lt;/div&gt;
      &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>