title: ReactJs.Net, Gulp, Babel, Browserify MVC
body: <p>My brain hurts, I have just read loads of different tutorials and they seem to differ (or change quite rapidly) in their ideas of how to make this work.</p>
  
  <p>Background: </p>
  
  <p>I have started learning ReactJs.NET, and I would like to start writing ES2015 and using the <code>Require('SomeComponent')</code> statement to import modules (babel doesn't import/export yet).</p>
  
  <p>I had this working fine for the ES2015 part, by using a <code>BabelBundle</code> that comes with React.NET</p>
  
  <pre><code>bundles.Add(New BabelBundle("~/bundles/main").Include(
                  "~/Scripts/test.jsx"
              ))
  </code></pre>
  
  <p>I wanted to use some extra components for a project (a multiselect), and it seemed the simplest way to get this and use it was to install node + npm, and then use <code>require</code> to import that component.</p>
  
  <p>That led me onto replacing the MVC bundling with gulp, and using a gulpfile to transform/combine my files into a single useable js file (which works better than .NET bundling if I am pre-rendering the first view on the server side anyway).</p>
  
  <p>What I need to do in my gulpfile.js, but I am not 100% sure in which order I need to do it, or how exactly I should describe this in my gulpfile:</p>
  
  <ul>
  <li>Start with a .jsx file, and then: (not quite sure in which order) </li>
  <li>Parse it with react (fos jsx) </li>
  <li>Parse it with babel (for ES2015 syntax)</li>
  <li>Parse with browserify for (<code>require</code> tags)</li>
  </ul>
  
  <p>Am I even going down the right path? there seems to be so many options and I am getting quite confused by them all and what seems to be a rapidly changing landscape..</p>