Skip to content

Instantly share code, notes, and snippets.

@mxstbr mxstbr/esnextbin.md
Created Mar 2, 2016

Embed
What would you like to do?
esnextbin sketch
<!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 Parent extends React.Component {
render() {
const children = this.props.children;
console.log(typeof children.type);
console.log(typeof children.type.displayName);
return(
<div className={children.type.displayName}>
{ children }
</div>
);
}
}
class Child extends React.Component {
render() {
return(
<div>
I`am children
</div>
);
}
}
ReactDOM.render(
<Parent>
<Child/>
</Parent>,
document.getElementById('container')
);
{
"name": "esnextbin-sketch",
"version": "0.0.0",
"dependencies": {
"react": "0.14.7",
"react-dom": "0.14.7",
"babel-runtime": "6.6.1"
}
}
'use strict';
var _typeof2 = require('babel-runtime/helpers/typeof');
var _typeof3 = _interopRequireDefault(_typeof2);
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 Parent = (function (_React$Component) {
(0, _inherits3.default)(Parent, _React$Component);
function Parent() {
(0, _classCallCheck3.default)(this, Parent);
return (0, _possibleConstructorReturn3.default)(this, (0, _getPrototypeOf2.default)(Parent).apply(this, arguments));
}
(0, _createClass3.default)(Parent, [{
key: 'render',
value: function render() {
var children = this.props.children;
console.log((0, _typeof3.default)(children.type));
console.log((0, _typeof3.default)(children.type.displayName));
return _react2.default.createElement(
'div',
{ className: children.type.displayName },
children
);
}
}]);
return Parent;
})(_react2.default.Component);
var Child = (function (_React$Component2) {
(0, _inherits3.default)(Child, _React$Component2);
function Child() {
(0, _classCallCheck3.default)(this, Child);
return (0, _possibleConstructorReturn3.default)(this, (0, _getPrototypeOf2.default)(Child).apply(this, arguments));
}
(0, _createClass3.default)(Child, [{
key: 'render',
value: function render() {
return _react2.default.createElement(
'div',
null,
'I`am children'
);
}
}]);
return Child;
})(_react2.default.Component);
_reactDom2.default.render(_react2.default.createElement(
Parent,
null,
_react2.default.createElement(Child, null)
), document.getElementById('container'));
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.