title: Is React and Visual Studio 2013 a good combination?
body: <p>I'm writing a brand new app from scratch, which is always a great excuse to check out some new trendy piece of technology.  My choice for this project is ReactJS.</p>
  
  <p>We're a Microsoft shop, so our backend is all C# and .NET, and we use Visual Studio 2013.  The front-end can be whatever I choose.</p>
  
  <p>The first thing I did was read the <a href="https://facebook.github.io/react/docs/tutorial.html" rel="nofollow">ReactJS tutorial</a>, which seems to be straight forward.  However, the first thing that stuck out at me was that the JavaScript in the examples of not actually valid JavaScript.  Upon further investigation, it seems this is based on some sort of templating technology called Babel, which is a JavaScript compiler (or transformer, more accurately) written itself in JavaScript.  This can be run in the web browser, or on the server as some sort of build step.  Obviously, what would come out would be valid JavaScript.  This appears to cause all sorts of issues within Visual Studio 2013.</p>
  
  <p>Wanting to follow the tutorial as closely as I could, I figured I'd skip all the server side stuff and just run Babel on the client.  I first looked for a NuGet package for these libraries, but couldn't find any.  The Babel website <a href="https://babeljs.io/docs/setup/#dotnet" rel="nofollow">says to use the ReactJS.Net package</a>.  This package seems to be geared towards server side compilation of JSX files, and contains no .js files that can be used on the client side.  I decided to experiment with this route, but when I create a .JSX file, everything is just white text with no sort of syntax highlighting, code completion, Intellisense, etc.  Visual Studio goes back to the dark ages.  I can't get any work done this way.</p>
  
  <p>Though it's embarassing to say, I <em>still</em> have no idea how to actually download Babel.  Everything on their site points to some sort of package manager.  I ended up just manually linking to <code>https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js</code> so I could get on with things.</p>
  
  <p>Next, I tried to link to a script called <code>example.js</code> so I could write some code.  In MVC/Razor, you would use something like <code>@Scripts.Render("~/bundles/example")</code> to include your <code>&lt;script&gt;</code> tag, however there doesn't seem to be a mechanism to set the <code>type</code> attribute to <code>text/babel</code>.  So, now I can't take advantage of the cool script bundling features of the framework either.</p>
  
  <p>Screw it, I'll just embed script right in the page:</p>
  
  <pre><code>&lt;script type="text/babel"&gt;
    // I'll just write my code here
  &lt;/script&gt;
  </code></pre>
  
  <p>However, now all of Visual Studio's syntax highlighting, document formatting, and Intellisense features go totally haywire.  Indent levels get all messed up, almost nothing is usable.</p>
  
  <p><strong>Ok this post is too long what's your question?</strong></p>
  
  <p>So my question is if people are using Visual Studio with React, and if they've found a way to set up the environment and IDE in a way where they can still take advantage of the power of Visual Studio, and use React in a productive manner.  If so, I'd love to hear a description of your setup.  Are you using any sort of Visual Studio plugin?  Are you running Babel on the server or client?  Maybe people are just not using Babel and writing directly in whatever Javascript Babel would eventually produce anyway?  Thanks for any info or advice!</p>