nickbalestra/esnextbin.md

## esnextbin.md

      
    Raw
  

              esnextbin.md
            
          
    made with esnextbin

  
## index.html
<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>ESNextbin Sketch</title>
  <!-- put additional styles and scripts here -->
</head>
<body>
  <div id="root"></div>
  <!-- put markup and other contents here -->
</body>
</html>

## index.js
import styled from 'styled-components';
import React from 'react';
import ReactDOM from 'react-dom';

// Create a <Title> react component that renders an <h1> which is
// centered, palevioletred and sized at 1.5em
const Title = styled.h1`
  font-size: 1.5em;
  text-align: center;
  color: palevioletred;
`

// Create a <Wrapper> react component that renders a <section> with
// some padding and a papayawhip background
const Wrapper = styled.section`
  padding: 4em;
  background: papayawhip;
`

ReactDOM.render(
  <Wrapper>
    <Title>Hello World, styled components FTW!</Title>
  </Wrapper>,
  document.getElementById('root')
)

## package.json
{
  "name": "esnextbin-sketch",
  "version": "0.0.0",
  "dependencies": {
    "babel-runtime": "6.18.0",
    "react": "15.4.1",
    "styled-components": "1.1.1",
    "react-dom": "15.4.1"
  }
}

## transpiled.js
'use strict';

var _taggedTemplateLiteral2 = require('babel-runtime/helpers/taggedTemplateLiteral');

var _taggedTemplateLiteral3 = _interopRequireDefault(_taggedTemplateLiteral2);

var _templateObject = (0, _taggedTemplateLiteral3.default)(['\n  font-size: 1.5em;\n  text-align: center;\n  color: palevioletred;\n'], ['\n  font-size: 1.5em;\n  text-align: center;\n  color: palevioletred;\n']),
    _templateObject2 = (0, _taggedTemplateLiteral3.default)(['\n  padding: 4em;\n  background: papayawhip;\n'], ['\n  padding: 4em;\n  background: papayawhip;\n']);

var _styledComponents = require('styled-components');

var _styledComponents2 = _interopRequireDefault(_styledComponents);

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 }; }

// Create a <Title> react component that renders an <h1> which is
// centered, palevioletred and sized at 1.5em
var Title = _styledComponents2.default.h1(_templateObject);

// Create a <Wrapper> react component that renders a <section> with
// some padding and a papayawhip background
var Wrapper = _styledComponents2.default.section(_templateObject2);

_reactDom2.default.render(_react2.default.createElement(
  Wrapper,
  null,
  _react2.default.createElement(
    Title,
    null,
    'Hello World, styled components FTW!'
  )
), document.getElementById('root'));
	<!doctype html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>ESNextbin Sketch</title>
	<!-- put additional styles and scripts here -->
	</head>
	<body>
	<div id="root"></div>
	<!-- put markup and other contents here -->
	</body>
	</html>
	import styled from 'styled-components';
	import React from 'react';
	import ReactDOM from 'react-dom';

	// Create a <Title> react component that renders an <h1> which is
	// centered, palevioletred and sized at 1.5em
	const Title = styled.h1`
	font-size: 1.5em;
	text-align: center;
	color: palevioletred;
	`

	// Create a <Wrapper> react component that renders a <section> with
	// some padding and a papayawhip background
	const Wrapper = styled.section`
	padding: 4em;
	background: papayawhip;
	`

	ReactDOM.render(
	<Wrapper>
	<Title>Hello World, styled components FTW!</Title>
	</Wrapper>,
	document.getElementById('root')
	)
	{
	"name": "esnextbin-sketch",
	"version": "0.0.0",
	"dependencies": {
	"babel-runtime": "6.18.0",
	"react": "15.4.1",
	"styled-components": "1.1.1",
	"react-dom": "15.4.1"
	}
	}
	'use strict';

	var _taggedTemplateLiteral2 = require('babel-runtime/helpers/taggedTemplateLiteral');

	var _taggedTemplateLiteral3 = _interopRequireDefault(_taggedTemplateLiteral2);

	var _templateObject = (0, _taggedTemplateLiteral3.default)(['\n font-size: 1.5em;\n text-align: center;\n color: palevioletred;\n'], ['\n font-size: 1.5em;\n text-align: center;\n color: palevioletred;\n']),
	_templateObject2 = (0, _taggedTemplateLiteral3.default)(['\n padding: 4em;\n background: papayawhip;\n'], ['\n padding: 4em;\n background: papayawhip;\n']);

	var _styledComponents = require('styled-components');

	var _styledComponents2 = _interopRequireDefault(_styledComponents);

	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 }; }

	// Create a <Title> react component that renders an <h1> which is
	// centered, palevioletred and sized at 1.5em
	var Title = _styledComponents2.default.h1(_templateObject);

	// Create a <Wrapper> react component that renders a <section> with
	// some padding and a papayawhip background
	var Wrapper = _styledComponents2.default.section(_templateObject2);

	_reactDom2.default.render(_react2.default.createElement(
	Wrapper,
	null,
	_react2.default.createElement(
	Title,
	null,
	'Hello World, styled components FTW!'
	)
	), document.getElementById('root'));