Skip to content

Instantly share code, notes, and snippets.

@bogas04
Created February 17, 2016 07:54
Show Gist options
  • Save bogas04/0875a9b068fc83b58383 to your computer and use it in GitHub Desktop.
Save bogas04/0875a9b068fc83b58383 to your computer and use it in GitHub Desktop.
esnextbin sketch
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>ESNextbin Sketch</title>
<!-- put additional styles and scripts here -->
</head>
<body>
<div id="root"></div>
</body>
</html>
import React, { Component } from 'react';
import { render } from 'react-dom';
class App extends Component {
constructor(p) {
super(p);
this.state = { color: true };
}
changeState() {
this.setState({
color: !this.state.color,
italics: !this.state.italic,
});
}
render () {
return (
<h1
onClick={() => this.changeState()}
style={{
color: this.state.color ? 'red' : 'black'
}}>
Hello {this.props.name}, you are old as {this.props.age}
</h1>
);
}
}
render(
<App name="akanshi" age="75"/>
,document.getElementById('root')
);
{
"name": "esnextbin-sketch",
"version": "0.0.0",
"dependencies": {
"babel-runtime": "6.3.19",
"react-dom": "0.14.7",
"react": "0.14.7"
}
}
'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');
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
var App = (function (_Component) {
(0, _inherits3.default)(App, _Component);
function App(p) {
(0, _classCallCheck3.default)(this, App);
var _this = (0, _possibleConstructorReturn3.default)(this, (0, _getPrototypeOf2.default)(App).call(this, p));
_this.state = { color: true };
return _this;
}
(0, _createClass3.default)(App, [{
key: 'changeState',
value: function changeState() {
this.setState({
color: !this.state.color,
italics: !this.state.italic
});
}
}, {
key: 'render',
value: function render() {
var _this2 = this;
return _react2.default.createElement(
'h1',
{
onClick: function onClick() {
return _this2.changeState();
},
style: {
color: this.state.color ? 'red' : 'black'
} },
'Hello ',
this.props.name,
', you are old as ',
this.props.age
);
}
}]);
return App;
})(_react.Component);
(0, _reactDom.render)(_react2.default.createElement(App, { name: 'akanshi', age: '75' }), document.getElementById('root'));
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment