SystemJS / JSPM / Babel / React

<!DOCTYPE html>
<html>
  <head>
	  <script src="//jspm.io/system@0.19.js"></script>
	   <link rel="stylesheet" href="./index.css" />
  	<!--<script src="//unpkg.com/systemjs@0.20"></script>-->
  </head>
  <body>
    <div id="layout"></div>
  	<script type="text/javascript" src="systemjs.config.js"></script>
    <script type="text/javascript">
      // System.import('./index.jsx');
    </script>
  </body>
</html>

/*global System */
'use strict';

console.clear();
/* if you need any specific jspm config place it here */

// https://codepen.io/noncentz/pen/amRwoX

/** 
  * Main entry point 'app'
  *   https://codepen.io/noncentz/pen/ZpqkZY
  * A local import
  *   https://codepen.io/noncentz/pen/GjYWRy
  * NOTE use map: { 'Foo': 'codepen:noncentz/pen/ZpqkZY' } to force paths
*/

var INDEX = './index.jsx';

System.config({
    baseURL: '//npm.jspm.io/',
    // CDN resolves
    paths: { 
        //'github:*': 'https://github.jspm.io/*.js'
        'npm:*': '//npm.jspm.io/*',
        'unpkg:*': '//unpkg.com/*',
        'jsdelivr:*': '//cdn.jsdelivr.net/g/*',
        'jsdelivr-npm:*': '//cdn.jsdelivr.net/npm/*'
    },
    meta: {
        '*.scss': { loader: "sass" }
    },
    map: {
        // The Application path
        'index': INDEX + '?' + Date.now(),
        // SystemJS plugins
        'plugin-babel': 'unpkg:systemjs-plugin-babel@0/plugin-babel.js',
        'systemjs-babel-build': 'unpkg:systemjs-plugin-babel@0/systemjs-babel-browser.js',
        // 'scss': 'npm:scss',
        // Application modules
        'ramda': 'npm:ramda@0',
        'moment': 'unpkg:moment@2',
        'react': 'jsdelivr:react@15/react.js',
        'react-dom': 'jsdelivr:react@15/react-dom.js'
    },
    packages: {
        'https://npm.jspm.io/' : { defaultExtension: 'js' },
        'https://cdn.rawgit.com/*' : { defaultExtension: false },
        'https://unpkg.com/' : { defaultExtension: false },
        './index.scss' : { defaultExtension: false },
        // 'https://cdn.jsdelivr.net/' : { defaultExtension: false },
        // 'https://cdn.jsdelivr.net/g/*/*' : { defaultExtension: 'js' },
        // 'index': {
        //     format: 'esm',
        //     defaultExtension: false,
        //     map: {}
        // }
    },
    transpiler: 'plugin-babel', 
    babelOptions: {
        sourceMaps: false,
        stage0: true,
        react: true
    }
});

// Run the application
System.import('index');

import R from 'ramda';
import moment from 'moment';

console.log(moment);

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


export default class App extends React.Component {
  
  render() {
    return (
      <div>Hello World!</div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById('layout'));

// @import url('//cdn.jsdelivr.net/g/material-design-lite@1(material.css)');
// @import url('//fonts.googleapis.com/icon?family=Material+Icons');

body { min-height: initial; }
h4 { margin: 10px 0 0; }
a { cursor: pointer; }
button.mdl-button { text-transform: none; }

#layout {
    > div {
        display: flex;
    }
}

#photos {
    overflow: hidden;
    > div {
        display: flex;
        flex-wrap: wrap;
        height: 100vh;
        overflow: auto;
        align-content: flex-start;
        width: calc(100% + 16px);
        a {
            $size: 100px;
            display: inline-block;
            background-repeat: no-repeat;
            background-size: cover;
            width: $size;
            height: $size;
        }
    }
}

#sidebar {
    margin: 20px;
    flex-shrink: 0;
    width: 600px;
    display: flex;
    flex-direction: column;
    > section {
        padding: 0 40px;
        &[name=controls] {
            input {
                vertical-align: middle;
            }
        }
    }
}

#map {
    flex-grow: 1;
    min-height: 350px;
    padding-top: 0;
    padding-bottom: 0;
}