tiansijie/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="container"></div>
  <!-- put markup and other contents here -->
</body>
</html>

## 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";


class TodoList extends React.Component {

  constructor() {
    super();
    this.state = {
      list: []
    };
  }


  addTodo() {
    this.state.list.push({
      name: this.state.value,
      isDone: false
    });
    this.setState({
      list: this.state.list
    });
  }

  removeTodo(index) {
    this.state.list.splice(index, 1);
    this.setState({
      list: this.state.list
    });
  }

  finish(index, isDone){
    this.state.list[index].isDone = isDone;
    this.setState({
      list: this.state.list
    });
  }

  render() {
    const header = <input onChange={(value) => this.setState({value: value.target.value})}></input>;
    const addListButton = <button onClick={this.addTodo.bind(this)}>add</button>;
    const lists = this.state.list.map((ll, index) => {
      const nameCC = ll.isDone ? <strike>{ll.name}</strike> : <div>{ll.name}</div>;
      return (
        <div key={index}>
            {nameCC}
            <button onClick={this.removeTodo.bind(this, index)}>remove</button>
            <button onClick={this.finish.bind(this, index, !ll.isDone)}>finish</button>
        </div>
      );
    });
    return <div>
    <div>{header}</div>
    <div>{addListButton}</div>
    <div>{lists}</div>
    </div>;
  }
}


ReactDOM.render(
  <TodoList/>,
  document.getElementById('container')
);

## package.json
{
  "name": "esnextbin-sketch",
  "version": "0.0.0",
  "dependencies": {
    "react": "15.4.2",
    "react-dom": "15.4.2",
    "babel-runtime": "6.22.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 }; }

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

var TodoList = function (_React$Component) {
  (0, _inherits3.default)(TodoList, _React$Component);

  function TodoList() {
    (0, _classCallCheck3.default)(this, TodoList);

    var _this = (0, _possibleConstructorReturn3.default)(this, (0, _getPrototypeOf2.default)(TodoList).call(this));

    _this.state = {
      list: []
    };
    return _this;
  }

  (0, _createClass3.default)(TodoList, [{
    key: "addTodo",
    value: function addTodo() {
      this.state.list.push({
        name: this.state.value,
        isDone: false
      });
      this.setState({
        list: this.state.list
      });
    }
  }, {
    key: "removeTodo",
    value: function removeTodo(index) {
      this.state.list.splice(index, 1);
      this.setState({
        list: this.state.list
      });
    }
  }, {
    key: "finish",
    value: function finish(index, isDone) {
      this.state.list[index].isDone = isDone;
      this.setState({
        list: this.state.list
      });
    }
  }, {
    key: "render",
    value: function render() {
      var _this2 = this;

      var header = _react2.default.createElement("input", { onChange: function onChange(value) {
          return _this2.setState({ value: value.target.value });
        } });
      var addListButton = _react2.default.createElement(
        "button",
        { onClick: this.addTodo.bind(this) },
        "add"
      );
      var lists = this.state.list.map(function (ll, index) {
        var nameCC = ll.isDone ? _react2.default.createElement(
          "strike",
          null,
          ll.name
        ) : _react2.default.createElement(
          "div",
          null,
          ll.name
        );
        return _react2.default.createElement(
          "div",
          { key: index },
          nameCC,
          _react2.default.createElement(
            "button",
            { onClick: _this2.removeTodo.bind(_this2, index) },
            "remove"
          ),
          _react2.default.createElement(
            "button",
            { onClick: _this2.finish.bind(_this2, index, !ll.isDone) },
            "finish"
          )
        );
      });
      return _react2.default.createElement(
        "div",
        null,
        _react2.default.createElement(
          "div",
          null,
          header
        ),
        _react2.default.createElement(
          "div",
          null,
          addListButton
        ),
        _react2.default.createElement(
          "div",
          null,
          lists
        )
      );
    }
  }]);
  return TodoList;
}(_react2.default.Component);

_reactDom2.default.render(_react2.default.createElement(TodoList, null), document.getElementById('container'));
	<!doctype html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>ESNextbin Sketch</title>
	<!-- put additional styles and scripts here -->
	</head>
	<body>
	<div id="container"></div>
	<!-- put markup and other contents here -->
	</body>
	</html>
	// 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";


	class TodoList extends React.Component {

	constructor() {
	super();
	this.state = {
	list: []
	};
	}


	addTodo() {
	this.state.list.push({
	name: this.state.value,
	isDone: false
	});
	this.setState({
	list: this.state.list
	});
	}

	removeTodo(index) {
	this.state.list.splice(index, 1);
	this.setState({
	list: this.state.list
	});
	}

	finish(index, isDone){
	this.state.list[index].isDone = isDone;
	this.setState({
	list: this.state.list
	});
	}

	render() {
	const header = <input onChange={(value) => this.setState({value: value.target.value})}></input>;
	const addListButton = <button onClick={this.addTodo.bind(this)}>add</button>;
	const lists = this.state.list.map((ll, index) => {
	const nameCC = ll.isDone ? <strike>{ll.name}</strike> : <div>{ll.name}</div>;
	return (
	<div key={index}>
	{nameCC}
	<button onClick={this.removeTodo.bind(this, index)}>remove</button>
	<button onClick={this.finish.bind(this, index, !ll.isDone)}>finish</button>
	</div>
	);
	});
	return <div>
	<div>{header}</div>
	<div>{addListButton}</div>
	<div>{lists}</div>
	</div>;
	}
	}


	ReactDOM.render(
	<TodoList/>,
	document.getElementById('container')
	);
	{
	"name": "esnextbin-sketch",
	"version": "0.0.0",
	"dependencies": {
	"react": "15.4.2",
	"react-dom": "15.4.2",
	"babel-runtime": "6.22.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 }; }

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

	var TodoList = function (_React$Component) {
	(0, _inherits3.default)(TodoList, _React$Component);

	function TodoList() {
	(0, _classCallCheck3.default)(this, TodoList);

	var _this = (0, _possibleConstructorReturn3.default)(this, (0, _getPrototypeOf2.default)(TodoList).call(this));

	_this.state = {
	list: []
	};
	return _this;
	}

	(0, _createClass3.default)(TodoList, [{
	key: "addTodo",
	value: function addTodo() {
	this.state.list.push({
	name: this.state.value,
	isDone: false
	});
	this.setState({
	list: this.state.list
	});
	}
	}, {
	key: "removeTodo",
	value: function removeTodo(index) {
	this.state.list.splice(index, 1);
	this.setState({
	list: this.state.list
	});
	}
	}, {
	key: "finish",
	value: function finish(index, isDone) {
	this.state.list[index].isDone = isDone;
	this.setState({
	list: this.state.list
	});
	}
	}, {
	key: "render",
	value: function render() {
	var _this2 = this;

	var header = _react2.default.createElement("input", { onChange: function onChange(value) {
	return _this2.setState({ value: value.target.value });
	} });
	var addListButton = _react2.default.createElement(
	"button",
	{ onClick: this.addTodo.bind(this) },
	"add"
	);
	var lists = this.state.list.map(function (ll, index) {
	var nameCC = ll.isDone ? _react2.default.createElement(
	"strike",
	null,
	ll.name
	) : _react2.default.createElement(
	"div",
	null,
	ll.name
	);
	return _react2.default.createElement(
	"div",
	{ key: index },
	nameCC,
	_react2.default.createElement(
	"button",
	{ onClick: _this2.removeTodo.bind(_this2, index) },
	"remove"
	),
	_react2.default.createElement(
	"button",
	{ onClick: _this2.finish.bind(_this2, index, !ll.isDone) },
	"finish"
	)
	);
	});
	return _react2.default.createElement(
	"div",
	null,
	_react2.default.createElement(
	"div",
	null,
	header
	),
	_react2.default.createElement(
	"div",
	null,
	addListButton
	),
	_react2.default.createElement(
	"div",
	null,
	lists
	)
	);
	}
	}]);
	return TodoList;
	}(_react2.default.Component);

	_reactDom2.default.render(_react2.default.createElement(TodoList, null), document.getElementById('container'));