<html>
<head>
<script src="//fb.me/react-0.13.1.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div id="App"></div>
</body>
</html>
"use strict";
var Component = React.Component
var PropTypes = React.PropTypes
var _classCallCheck = function (instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } };
var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })();
var _inherits = function (subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) subClass.__proto__ = superClass; };
var App = (function (_Component) {
function App() {
_classCallCheck(this, App);
if (_Component != null) {
_Component.apply(this, arguments);
}
}
_inherits(App, _Component);
// on crée une méthode qui retourne ce contexte
App.prototype.getChildContext = function getChildContext() {
return {
foo: this.props.foo };
};
App.prototype.render = function render() {
return React.createElement(
"div",
{ className: "putainde-App" },
React.createElement(Container, null)
);
};
_createClass(App, null, [{
key: "childContextTypes",
// on définit les types de ce que l'on souhaite passer dans
// le contexte
value: {
foo: PropTypes.string },
enumerable: true
}]);
return App;
})(Component);
var Container = (function (_Component2) {
function Container() {
_classCallCheck(this, Container);
if (_Component2 != null) {
_Component2.apply(this, arguments);
}
}
_inherits(Container, _Component2);
Container.prototype.getChildContext = function getChildContext() {
return {
bar: "oh hai" };
};
Container.prototype.render = function render() {
return React.createElement(
"div",
{ className: "putainde-Container" },
React.createElement(IntermediaryComponent, null)
);
};
_createClass(Container, null, [{
key: "childContextTypes",
// les contextes sont *merged*, ce qui nous permet de le construire
// sans se soucier du niveau auquel sera notre composant.
value: {
bar: PropTypes.string },
enumerable: true
}]);
return Container;
})(Component);
// ce composant n'a pas besoin de savoir que ses enfants on besoin
// de certaines propriétés du contexte
var IntermediaryComponent = (function (_Component3) {
function IntermediaryComponent() {
_classCallCheck(this, IntermediaryComponent);
if (_Component3 != null) {
_Component3.apply(this, arguments);
}
}
_inherits(IntermediaryComponent, _Component3);
IntermediaryComponent.prototype.render = function render() {
return React.createElement(Content, null);
};
return IntermediaryComponent;
})(Component);
var Content = (function (_Component4) {
function Content() {
_classCallCheck(this, Content);
if (_Component4 != null) {
_Component4.apply(this, arguments);
}
}
_inherits(Content, _Component4);
Content.prototype.render = function render() {
return React.createElement(
"div",
{ className: "putainde-Content" },
React.createElement(
"div",
{ className: "putainde-Content-line" },
React.createElement(
"strong",
null,
"foo"
),
": ",
this.context.foo
),
React.createElement(
"div",
{ className: "putainde-Content-line" },
React.createElement(
"strong",
null,
"bar"
),
": ",
this.context.bar
)
);
};
_createClass(Content, null, [{
key: "contextTypes",
// pour chaque composant utilisant des propriétés du contexte,
// on stipule ce dont on a besoin
value: {
foo: PropTypes.string,
bar: PropTypes.string },
enumerable: true
}]);
return Content;
})(Component);
React.render(React.createElement(App, { foo: Date.now() }), document.getElementById("App"));
Output
This bin was created anonymously and its free preview time has expired (learn why). — Get a free unrestricted account
Dismiss xKeyboard Shortcuts
Shortcut | Action |
---|---|
ctrl + [num] | Toggle nth panel |
ctrl + 0 | Close focused panel |
ctrl + enter | Re-render output. If console visible: run JS in console |
Ctrl + l | Clear the console |
ctrl + / | Toggle comment on selected lines |
ctrl + ] | Indents selected lines |
ctrl + [ | Unindents selected lines |
tab | Code complete & Emmet expand |
ctrl + shift + L | Beautify code in active panel |
ctrl + s | Save & lock current Bin from further changes |
ctrl + shift + s | Open the share options |
ctrl + y | Archive Bin |
Complete list of JS Bin shortcuts |
JS Bin URLs
URL | Action |
---|---|
/ | Show the full rendered output. This content will update in real time as it's updated from the /edit url. |
/edit | Edit the current bin |
/watch | Follow a Code Casting session |
/embed | Create an embeddable version of the bin |
/latest | Load the very latest bin (/latest goes in place of the revision) |
/[username]/last | View the last edited bin for this user |
/[username]/last/edit | Edit the last edited bin for this user |
/[username]/last/watch | Follow the Code Casting session for the latest bin for this user |
/quiet | Remove analytics and edit button from rendered output |
.js | Load only the JavaScript for a bin |
.css | Load only the CSS for a bin |
Except for username prefixed urls, the url may start with http://jsbin.com/abc and the url fragments can be added to the url to view it differently. |