UI-Router for React - Hello World!

<!DOCTYPE html>
<html>

  <head>
    <script src="//unpkg.com/show-current-browser-url"></script>
    <script src="//unpkg.com/systemjs@0.19/dist/system.js"></script>
    <script src="systemjs.config.js"></script>
    <script> 
      System.import("helloworld").catch(console.error.bind(console)); 
    </script>
    
    <style>.active { color: red; font-weight: bold }</style>
  </head>

  <body>
    <div id="react-app">
      Loading...
    </div>
  </body>

</html>

import React from 'react';
import ReactDOM from 'react-dom';
import {UIRouter, UIView, UISref, UISrefActive, pushStateLocationPlugin} from 'ui-router-react';

const Hello = () => <h3>hello world</h3>;
const About = () => <h3>Its the UI-Router hello world app!</h3>

var helloState = {
  name: 'hello',
  url: '/hello',
  component: Hello
}

var aboutState = {
  name: 'about',
  url: '/about',
  component: About
}

ReactDOM.render(
  <UIRouter plugins={[pushStateLocationPlugin]} states={[helloState, aboutState]}>
    <div>
      <UISrefActive class="active">
        <UISref to="hello"><a>Hello</a></UISref>
      </UISrefActive>{' '}
      <UISrefActive class="active">
        <UISref to="about"><a>About</a></UISref>
      </UISrefActive>
      
      <UIView/>
    </div>
  </UIRouter>,
  document.getElementById('react-app')
);

System.config({
  map: {
    "react": "//unpkg.com/react@15/dist/react.js",
    "react-dom": "//unpkg.com/react-dom/dist/react-dom.js",
    "ui-router-react": "//unpkg.com/ui-router-react@0.4.0/_bundles/ui-router-react.js",
    "helloworld": "./"
  },
  packages: {
    helloworld: {
      main: './helloworld.js',
      defaultExtension: 'js'
    }
  }
})

var React, ReactDOM;
System.import("react").then(function(r) { React = r; })
System.import("react-dom").then(function(rd) { ReactDOM = rd; })