title: Render a component from outside ReactJS
body: <p>From <a href="http://facebook.github.io/react/docs/component-api.html">here</a> :</p>
  
  <p><strong>"The only way to get a handle to a React Component instance outside of React is by storing the return value of React.render."</strong></p>
  
  <p>I need to render a React component outside React and the reason for it I'm going to  mention below.</p>
  
  <p>In my node.js, expressJS app, I am using <a href="https://github.com/STRML/react-router-component">'react-router-component'</a> and <a href="https://github.com/andreypopp/react-async">'react-async'</a>. </p>
  
  <p>In app.js -the file which is supposed to be run ,</p>
  
  <pre><code>    var url=require('url');   
      var App=require('./react/App.jsx');
      var app = express();
      app.get('*',function(req,res){
  
  
      //}); SEE EDIT 1 BELOW
  
      var path = url.parse(req.url).pathname;
                  ReactAsync.renderComponentToStringWithAsyncState(App({path:path}),function(err, markup) {
      res.send('&lt;!DOCTYPE html&gt;'+markup);
  
            });
     });
  </code></pre>
  
  <p>In App.jsx,</p>
  
  <pre><code>   PostList = require('./components/PostList.jsx');
     var App = React.createClass({
     render: function() {
          return (
  
             &lt;html&gt;
             &lt;head lang="en"&gt;
             &lt;/head&gt;
          &lt;body&gt;
          &lt;div id="main"&gt;
  
          &lt;Locations path={this.props.path}&gt;
  
            &lt;Location path="/" handler={PostList} /&gt;
            &lt;Location path="/admin" handler={Admin} /&gt;
          &lt;/Locations&gt;
  
  
         &lt;script type="text/javascript" src="/scripts/react/bundle.js"&gt;&lt;/script&gt;
         &lt;script type="text/javascript" src="/scripts/custom.js"&gt;&lt;/script&gt;                 
  
          &lt;/body&gt;
          &lt;/html&gt;
          }); 
  </code></pre>
  
  <p><code>bundle.js</code>  is the browserified file from all the <code>.jsx</code> files.     </p>
  
  <p>In PostList.jsx,</p>
  
  <pre><code>    var PostList = React.createClass({
  
          mixins: [ReactAsync.Mixin],
  
          getInitialStateAsync: function(cb) {
  
             if(typeof this.props.prods==='undefined'){
  
              request.get('http://localhost:8000/api/cats_default', function(response) {
  
                      cb(null, {items_show:response.body});
  
                         });
                                                      }
          },
  
          setTopmostParentState: function(items_show){
  
            this.setState({
               items_show:items_show
                         });
  
           },
  
          render: function() {
  
          return (
  
                &lt;div className="postList" id="postList"&gt;
                **// Things go here** 
                &lt;div className="click_me" &gt;Click me&lt;/div&gt;
                &lt;/div&gt;    
              }
  
      });
  
  
      PostListRender=function(cart_prods){
  
          var renderNow=function(){
  
              //return &lt;PostList  cart_prods={cart_prods}&gt;&lt;/PostList&gt;
  
               React.renderComponent(&lt;PostList  cart_prods={cart_prods}&gt;&lt;/PostList&gt;,document.getElementById('postList') );  
                                   };
  
           return {
             renderNow:renderNow
                  }   
          };
      module.exports=PostList;
  </code></pre>
  
  <p>In custom.js:</p>
  
  <pre><code>$('.click_me').click(function(){
  
  PostListRenderObj=PostListRender(products_cart_found);
  PostListRenderObj.renderNow();
  
  $('odometer').html('price');// price variable is calculated anyhow
  
  });
  </code></pre>
  
  <p>The page shows well.</p>
  
  <p><strong>EDIT 3 Starts</strong></p>
  
  <p>Now I want to render the <code>PostList</code> component on clicking the <code>click_me div</code> .</p>
  
  <p><strong>EDIT 3 Ends</strong></p>
  
  <p>But when I click on the <code>click_me</code> element, the browser shows script busy, console shows </p>
  
  <p><strong><em>ReactJS - ReactMount: Root element has been removed from its original container. New container</em></strong></p>
  
  <p>And the Firebug log limit exceeds.</p>
  
  <p><strong>So why I want to render on click from outside react.js:</strong>
  I have to run the jQuery <a href="http://github.hubspot.com/odometer/">Odomoeter</a> plugin on clicking the <code>click_me div</code>. The plugin was not developed as a node middleware <strong>although</strong> it can be installed the way a middleware is installed and the plugin codebase is saved inside <code>node_modules</code> folder. </p>
  
  <p><strong>Edit2 Starts:</strong></p>
  
  <p>As the plugin is not a node middleware, I cannot <code>require</code> it from inside node. However I can perform the click event (code not shown ) from inside node and  run the following code there as well :</p>
  
  <pre><code>$('odometer').html('price');// price variable is calculated anyhow
  </code></pre>
  
  <p>In this case I include the plugin in the browser with <code>&lt;script /&gt;</code> tag and the browserified <code>bundle.js</code> comes after the plugin script . But the animation is not properly shown. So I take to the client side click event in the <code>custom.js</code>.</p>
  
  <p><strike>If I do not <code>require</code> the plugin to be a middleware from inside node
     and just include it in the page before the browserified JS file and
     perform the click event inside React, then the odometer animation is
     not properly shown.</strike></p>
  
  <p><strong>Edit2 Ends:</strong></p>
  
  <p>So what is the way to render the <code>PostList</code> React component outside React ?</p>
  
  <p><strong>EDIT 1</strong> The <code>});</code> was quite mistakenly placed there</p>