Skip to content

Instantly share code, notes, and snippets.

@danharper

danharper/babel-browser.html

Created February 16, 2016 15:29
Show Gist options
  • Save danharper/664837523512d99d16d0 to your computer and use it in GitHub Desktop.
Save danharper/664837523512d99d16d0 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
babel-browser.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div id="main"></div>
<script type="text/babel">
const App = ({ name }) => <h1>Hello, {name}</h1>
ReactDOM.render(<App name="Dan" />, document.getElementById('main'));
</script>
<!-- vendors -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.4.4/babel.min.js"></script>
<script>
Array.prototype.slice
.call(document.querySelectorAll('script[type="text/babel"]'))
.forEach(function(script) {
var el = document.createElement('script');
el.innerHTML = Babel.transform(script.innerText, { presets: ['es2015', 'react'] }).code;
script.parentNode.insertBefore(el, script);
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment