parvezk/esnextbin.md

## esnextbin.md

      
    Raw
  

              esnextbin.md
            
          
    made with esnextbin

  
## 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="foo"></div>
</body>
</html>

## index.js
import React, { PropTypes, Component } from 'react';
import ReactDOM from 'react-dom';

class Bar extends Component {

  _ListOfTenThings = () => {
    return (
      <Repeat numTimes={10} charData={"character data"} >
        {(index) => <div key={index}>This is item {index} in the list</div>}
      </Repeat>
    );
  }

  _renderer1(){
    let insertText ="goes in string literal";
    return (
      <div>
      {`paragraph text ${insertText}`}
      {this._ListOfTenThings()}
      </div>
      )
  }

  render (){
    return(
      <div> { this._renderer1() }</div>
      )
  }
}

class Repeat extends Component {

  render(){
    const data = this.props;
    const { numTimes, charData } = data;
    let items = [];

    for (let i = 0; i < numTimes; i++) {
      items.push(data.children(i));
    }
    return <div>{items}</div>;
  }
}

ReactDOM.render(
  <Bar />, document.getElementById('foo')
);

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

## transpiled.js
'use strict';

var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of');

var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf);

var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');

var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);

var _createClass2 = require('babel-runtime/helpers/createClass');

var _createClass3 = _interopRequireDefault(_createClass2);

var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');

var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);

var _inherits2 = require('babel-runtime/helpers/inherits');

var _inherits3 = _interopRequireDefault(_inherits2);

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

var Bar = function (_Component) {
  (0, _inherits3.default)(Bar, _Component);

  function Bar() {
    var _Object$getPrototypeO;

    var _temp, _this, _ret;

    (0, _classCallCheck3.default)(this, Bar);

    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }

    return _ret = (_temp = (_this = (0, _possibleConstructorReturn3.default)(this, (_Object$getPrototypeO = (0, _getPrototypeOf2.default)(Bar)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this._ListOfTenThings = function () {
      return _react2.default.createElement(
        Repeat,
        { numTimes: 10, charData: "character data" },
        function (index) {
          return _react2.default.createElement(
            'div',
            { key: index },
            'This is item ',
            index,
            ' in the list'
          );
        }
      );
    }, _temp), (0, _possibleConstructorReturn3.default)(_this, _ret);
  }

  (0, _createClass3.default)(Bar, [{
    key: '_renderer1',
    value: function _renderer1() {
      var insertText = "goes in string literal";
      return _react2.default.createElement(
        'div',
        null,
        'paragraph text ' + insertText,
        this._ListOfTenThings()
      );
    }
  }, {
    key: 'render',
    value: function render() {
      return _react2.default.createElement(
        'div',
        null,
        ' ',
        this._renderer1()
      );
    }
  }]);
  return Bar;
}(_react.Component);

var Repeat = function (_Component2) {
  (0, _inherits3.default)(Repeat, _Component2);

  function Repeat() {
    (0, _classCallCheck3.default)(this, Repeat);
    return (0, _possibleConstructorReturn3.default)(this, (0, _getPrototypeOf2.default)(Repeat).apply(this, arguments));
  }

  (0, _createClass3.default)(Repeat, [{
    key: 'render',
    value: function render() {
      var data = this.props;
      var numTimes = data.numTimes;
      var charData = data.charData;

      var items = [];

      for (var i = 0; i < numTimes; i++) {
        items.push(data.children(i));
      }
      return _react2.default.createElement(
        'div',
        null,
        items
      );
    }
  }]);
  return Repeat;
}(_react.Component);

_reactDom2.default.render(_react2.default.createElement(Bar, null), document.getElementById('foo'));
	<!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="foo"></div>
	</body>
	</html>
	import React, { PropTypes, Component } from 'react';
	import ReactDOM from 'react-dom';

	class Bar extends Component {

	_ListOfTenThings = () => {
	return (
	<Repeat numTimes={10} charData={"character data"} >
	{(index) => <div key={index}>This is item {index} in the list</div>}
	</Repeat>
	);
	}

	_renderer1(){
	let insertText ="goes in string literal";
	return (
	<div>
	{`paragraph text ${insertText}`}
	{this._ListOfTenThings()}
	</div>
	)
	}

	render (){
	return(
	<div> { this._renderer1() }</div>
	)
	}
	}

	class Repeat extends Component {

	render(){
	const data = this.props;
	const { numTimes, charData } = data;
	let items = [];

	for (let i = 0; i < numTimes; i++) {
	items.push(data.children(i));
	}
	return <div>{items}</div>;
	}
	}

	ReactDOM.render(
	<Bar />, document.getElementById('foo')
	);
	{
	"name": "esnextbin-sketch",
	"version": "0.0.0",
	"dependencies": {
	"react": "0.14.7",
	"react-dom": "0.14.7",
	"babel-runtime": "6.18.0"
	}
	}
	'use strict';

	var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of');

	var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf);

	var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');

	var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);

	var _createClass2 = require('babel-runtime/helpers/createClass');

	var _createClass3 = _interopRequireDefault(_createClass2);

	var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');

	var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);

	var _inherits2 = require('babel-runtime/helpers/inherits');

	var _inherits3 = _interopRequireDefault(_inherits2);

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

	var Bar = function (_Component) {
	(0, _inherits3.default)(Bar, _Component);

	function Bar() {
	var _Object$getPrototypeO;

	var _temp, _this, _ret;

	(0, _classCallCheck3.default)(this, Bar);

	for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
	args[_key] = arguments[_key];
	}

	return _ret = (_temp = (_this = (0, _possibleConstructorReturn3.default)(this, (_Object$getPrototypeO = (0, _getPrototypeOf2.default)(Bar)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this._ListOfTenThings = function () {
	return _react2.default.createElement(
	Repeat,
	{ numTimes: 10, charData: "character data" },
	function (index) {
	return _react2.default.createElement(
	'div',
	{ key: index },
	'This is item ',
	index,
	' in the list'
	);
	}
	);
	}, _temp), (0, _possibleConstructorReturn3.default)(_this, _ret);
	}

	(0, _createClass3.default)(Bar, [{
	key: '_renderer1',
	value: function _renderer1() {
	var insertText = "goes in string literal";
	return _react2.default.createElement(
	'div',
	null,
	'paragraph text ' + insertText,
	this._ListOfTenThings()
	);
	}
	}, {
	key: 'render',
	value: function render() {
	return _react2.default.createElement(
	'div',
	null,
	' ',
	this._renderer1()
	);
	}
	}]);
	return Bar;
	}(_react.Component);

	var Repeat = function (_Component2) {
	(0, _inherits3.default)(Repeat, _Component2);

	function Repeat() {
	(0, _classCallCheck3.default)(this, Repeat);
	return (0, _possibleConstructorReturn3.default)(this, (0, _getPrototypeOf2.default)(Repeat).apply(this, arguments));
	}

	(0, _createClass3.default)(Repeat, [{
	key: 'render',
	value: function render() {
	var data = this.props;
	var numTimes = data.numTimes;
	var charData = data.charData;

	var items = [];

	for (var i = 0; i < numTimes; i++) {
	items.push(data.children(i));
	}
	return _react2.default.createElement(
	'div',
	null,
	items
	);
	}
	}]);
	return Repeat;
	}(_react.Component);

	_reactDom2.default.render(_react2.default.createElement(Bar, null), document.getElementById('foo'));