title: React renderComponent replace DOM
body: <p>JSX code:</p>
  
  <pre><code>var App = React.createClass({
    render: function() {
      return &lt;div className="darken"&gt;hello world&lt;/div&gt;
    }
  });
  React.renderComponent(&lt;App/&gt;, document.querySelector('.main'))
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;body&gt;
    &lt;header&gt;welcome&lt;/header&gt;
    &lt;div class="main"&gt;&lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p><code>React.renderComponent</code> will append rendered JSX to <code>&lt;div class="main"&gt;</code>. Output of HTML will be:</p>
  
  <pre><code>&lt;body&gt;
    &lt;header&gt;welcome&lt;/header&gt;
    &lt;div class="main"&gt;
      &lt;div class="darken"&gt;hello world&lt;/div&gt;
    &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>Is it possible <code>React.renderComponent</code> replace <code>&lt;div class="main"&gt;</code>, so what I expect like this:</p>
  
  <pre><code>&lt;body&gt;
    &lt;header&gt;welcome&lt;/header&gt;
    &lt;div class="darken"&gt;hello world&lt;/div&gt;
  &lt;/body&gt;
  </code></pre>