title: Single React Component rendering with Babel Standalone with only index.html and Component
body: <p>Noob with React here. I am playing around with React. I have a simple component to render inside my component.js. It is included in my index.html file. I included the scripts for <code>React</code>, <code>ReactDOM</code>, and <code>babel</code> in the <strong>head</strong>. I just want to see that one div render properly. I am not using Node yet, just a exercise with React and Babel (using <a href="http://[babel-standalone][1]" rel="noreferrer">babel-standalone</a>). I am running the file with a simple http-server. I am getting an error with the React Chrome extension: <code>Waiting for roots to load...to reload inspector click here</code>.</p>
  
  <p><strong>index.html</strong></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
    &lt;head&gt;
      &lt;!-- React --&gt;
      &lt;script src="https://unpkg.com/react@15/dist/react.min.js"&gt;&lt;/script&gt;
      &lt;!-- React DOM --&gt;
      &lt;script src="https://unpkg.com/react-dom@15/dist/react-dom.min.js"&gt;&lt;/script&gt;
      &lt;!-- babel core--&gt;
      &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.4.4/babel.min.js"&gt;&lt;/script&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;div id="machine-box"&gt;&lt;/div&gt;
      &lt;script type="text/babel" src="components.js"&gt;&lt;/script&gt;
    &lt;/body&gt;
  &lt;/html&gt;`
  </code></pre>
  
  <p><strong>components.js</strong></p>
  
  <pre><code>class MachineBox extends React.Component {
   render(){
     return ( &lt;div&gt;Hello From React &lt;/div&gt; );
   }
  }
  
  let target =  document.getElementById('machine-box');
  
  ReactDOM.render(
   &lt;MachineBox /&gt;, target
  )
  </code></pre>