Skip to content

Instantly share code, notes, and snippets.

@eduardonunesp

eduardonunesp/esnextbin.md

Last active April 6, 2016 12:38
Show Gist options
  • Save eduardonunesp/33fdd6e761cdd1f6ac8fc718ac34fbe5 to your computer and use it in GitHub Desktop.
Save eduardonunesp/33fdd6e761cdd1f6ac8fc718ac34fbe5 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>ESNextbin Sketch</title>
<!-- put additional styles and scripts here -->
</head>
<body>
<div id="start"></div>
</body>
</html>
Raw
index.js
import React from 'react';
import ReactDOM from 'react-dom';
let names = ['Hector', 'Tom', 'Veronika', 'Erik', 'Sam'];
class Item extends React.Component {
render(){
return (
<div>
<span>{this.props.content.name}</span>
<span>{this.props.content.age}</span>
</div>
);
}
};
class Clickable extends React.Component {
constructor() {
super();
this.handleClick = e => {
this.props.handleClick(e);
}
}
render(){
return (
<div onClick={this.handleClick}>{this.props.label}</div>
);
}
};
class App extends React.Component {
constructor() {
super()
this.state = {
data: []
};
this.addPerson = this.addPerson.bind(this);
}
addPerson() {
let newData = this.state.data.slice();
newData.push({
name: names[parseInt(Math.random()*5, 10)],
age: parseInt(Math.random()*5, 10) + 20,
});
this.setState({
data: newData
});
}
render(){
return (
<div>
<h1>List of Items</h1>
<Clickable
handleClick={this.addPerson}
label="Add"
/>
<div>
{this.state.data.map((person, idx)=><Item key={idx} content={person} />)}
</div>
</div>
);
}
};
ReactDOM.render(<App />, document.getElementById('start'));
Raw
package.json
{
"name": "esnextbin-sketch",
"version": "0.0.0",
"dependencies": {
"babel-runtime": "6.6.1",
"react-dom": "0.14.8",
"react": "0.14.8"
}
}
Raw
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 names = ['Hector', 'Tom', 'Veronika', 'Erik', 'Sam'];
var Item = (function (_React$Component) {
(0, _inherits3.default)(Item, _React$Component);
function Item() {
(0, _classCallCheck3.default)(this, Item);
return (0, _possibleConstructorReturn3.default)(this, (0, _getPrototypeOf2.default)(Item).apply(this, arguments));
}
(0, _createClass3.default)(Item, [{
key: 'render',
value: function render() {
return _react2.default.createElement(
'div',
null,
_react2.default.createElement(
'span',
null,
this.props.content.name
),
_react2.default.createElement(
'span',
null,
this.props.content.age
)
);
}
}]);
return Item;
})(_react2.default.Component);
;
var Clickable = (function (_React$Component2) {
(0, _inherits3.default)(Clickable, _React$Component2);
function Clickable() {
(0, _classCallCheck3.default)(this, Clickable);
var _this2 = (0, _possibleConstructorReturn3.default)(this, (0, _getPrototypeOf2.default)(Clickable).call(this));
_this2.handleClick = function (e) {
_this2.props.handleClick(e);
};
return _this2;
}
(0, _createClass3.default)(Clickable, [{
key: 'render',
value: function render() {
return _react2.default.createElement(
'div',
{ onClick: this.handleClick },
this.props.label
);
}
}]);
return Clickable;
})(_react2.default.Component);
;
var App = (function (_React$Component3) {
(0, _inherits3.default)(App, _React$Component3);
function App() {
(0, _classCallCheck3.default)(this, App);
var _this3 = (0, _possibleConstructorReturn3.default)(this, (0, _getPrototypeOf2.default)(App).call(this));
_this3.state = {
data: []
};
_this3.addPerson = _this3.addPerson.bind(_this3);
return _this3;
}
(0, _createClass3.default)(App, [{
key: 'addPerson',
value: function addPerson() {
var newData = this.state.data.slice();
newData.push({
name: names[parseInt(Math.random() * 5, 10)],
age: parseInt(Math.random() * 5, 10) + 20
});
this.setState({
data: newData
});
}
}, {
key: 'render',
value: function render() {
return _react2.default.createElement(
'div',
null,
_react2.default.createElement(
'h1',
null,
'List of Items'
),
_react2.default.createElement(Clickable, {
handleClick: this.addPerson,
label: 'Add'
}),
_react2.default.createElement(
'div',
null,
this.state.data.map(function (person, idx) {
return _react2.default.createElement(Item, { key: idx, content: person });
})
)
);
}
}]);
return App;
})(_react2.default.Component);
;
_reactDom2.default.render(_react2.default.createElement(App, null), document.getElementById('start'));
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment