React (Facebook) Typescript Starter with SystemJS

<!DOCTYPE html>
<html>

  <head>

      <script src="https://unpkg.com/systemjs@0.20.18/dist/system.js"></script>
      
      <script>
    System.import('systemjs.config.js')
      .then(function () { System.import('app') })
      .catch(console.error.bind(console));
    </script>
  </head>

  <body>
    <div id="app"></div>
    
    

  </body>

</html>

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import {ButtonCounter} from './components/ButtonCounter.tsx'

ReactDOM.render(
  <ButtonCounter ref={ component => this.reactComponent = component }/>,
  document.querySelector('#app') as HTMLElement
);

/*
ReactDOM.render((
  <h1>Hello World!</h1>
), document.querySelector('#app'));
*/

import * as React from 'react';

export class ButtonCounter extends React.Component {
  
  constructor(props) {
    super(props)
    this.state = { start: 0, counter: 0 }
  }
  
  render() {
    return (
      <div style={{ border: 'solid green 2px', margin: '2px' }}>
        <h2>Here is in React</h2>
        <div>
          <span>Counter: { this.state.start + this.state.counter }</span>
          <button onClick={ e => this.handleClick(e) }>Click Me!</button>
        </div>
      </div>
    );
  }
  
  
  handleClick() {
    const newCounter = this.state.counter + 1
    this.setState({ counter: newCounter })
  }
  

}

System.config({
  transpiler: 'ts',
  typescriptOptions: {
    tsconfig: true
  },
  // meta: with typescript and exports ts is required to use tsconfig: true
    meta: {
      'typescript': {
        "exports": "ts"
      }
    },
  paths: {
    'npm:':'https://unpkg.com/'
    
  },
  map: {
    // ts is required to be able to use tsconfig: true in typescriptOptions
    'ts':         'npm:plugin-typescript@7.1.0/lib/plugin.js',
    // typescript is required to compile
    'typescript': 'npm:typescript@2.4.2/lib/typescript.js',
    'react': 'npm:react@15.6.1/dist/react.js',
    'react-dom': 'npm:react-dom@15.6.1/dist/react-dom.js',
    
    'app': './src'
  },
  packages: {
    app: {
      main: './main.tsx',
      defaultExtension: false
    }
  }
});

{
    "compilerOptions": {
        "module": "commonjs",
        "moduleResolution": "node",
        "target": "es5",
        "noImplicitAny": false,
        "sourceMap": true,
        "jsx": "react",
        "lib":["es2015", "dom"]
    }
}