title: Automatic script conversion js to jsx in react app
body: <p>I'm new to REACT so be patient if I confuse terms.</p>
  <p>The following html document starts an react app:</p>
  <p><strong>index.html</strong></p>
  
  <pre><code>&lt;html&gt;
  
    &lt;head&gt;
      &lt;script data-require=&quot;react@*&quot; data-semver=&quot;15.5.0&quot; src=&quot;https://cdnjs.cloudflare.com/ajax/libs/react/15.5.0/react.min.js&quot;&gt;&lt;/script&gt;
      &lt;script data-require=&quot;react@*&quot; data-semver=&quot;15.5.0&quot; src=&quot;https://cdnjs.cloudflare.com/ajax/libs/react/15.5.0/react-dom.min.js&quot;&gt;&lt;/script&gt;
      &lt;script data-require=&quot;redux@*&quot; data-semver=&quot;3.2.1&quot; src=&quot;https://cdnjs.cloudflare.com/ajax/libs/redux/3.2.1/redux.js&quot;&gt;&lt;/script&gt;
      &lt;script data-require=&quot;react-redux@*&quot; data-semver=&quot;4.4.5&quot; src=&quot;https://cdnjs.cloudflare.com/ajax/libs/react-redux/4.4.5/react-redux.js&quot;&gt;&lt;/script&gt;
      &lt;title&gt;Hello world&lt;/title&gt;
    &lt;/head&gt;
  
    &lt;body&gt;
      &lt;h1&gt;Share a sport activity&lt;/h1&gt;
      &lt;div id=&quot;appMount&quot;&gt;&lt;/div&gt;
      &lt;script src=&quot;app.js&quot;&gt;&lt;/script&gt;
    &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  <p>In the same folder as this index.html on the server there is an <code>app.jsx</code> file but no <code>app.js</code> file (see the src attribute of the script tag).</p>
  <p><strong>app.jsx</strong></p>
  <pre><code>class Communicator extends React.Component {
    
    constructor(props) {
      super(props);
      this.state = {message: this.props.message};
    }
  
    resetComm() {
      this.setState({message: ''});
    }
  (...)
  </code></pre>
  <p>Magically, the index.html document sources the app.jsx file anyway. If I look at dev tools what has been delivered for the <code>app.js</code> file the ouput starts with</p>
  <pre><code>'use strict';
  
  var _createClass = function () { function definePr...
  </code></pre>
  <p>which is not the content of the actual app.jsx. So, there is some server-side compiling involved.</p>
  <p>So, I understand that the app.jsx file needs pre-compiling to js. I think (after some investigation) this server-side tranlation is done by babeljs and done on-the-fly.</p>
  <h1>The problem</h1>
  <p>If I run the index.html locally it gives me errors in the console that (of course) app.js is not found.</p>
  <h1>Question</h1>
  <p>How can I make my localhost environment (WAMP) behave like the server (it is the online editor platform plunkr.co). I have npm installed. I want it on-the-fly, even if that's slow and not recommended for production.</p>
  <p>Everything that I find involves at least the setting of a proper script type</p>
  <pre><code>&lt;script type=&quot;text/babel&quot; src=&quot;app.js&quot;&gt;&lt;/script&gt;
  </code></pre>
  <p>but I would like to reproduce the exact same behavior of the server. Basically, I want the index.html (which seems to me a proper standalone app as it works on the server) to run on my local server. I think there is some babeljs setup required which I don't seem to understand.</p>
  <h1>Edit</h1>
  <p>By the way. The example was in a plunker at <a href="http://plnkr.co/" rel="nofollow noreferrer">http://plnkr.co/</a></p>
  <h1>Edit 2</h1>
  <p>If I add babel.min.js to the header and add a .babelrc as suggested by @Eric it doesn't find the app.js still. If I source app.jsx it finds it but sources it as is. Also, the react app doesn't start.</p>