Skip to content

Instantly share code, notes, and snippets.

@aluanhaddad

aluanhaddad/index.html

Last active December 4, 2017 21:20
Show Gist options
  • Save aluanhaddad/937b9d05692fe93c8c3ee2e59b556349 to your computer and use it in GitHub Desktop.
Save aluanhaddad/937b9d05692fe93c8c3ee2e59b556349 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/[email protected]/dist/system.src.js"></script>
<script>
SystemJS.config({
transpiler: 'plugin-babel',
babelOptions:{presets:['babel-preset-react']},
map: {
'react': 'https://unpkg.com/[email protected]/umd/react.development.js',
'react-dom': 'https://unpkg.com/[email protected]/umd/react-dom.development.js',
'plugin-babel': 'https://unpkg.com/[email protected]',
'babel-preset-react': "npm:[email protected]"
},
packageConfigPaths:[
'https://unpkg.com/[email protected]/package.json',
'https://unpkg.com/[email protected]/package.json',
'https://unpkg.com/[email protected]/package.json',
'https://unpkg.com/[email protected]',
"https://unpkg.com/*/package.json"
],
packages: {
'.': {
'main': 'script.js',
defaultExtension: 'js',
'meta': {
'*.js': {
'loader': 'plugin-babel',
}
}
},
"npm:[email protected]": {
"map": {
"babel-plugin-transform-react-jsx-self": "npm:[email protected]",
"babel-preset-flow": "npm:[email protected]",
"babel-plugin-transform-react-jsx-source": "npm:[email protected]",
"babel-plugin-transform-react-jsx": "npm:[email protected]",
"babel-plugin-transform-react-display-name": "npm:[email protected]",
"babel-plugin-syntax-jsx": "npm:[email protected]"
}
},
paths:{
"npm:": "https://unpkg.com/"
}
}
});
</script>
<script>
SystemJS.import('script.js')
.then(({default: app}) => app()).then(console.info)
.catch(reason => console.error(reason));
</script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Gist</title>
</head>
<body>
<div id="app"></div>
</body>
</html>
Raw
script.js
import React from 'react';
import ReactDOM from 'react-dom'
export default () => {
console.log('Hello World!');
ReactDOM.render(
<div>Hello there</div>,
document.getElementById('app')
);
};
Raw
styles.css
/* todo: add styles */
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment