kenichi-odo/index.html

## index.html
<!DOCTYPE html>
<html>
  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.2.0/require.min.js"></script>

    <script type="text/babel">
      // JSXをtext/babel内に書く
      define('main', ['react', 'react_dom'], function(React, ReactDOM) {
        var Main = function() {};
        Main.prototype.load = function() {
          ReactDOM.render(<span>Hello World</span>, document.getElementById('container'));
        };
        return Main;
      });
    </script>

    <script>
      requirejs.config({
        paths: {
          babel: 'https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.7.7/babel.min',
          react: 'https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min',
          react_dom: 'https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min',
        }
      });

      // まずbabelをロードする
      require(['babel'], function(Babel) {

        // text/babel部分を取得(複数あればその分だけ)
        var babel_scripts = document.querySelectorAll('script[type="text/babel"]');
        Array.prototype.forEach.call(babel_scripts, function(script) {

          // JSXを変換してロードする
          new Function(Babel.transform(script.textContent, {
            presets: ['es2015', 'react'],
            filename: 'embedded',
            sourceMaps: 'inline'
          }).code)();
        });

        // Babelでロードしたdefineの呼び出し
        require(['main'], function(Main) {

          // ロードする
          var main = new Main();
          main.load();
        });
      });
    </script>
  </head>

  <body>
    <div id="container"></div>
  </body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.2.0/require.min.js"></script>

	<script type="text/babel">
	// JSXをtext/babel内に書く
	define('main', ['react', 'react_dom'], function(React, ReactDOM) {
	var Main = function() {};
	Main.prototype.load = function() {
	ReactDOM.render(<span>Hello World</span>, document.getElementById('container'));
	};
	return Main;
	});
	</script>

	<script>
	requirejs.config({
	paths: {
	babel: 'https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.7.7/babel.min',
	react: 'https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min',
	react_dom: 'https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min',
	}
	});

	// まずbabelをロードする
	require(['babel'], function(Babel) {

	// text/babel部分を取得(複数あればその分だけ)
	var babel_scripts = document.querySelectorAll('script[type="text/babel"]');
	Array.prototype.forEach.call(babel_scripts, function(script) {

	// JSXを変換してロードする
	new Function(Babel.transform(script.textContent, {
	presets: ['es2015', 'react'],
	filename: 'embedded',
	sourceMaps: 'inline'
	}).code)();
	});

	// Babelでロードしたdefineの呼び出し
	require(['main'], function(Main) {

	// ロードする
	var main = new Main();
	main.load();
	});
	});
	</script>
	</head>

	<body>
	<div id="container"></div>
	</body>
	</html>