React Coming to Visual Studio! But I Want It Now!

Introduction

This tip will take you through the steps required to start developing with React and JSX syntax using Visual Studio 2013.

Background

Whilst thinking about the growing pains our project was suffering, struggling with the problems of a large JS/HTML application in a team environment, I went looking for a solution to our problems.

The application had grown so big and complex that, some areas, no one wanted to touch because the side effects could be difficult to predict.

I therefore went looking for the best/newest/most modern approach to developing large scale JS applications and came across React.js.

And in a word, "Wow".

It was the closest thing to a true modular/component based approach to JS programming I'd come across with Syntax not too unusual to make migration for the team challenging.  A nice cross between Razor, JS and CSS.

But the problem with React is its JavaScript and XML syntax (JSX).

It has HTML code written unescaped and inline with the JavaScript.

var HelloMessage = React.createClass({
  render: function() {
    return <div>Hello {this.props.name}</div>;
  }
});

React.render(>HelloMessage name="John" /<, mountNode);

Whilst React can provide HTTP Handlers and run-time transformers for JSX to JS conversion, I wanted to have the file pre-compiled and avoid the overhead of a run-time transformation. The end result for me is going to be cordova project so I want the best performance possible.

I was therefore excited to see it was being integrated into VS2015 but 2 hours later I was gutted to find out it wouldn't be until the RTM release.

So off I went on my journey to looking for an immediate solution which didn't take my team out from their Visual Studio/TFS environment.

Prerequisites

To follow these instructions, you need to have the following installed:

• Visual Studio 2013
• Update 4 for Visual Studio 2013
• NPM

Installing the Compiler

The first thing needed is a JSX compiler.  The React team have provided this for you as a command line tool.  Install the compiler with the following NPM command.

npm install -g react-tools

This globally installs the compiler which is normally in the following location:

c:\users\%username%\AppData\Roaming\npm

Creating the Web Project

Next, you need to create a project within which to do your work. I'd suggest a MVC or WebForms rather than a Website as you need a project type with a project file so you can customise the MSBuild process.

Once you've created your project, you need to open the project file in a text editor and scroll to the bottom.  At the bottom, you'll find two Target elements in a comment block.  Remove the comments and replace the BeforeBuild element with:

<Target Name="BeforeBuild">
    <Exec Command="C:\Users\%username%\AppData\Roaming\npm\jsx -x jsx $(ProjectDir). $(ProjectDir)." />
</Target>

This instructs the Microsoft build process to pass all JSX files through the compiler and output their JS result to the same location.  This is a recursive process which checks all sub folders although you can modify the output directory to put all output files in a Build folder if preferred.

I've also got my project setup to Bundle all the resulting JS files so each JSX project is then outputted as a single JS file.  If you want to use Bundle, it's important your project automatically adds the output JS files.  Add the following ItemGroup to your project file to achieve this.

<ItemGroup>
    <Content Include="*.js" />
</ItemGroup>

I haven't found a way of automating the DependantUpon mechanism to automatically show the JS file a child to the JSX file in the solution explorer.  But you can install an extension called File Nesting via NuGet which makes creating the association a simple, albeit manual task.

Improving the Editor

Visual Studio 2013 has absolutely no support for JSX syntax.  But you can add some syntax highlighting by adding a custom file extension to the list of text editors.  To do this, go:

Tools -> Options -> Text Editor -> File Extension

Enter JSX in the extension box, select the JavaScript Editor and click Add.

Whilst Visual Studio 2015 RC doesn't yet have a JSX compiler, it does have a beta JSX editor.

Your First JSX File

You are now ready to add your first JSX file.  And where better to start than the React tutorial found here:

• React - Tutorial

Now I'm Onto TypeScript

The next step is to look at TypeScript integration.  

I'm getting close.  I've disabled the default TypeScript compile in the MSBuild file and replaced it with a pre-build action using:

• https://github.com/fdecampredon/jsx-typescript

I had to use the following BAT file to get it process the project recursively:

dir *.ts /b /s > ts-files.txt
jsx-tsc @ts-files.txt --module commonJS --outDir ../Upay2/scripts/imports/
del ts-files.txt

But all the examples I've found so far are trying to emulate the far too soon ES6 syntax rather than just defining Reacts ES5 syntax and they've also built a dependency of loading React via Require rather than allowing you to simply reference a d.ts file. Seems like they're trying to be too clever.

So my next task is to start building up my own react definition file as I'm sure 90% of its use will be covered with a few simple interfaces.