title: React JS and jQuery Mobile Rendering
body: <p>I am trying to render a list of jQuery Mobile style but using React JS. Unfortunately React JS is not rendering the style of jQuery Mobile components. And hence the buttons appear as plain HTML buttons where as if I put the HTML directly inside the DOM it renders it in jQuery Mobile Style.</p>
  
  <p>Below is my code and screenshot for comparison:</p>
  
  <pre><code>&lt;!DOCTYPE HTML&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;meta charset='UTF-8'&gt;
  &lt;link rel="stylesheet" href="../jqueryMobile/jquery.mobile.css"&gt;
  &lt;script src='../libs/react.js'&gt;&lt;/script&gt;
  &lt;script src='../libs/JSXTransformer.js'&gt;&lt;/script&gt;
  &lt;script src="../jquery/jquery.js"&gt;&lt;/script&gt;
  &lt;script src="../jqueryMobile/jquery.mobile.js"&gt;&lt;/script&gt;
  &lt;script src="scripts/shoppingItems.js"&gt;&lt;/script&gt;
  
      &lt;!--&lt;li&gt;&lt;a href="#"&gt;
                      &lt;img src="images/book.png"&gt;
                      &lt;h2&gt;Broken Bells&lt;/h2&gt;
                      &lt;p&gt;Broken Bells&lt;/p&gt;
                      &lt;p style="font-weight:bold"&gt;Books&lt;/p&gt;
                      &lt;/a&gt;
                  &lt;/li&gt; --&gt;
  &lt;script type="text/jsx"&gt;
      /** @jsx React.DOM */
  
  
      var SearchProductsBar = React.createClass({
          handleChange: function()
          {
              this.props.onUserInput(
                  this.refs.filterTextInput.getDOMNode().value
              );
          },
          render: function()
          {
              return(
                  &lt;input type="text" placeholder="Search Products" style={{width:'100%'}} ref="filterTextInput" onChange={this.handleChange}/&gt;
              );
          }
      });
  
      var mainDivStyle = {width:'100%',color:'blue',backgroundColor:'#D5D1FF'};
  
      var divStyle1={
          width:'30%',
          float:'left',
          display:'inline',
          paddingTop:'30px',
          paddingLeft:'2%'
      };
  
      var divStyle2={
          width:'65%',
          float:'left',
          display:'inline',
          paddingLeft:'2%'
      };
  
      var imageStyle={
          width:'100%',
          height:'80px',
          maxWidth:'80px'
      };
  
      var ListItem = React.createClass({
          render: function()
          {
              var productItemObject = this.props.itemDetails;
  
              return(
  
                      &lt;div style={mainDivStyle}&gt;
                          &lt;a href='#myShoppingCartHomePage2' style={{textDecoration:'none'}}&gt;
                              &lt;div style={divStyle1}&gt;
                                  &lt;img src={productItemObject.image} style={imageStyle}/&gt;
                              &lt;/div&gt;
                              &lt;div style={divStyle2}&gt;
                                  &lt;h4&gt;{productItemObject.name}&lt;/h4&gt;
                                  &lt;h5&gt;{productItemObject.price} INR&lt;/h5&gt;
                                  &lt;p style={{fontWeight:'bold'}}&gt;{productItemObject.category}&lt;/p&gt;
                              &lt;/div&gt;
                          &lt;/a&gt;
                          &lt;input type="button" value="Add To Cart" /&gt;
                          &lt;p&gt;_________&lt;/p&gt;
                      &lt;/div&gt;
              );
          }
      });
  
      var ProductsTable = React.createClass({
          render:function()
          {
              var productList = this.props.productList;
              var rows = [];
  
              productList.forEach(function(productItem){
                  if(productItem.name.indexOf(this.props.filterText) === -1)
                  {
                      return;
                  }
                  rows.push(&lt;ListItem itemDetails={productItem}/&gt;);
              }.bind(this));
  
              return(
                  &lt;span&gt;
                      &lt;div id="myItemListHeader" style={{fontWeight:'bold'}}&gt;Products:&lt;/div&gt;
                      {rows}
                  &lt;/span&gt;
              );
          }
      });
  
      var ShoppingApp = React.createClass({
          handleUserInput: function(fiterText)
          {
              this.setState({
                  filterText: fiterText
              });
          },
          getInitialState: function()
          {
              return{
                  filterText: ''
              };
          },
          render: function()
          {
              return(       
                  &lt;span&gt;
                      &lt;SearchProductsBar filterText={this.state.filterText} onUserInput={this.handleUserInput}/&gt;
                      &lt;ProductsTable filterText={this.state.filterText} productList={this.props.products}/&gt;
                  &lt;/span&gt;
              );
          }
      });
  
      React.renderComponent(&lt;ShoppingApp products={shoppingItemsObject.items} /&gt;, document.getElementById('myItemList'));
  &lt;/script&gt;
  &lt;title&gt;Shopping Cart App&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div id="myShoppingCartHomePage" data-role="page"&gt;
          &lt;div data-role="header" style="text-align:center;"&gt;MyShopping App&lt;/div&gt;
          &lt;div data-role="content"&gt;
              &lt;input type="button" value="Add To Cart" /&gt;
              &lt;div id="myItemList"&gt;
  
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div data-role="footer" style="text-align:center;"&gt;Shopping Cart&lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div id="myShoppingCartHomePage2" data-role="page"&gt;
          This it the second page
      &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><img src="https://i.stack.imgur.com/hRNsZ.png" alt="enter image description here"></p>
  
  <p>Is there a way to render jQuery Mobile Components using React JS?</p>
  
  <p>Thanks,
  Ankit Tanna</p>