ALF-er/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>
  <!-- put markup and other contents here -->
  <div id="root1"></div>
  <div id="root2"></div>
</body>
</html>

## index.js
// write ES2015 code and import modules from npm
// and then press "Execute" to run your program

import React, { Component } from "react";
import { render } from "react-dom";
import shallowCompare from "react-addons-shallow-compare";

class App extends Component {

  constructor(...args) {
    super(...args);

    this.state = {
      buttonClickedTimes: 0
    };
  }

  onButtonClick = () => this.setState({ buttonClickedTimes: this.state.buttonClickedTimes + 1 })

  render() {
    const { buttonClickedTimes } = this.state;

    return (
      <div>
        <p>Button clicked {buttonClickedTimes} times</p>

        <button onClick={this.onButtonClick}>Click me</button>
      </div>
    );
  }
}

render(<App />, document.getElementById("root1"));
render(<App />, document.getElementById("root2"));

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

## 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 _reactAddonsShallowCompare = require("react-addons-shallow-compare");

var _reactAddonsShallowCompare2 = _interopRequireDefault(_reactAddonsShallowCompare);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

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

  function App() {
    var _Object$getPrototypeO;

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

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

    var _this = (0, _possibleConstructorReturn3.default)(this, (_Object$getPrototypeO = (0, _getPrototypeOf2.default)(App)).call.apply(_Object$getPrototypeO, [this].concat(args)));

    _this.onButtonClick = function () {
      return _this.setState({ buttonClickedTimes: _this.state.buttonClickedTimes + 1 });
    };

    _this.state = {
      buttonClickedTimes: 0
    };
    return _this;
  }

  (0, _createClass3.default)(App, [{
    key: "render",
    value: function render() {
      var buttonClickedTimes = this.state.buttonClickedTimes;

      return _react2.default.createElement(
        "div",
        null,
        _react2.default.createElement(
          "p",
          null,
          "Button clicked ",
          buttonClickedTimes,
          " times"
        ),
        _react2.default.createElement(
          "button",
          { onClick: this.onButtonClick },
          "Click me"
        )
      );
    }
  }]);
  return App;
})(_react.Component); // write ES2015 code and import modules from npm
// and then press "Execute" to run your program

(0, _reactDom.render)(_react2.default.createElement(App, null), document.getElementById("root1"));
(0, _reactDom.render)(_react2.default.createElement(App, null), document.getElementById("root2"));
	<!doctype html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>ESNextbin Sketch</title>
	<!-- put additional styles and scripts here -->
	</head>
	<body>
	<!-- put markup and other contents here -->
	<div id="root1"></div>
	<div id="root2"></div>
	</body>
	</html>
	// write ES2015 code and import modules from npm
	// and then press "Execute" to run your program

	import React, { Component } from "react";
	import { render } from "react-dom";
	import shallowCompare from "react-addons-shallow-compare";

	class App extends Component {

	constructor(...args) {
	super(...args);

	this.state = {
	buttonClickedTimes: 0
	};
	}

	onButtonClick = () => this.setState({ buttonClickedTimes: this.state.buttonClickedTimes + 1 })

	render() {
	const { buttonClickedTimes } = this.state;

	return (
	<div>
	<p>Button clicked {buttonClickedTimes} times</p>

	<button onClick={this.onButtonClick}>Click me</button>
	</div>
	);
	}
	}

	render(<App />, document.getElementById("root1"));
	render(<App />, document.getElementById("root2"));
	{
	"name": "esnextbin-sketch",
	"version": "0.0.0",
	"dependencies": {
	"react": "0.14.7",
	"react-dom": "0.14.7",
	"react-addons-shallow-compare": "0.14.7",
	"babel-runtime": "6.3.19"
	}
	}
	"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 _reactAddonsShallowCompare = require("react-addons-shallow-compare");

	var _reactAddonsShallowCompare2 = _interopRequireDefault(_reactAddonsShallowCompare);

	function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

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

	function App() {
	var _Object$getPrototypeO;

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

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

	var _this = (0, _possibleConstructorReturn3.default)(this, (_Object$getPrototypeO = (0, _getPrototypeOf2.default)(App)).call.apply(_Object$getPrototypeO, [this].concat(args)));

	_this.onButtonClick = function () {
	return _this.setState({ buttonClickedTimes: _this.state.buttonClickedTimes + 1 });
	};

	_this.state = {
	buttonClickedTimes: 0
	};
	return _this;
	}

	(0, _createClass3.default)(App, [{
	key: "render",
	value: function render() {
	var buttonClickedTimes = this.state.buttonClickedTimes;

	return _react2.default.createElement(
	"div",
	null,
	_react2.default.createElement(
	"p",
	null,
	"Button clicked ",
	buttonClickedTimes,
	" times"
	),
	_react2.default.createElement(
	"button",
	{ onClick: this.onButtonClick },
	"Click me"
	)
	);
	}
	}]);
	return App;
	})(_react.Component); // write ES2015 code and import modules from npm
	// and then press "Execute" to run your program

	(0, _reactDom.render)(_react2.default.createElement(App, null), document.getElementById("root1"));
	(0, _reactDom.render)(_react2.default.createElement(App, null), document.getElementById("root2"));