Skip to content

Instantly share code, notes, and snippets.

@aluanhaddad

aluanhaddad/index.html

Last active December 4, 2017 21:20
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • 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/systemjs@0.20.19/dist/system.src.js"></script>
<script>
SystemJS.config({
transpiler: 'plugin-babel',
babelOptions:{presets:['babel-preset-react']},
map: {
'react': 'https://unpkg.com/react@16.2.0/umd/react.development.js',
'react-dom': 'https://unpkg.com/react-dom@16.2.0/umd/react-dom.development.js',
'plugin-babel': 'https://unpkg.com/systemjs-plugin-babel@0.0.25',
'babel-preset-react': "npm:babel-preset-react@6.24.1"
},
packageConfigPaths:[
'https://unpkg.com/systemjs-plugin-babel@0.0.25/package.json',
'https://unpkg.com/react-dom@16.2.0/package.json',
'https://unpkg.com/react@16.2.0/package.json',
'https://unpkg.com/babel-preset-react@6.24.1.json',
"https://unpkg.com/*/package.json"
],
packages: {
'.': {
'main': 'script.js',
defaultExtension: 'js',
'meta': {
'*.js': {
'loader': 'plugin-babel',
}
}
},
"npm:babel-preset-react@6.24.1": {
"map": {
"babel-plugin-transform-react-jsx-self": "npm:babel-plugin-transform-react-jsx-self@6.22.0",
"babel-preset-flow": "npm:babel-preset-flow@6.23.0",
"babel-plugin-transform-react-jsx-source": "npm:babel-plugin-transform-react-jsx-source@6.22.0",
"babel-plugin-transform-react-jsx": "npm:babel-plugin-transform-react-jsx@6.24.1",
"babel-plugin-transform-react-display-name": "npm:babel-plugin-transform-react-display-name@6.25.0",
"babel-plugin-syntax-jsx": "npm:babel-plugin-syntax-jsx@6.18.0"
}
},
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