ASP.NET, ES2015, React, SystemJS and JSPM

I’ve started investigating a relative newcomer to the JavaScript library, but one that is making a lot of noise. That library is React. But when I combined this with ASP.NET, I found the build processes confusing. There just isn’t a good recipe out there that allows you to write React/JSX components in ECMAScript 6 and get anything like the debugging you want. You lose the source map and any association with the actual source – not too good for the debugging environment. So how do you handle this?

Let’s rewind a bit.

What is React again? It’s a component technology. It occupies the same space as Polymer in that respect, although with vastly differing implementation details. It handles web-based components. It’s got various advantages and disadvantages over other component technologies, but it does the same thing at the end of the day.

I’m not going to go over yet another React tutorial. Really, there are plenty of them even if you don’t know much web dev, including tutorials on React and ES6.

Why am I learning them? Isn’t Polymer enough? Well, no. Firstly, React and Flux are a framework combination that I wanted to learn. I want to learn it mostly because it isn’t MVC and I wanted to see what a non-MVC framework looked like. Flux is the framework piece and React provides the views. Then there are things like React Native – a method of making mobile applications (only iOS at the moment) out of React elements. It turns out to be extremely useful.

As a module system, I like to use jspm. It’s optimized for ES6. So that was my first stop. Can I use jspm + ES6 + JSX + React all in the same application. Let’s make a basic Hello World React app using an ASP.NET based server in Visual Studio.

Step 1: Set up the Server

There really isn’t anything complicated about the server this time. I’m just adding Microsoft.AspNet.StaticFiles to the project.json:

  "webroot": "wwwroot",
  "version": "1.0.0-beta5",

  "dependencies": {
    "Microsoft.AspNet.Server.IIS": "1.0.0-beta5",
    "Microsoft.AspNet.Server.WebListener": "1.0.0-beta5",
    "Microsoft.AspNet.StaticFiles": "1.0.0-beta5"

This isn’t the whole file, but I only changed one line. The Startup.cs file is similarly easy:

using Microsoft.AspNet.Builder;
using Microsoft.Framework.DependencyInjection;

namespace WebApplication1
    public class Startup
        public void ConfigureServices(IServiceCollection services)

        public void Configure(IApplicationBuilder app)

This gets us a web server that serves up the stuff inside wwwroot.

Step 2: Install Libraries

Next is jspm. Run jspm init like I have shown before. Then run:

jspm install react npm:react-dom jsx

This will install the ReactJS library and the JSX transformer for us. I’m using v0.14.0-beta1 of the ReactJS library. They’ve just made a change where some of the rendering code is separated out into a react-dom library. That library hasn’t made it into the JSPM registry yet, so I have to specify where it is.

Step 3: Write Code

First off, here is my wwwroot/index.html file:

<!DOCTYPE html>
    <meta charset="utf-8">
    <title>Hello World with React</title>
    <div id="root"></div>

    <script src="jspm_packages/system.js"></script>
    <script src="config.js"></script>

Note the !jsx at the end of the System.import statement. That tells SystemJS to run the file through the JSX transformer first. Now, let’s write wwwroot/app.js:

import React from "react";
import ReactDOM from "react-dom";

class HelloWorld extends React.Component {
    render() {
        return (<h1>Hello World</h1>);

ReactDOM.render(<HelloWorld/>, document.getElementById("root"));

Don’t try this on any version of React prior to v0.14.0-beta1. As I mentioned, there are two libraries now – react for creating react components and react-dom for rendering them. You need both.

Step 4: Debug Code

This is a debuggers dream. I can see the code and the DOM side-by-side in the browser:


Yep – that’s the original code. The JSX code has been transformed into JavaScript, but the ES6 code is right there. That means I can alter it “in-situ”, set break points, and generally work with it. If an exception occurs, it points at the original source code.

I wouldn’t want to ship this code. When you look at it, this small HelloWorld project loads 2.8MB and over 230 requests with a delay of 4.4 seconds (on localhost!) – just to get one React component rendered. I’d definitely be using Webpack or Browserify on a production site. But this is great for debugging.

Step 5: Code Control – Separate Components

Let’s say I wanted to give HelloWorld its own file. Code organization is important. It’s realatively simple with SystemJS. Just place the following code in wwwroot/components/HelloWorld.js:

import React from "react";

export default class HelloWorld extends React.Component {
    render() {
        return (<h1>Hello World</h1>);

This is a copy of the original code, made into an ES6 module. Now I can alter the app.js file accordingly:

import React from "react";
import ReactDOM from "react-dom";

import HelloWorld from "./components/HelloWorld.js!jsx";

ReactDOM.render(<HelloWorld/>, document.getElementById("root"));

Final Notes

The Visual Studio editor is not doing me any favors here. I get errors all over the place. However, I can use this same technique in Visual Studio Code (which handles this syntax better), Atom and other places. This, however, is a great step towards debugging React code in a browser.