title: react script not working when sourced through external file
body: <p>I have the following code which works fine. When I comment out the react script at the bottom and add it to the clickme.js file I get unexpected token &lt; on the first div in the return of the render function.</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
    &lt;script crossorigin src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js"&gt;&lt;/script&gt;
    &lt;script crossorigin src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.0/react.min.js"&gt;&lt;/script&gt;
    &lt;script crossorigin src="https://cdn.jsdelivr.net/npm/create-react-class@15.6.2/create-react-class.js"&gt;&lt;/script&gt;
    &lt;script crossorigin src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/15.4.0/react-dom.min.js"&gt;&lt;/script&gt;
  
    &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"&gt;&lt;/script&gt;
    &lt;script src='clickme.js'&gt;&lt;/script&gt;
  
    &lt;title&gt;Click Me&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;div&gt;
       Count:&lt;span id="cnt1"&gt;0&lt;/span&gt;
       &lt;button id='btn1' type='button' style="width:60px"&gt;JS only&lt;/button&gt;
    &lt;/div&gt;
      &lt;br&gt;
    &lt;div&gt;
       Count:&lt;span id="cnt2"&gt;0&lt;/span&gt;
       &lt;button id='btn2' type='button' style="width:60px"&gt;Jquery&lt;/button&gt;
    &lt;/div&gt;
     &lt;br&gt;
    &lt;div id='react-example'&gt; &lt;/div&gt;
  
  
   &lt;script type='text/jsx'&gt;
         var btnCSS = {
         width: '60px',
         textAlign:'center',
         padding:0,
         border:0
      };
      class Counter extends React.Component {
         constructor(props) {
            super(props);
            this.state = { count: 0};
         }
  
         incrementCount() {
            this.setState( {count: this.state.count + 1});
         }
         render() {
            return (
               &lt;div&gt; Count:{this.state.count}
                  &lt;button type="button" style={btnCSS}
                     onClick={ this.incrementCount.bind(this) }&gt;React&lt;/button&gt;
               &lt;/div&gt;
            );
         }
      };
  
      ReactDOM.render(
                  &lt;Counter /&gt;,
                  document.getElementById('react-example')
       ) 
   &lt;/script&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>and here is the clickme.js file:</p>
  
  <pre><code>document.addEventListener("DOMContentLoaded", function(event) {
  
  var counter = Number(document.getElementById("cnt1").innerHTML);
  
  document.getElementById("btn1").addEventListener("click", function(){
     counter = counter + 1;
     document.getElementById("cnt1").innerHTML=counter;
  });
  });
  
  $(document).ready(function(){
  
  var counter= Number($("#cnt2").html());
  
  $("#btn2").click(function() {
      counter = counter + 1;
      $("#cnt2").html(counter);
   });
  </code></pre>
  
  <p>});</p>
  
  <pre><code>document.addEventListener("DOMContentLoaded", function(event) {
  var btnCSS = {
  width: '60px',
  textAlign:'center',
  padding:0,
  border:0
  };
  class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0};
  }
  
  incrementCount() {
    this.setState( {count: this.state.count + 1});
  }
  render() {
      return (
       &lt;div&gt; Count:{this.state.count}
          &lt;button type="button" style={btnCSS}
             onClick={ this.incrementCount.bind(this) }&gt;React&lt;/button&gt;
       &lt;/div&gt;
    );
  </code></pre>
  
  <p>}
     };</p>
  
  <pre><code>ReactDOM.render(
  &lt;Counter /&gt;,
  document.getElementById('react-example')
  )
  });
  </code></pre>