Skip to content

Instantly share code, notes, and snippets.

@dearfrankg

dearfrankg/esnextbin.md

Last active March 24, 2017 09:45
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save dearfrankg/5328337c5aabba8ee079de055c669870 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save dearfrankg/5328337c5aabba8ee079de055c669870 to your computer and use it in GitHub Desktop.
Download ZIP
esnextbin sketch
Raw
index.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>ESNext Bin Sketch</title>
<!-- CSS Reset -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.3/normalize.css">
<!-- Milligram CSS minified -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/milligram/1.1.0/milligram.min.css">
<style>
h1 {
text-align: center;
margin-top: 20px;
}
</style>
<!-- put additional styles and scripts here -->
</head>
<body>
<div id="app" ></div>
<!-- put markup and other contents here -->
</body>
</html>
Raw
index.js
// write ES2015 code and import modules from npm
// and then press "Execute" to run your program
import React from 'react'
import ReactDOM from 'react-dom';
const code = '' +
`ReactDOM.render(
<App />,
document.getElementById('app')
)`
const App = () =>
<div className='container'>
<h1>Welcome</h1>
<div>&nbsp;</div>
<h2>Heading</h2>
<h3>Heading</h3>
<h4>Heading</h4>
<h5>Heading</h5>
<h6>Heading</h6>
<div>&nbsp;</div>
<blockquote>
<p><em>Yeah!! Milligram is amazing.</em></p>
</blockquote>
<a className="button" href="#">Default Button</a>
{' '}
<button className="button button-outline">Outlined Button</button>
{' '}
<input className="button button-clear" type="submit" value="Clear Button" />
<div>&nbsp;</div>
<ul>
<li>Unordered list item 1</li>
<li>Unordered list item 2</li>
</ul>
<ol>
<li>Ordered list item 1</li>
<li>Ordered list item 2</li>
</ol>
<dl>
<dt>Description list item 1</dt>
<dd>Description list item 1.1</dd>
</dl>
<div>&nbsp;</div>
<form>
<fieldset>
<label htmlFor="nameField">Name</label>
<input type="text" placeholder="CJ Patoilo" id="nameField" />
<label htmlFor="ageRangeField">Age Range</label>
<select id="ageRangeField">
<option value="0-13">0-13</option>
<option value="14-17">14-17</option>
<option value="18-23">18-23</option>
<option value="24+">24+</option>
</select>
<label htmlFor="commentField">Comment</label>
<textarea placeholder="Hi CJ …" id="commentField"></textarea>
<div className="float-right">
<input type="checkbox" id="confirmField" />
<label className="label-inline" htmlFor="confirmField">Send a copy to yourself</label>
</div>
<input className="button-primary" type="submit" value="Send" />
</fieldset>
</form>
<div>&nbsp;</div>
<table>
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>Height</th>
<th>Location</th>
</tr>
</thead>
<tbody>
<tr>
<td>Stephen Curry</td>
<td>27</td>
<td>1,91</td>
<td>Akron, OH</td>
</tr>
<tr>
<td>Klay Thompson</td>
<td>25</td>
<td>2,01</td>
<td>Los Angeles, CA</td>
</tr>
</tbody>
</table>
<div>&nbsp;</div>
<div className="container">
<div className="row">
<div className="column">.column</div>
<div className="column">.column</div>
<div className="column">.column</div>
<div className="column">.column</div>
</div>
<div className="row">
<div className="column">.column</div>
<div className="column column-50 column-offset-25">.column column-50 column-offset-25</div>
</div>
</div>
<div>&nbsp;</div>
<pre><code>
{ code }
</code></pre>
<div style={{height: 300}}>&nbsp;</div>
</div>
ReactDOM.render(
<App />,
document.getElementById('app')
)
Raw
package.json
{
"name": "esnextbin-sketch",
"version": "0.0.0",
"dependencies": {
"react": "15.4.2",
"react-dom": "15.4.2"
}
}
Raw
transpiled.js
'use strict';
var _react = require('react');
var _react2 = _interopRequireDefault(_react);
var _reactDom = require('react-dom');
var _reactDom2 = _interopRequireDefault(_reactDom);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
// write ES2015 code and import modules from npm
// and then press "Execute" to run your program
var code = '' + 'ReactDOM.render(\n <App />, \n document.getElementById(\'app\')\n)';
var App = function App() {
return _react2.default.createElement(
'div',
{ className: 'container' },
_react2.default.createElement(
'h1',
null,
'Welcome'
),
_react2.default.createElement(
'div',
null,
'\xA0'
),
_react2.default.createElement(
'h2',
null,
'Heading'
),
_react2.default.createElement(
'h3',
null,
'Heading'
),
_react2.default.createElement(
'h4',
null,
'Heading'
),
_react2.default.createElement(
'h5',
null,
'Heading'
),
_react2.default.createElement(
'h6',
null,
'Heading'
),
_react2.default.createElement(
'div',
null,
'\xA0'
),
_react2.default.createElement(
'blockquote',
null,
_react2.default.createElement(
'p',
null,
_react2.default.createElement(
'em',
null,
'Yeah!! Milligram is amazing.'
)
)
),
_react2.default.createElement(
'a',
{ className: 'button', href: '#' },
'Default Button'
),
' ',
_react2.default.createElement(
'button',
{ className: 'button button-outline' },
'Outlined Button'
),
' ',
_react2.default.createElement('input', { className: 'button button-clear', type: 'submit', value: 'Clear Button' }),
_react2.default.createElement(
'div',
null,
'\xA0'
),
_react2.default.createElement(
'ul',
null,
_react2.default.createElement(
'li',
null,
'Unordered list item 1'
),
_react2.default.createElement(
'li',
null,
'Unordered list item 2'
)
),
_react2.default.createElement(
'ol',
null,
_react2.default.createElement(
'li',
null,
'Ordered list item 1'
),
_react2.default.createElement(
'li',
null,
'Ordered list item 2'
)
),
_react2.default.createElement(
'dl',
null,
_react2.default.createElement(
'dt',
null,
'Description list item 1'
),
_react2.default.createElement(
'dd',
null,
'Description list item 1.1'
)
),
_react2.default.createElement(
'div',
null,
'\xA0'
),
_react2.default.createElement(
'form',
null,
_react2.default.createElement(
'fieldset',
null,
_react2.default.createElement(
'label',
{ htmlFor: 'nameField' },
'Name'
),
_react2.default.createElement('input', { type: 'text', placeholder: 'CJ Patoilo', id: 'nameField' }),
_react2.default.createElement(
'label',
{ htmlFor: 'ageRangeField' },
'Age Range'
),
_react2.default.createElement(
'select',
{ id: 'ageRangeField' },
_react2.default.createElement(
'option',
{ value: '0-13' },
'0-13'
),
_react2.default.createElement(
'option',
{ value: '14-17' },
'14-17'
),
_react2.default.createElement(
'option',
{ value: '18-23' },
'18-23'
),
_react2.default.createElement(
'option',
{ value: '24+' },
'24+'
)
),
_react2.default.createElement(
'label',
{ htmlFor: 'commentField' },
'Comment'
),
_react2.default.createElement('textarea', { placeholder: 'Hi CJ \u2026', id: 'commentField' }),
_react2.default.createElement(
'div',
{ className: 'float-right' },
_react2.default.createElement('input', { type: 'checkbox', id: 'confirmField' }),
_react2.default.createElement(
'label',
{ className: 'label-inline', htmlFor: 'confirmField' },
'Send a copy to yourself'
)
),
_react2.default.createElement('input', { className: 'button-primary', type: 'submit', value: 'Send' })
)
),
_react2.default.createElement(
'div',
null,
'\xA0'
),
_react2.default.createElement(
'table',
null,
_react2.default.createElement(
'thead',
null,
_react2.default.createElement(
'tr',
null,
_react2.default.createElement(
'th',
null,
'Name'
),
_react2.default.createElement(
'th',
null,
'Age'
),
_react2.default.createElement(
'th',
null,
'Height'
),
_react2.default.createElement(
'th',
null,
'Location'
)
)
),
_react2.default.createElement(
'tbody',
null,
_react2.default.createElement(
'tr',
null,
_react2.default.createElement(
'td',
null,
'Stephen Curry'
),
_react2.default.createElement(
'td',
null,
'27'
),
_react2.default.createElement(
'td',
null,
'1,91'
),
_react2.default.createElement(
'td',
null,
'Akron, OH'
)
),
_react2.default.createElement(
'tr',
null,
_react2.default.createElement(
'td',
null,
'Klay Thompson'
),
_react2.default.createElement(
'td',
null,
'25'
),
_react2.default.createElement(
'td',
null,
'2,01'
),
_react2.default.createElement(
'td',
null,
'Los Angeles, CA'
)
)
)
),
_react2.default.createElement(
'div',
null,
'\xA0'
),
_react2.default.createElement(
'div',
{ className: 'container' },
_react2.default.createElement(
'div',
{ className: 'row' },
_react2.default.createElement(
'div',
{ className: 'column' },
'.column'
),
_react2.default.createElement(
'div',
{ className: 'column' },
'.column'
),
_react2.default.createElement(
'div',
{ className: 'column' },
'.column'
),
_react2.default.createElement(
'div',
{ className: 'column' },
'.column'
)
),
_react2.default.createElement(
'div',
{ className: 'row' },
_react2.default.createElement(
'div',
{ className: 'column' },
'.column'
),
_react2.default.createElement(
'div',
{ className: 'column column-50 column-offset-25' },
'.column column-50 column-offset-25'
)
)
),
_react2.default.createElement(
'div',
null,
'\xA0'
),
_react2.default.createElement(
'pre',
null,
_react2.default.createElement(
'code',
null,
code
)
),
_react2.default.createElement(
'div',
{ style: { height: 300 } },
'\xA0'
)
);
};
_reactDom2.default.render(_react2.default.createElement(App, null), document.getElementById('app'));
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment