Skip to content

Instantly share code, notes, and snippets.

/index.html

Created April 20, 2017 06:38
Show Gist options
  • Save anonymous/3402751c110da180db54ebcd78e7bd9f to your computer and use it in GitHub Desktop.
Save anonymous/3402751c110da180db54ebcd78e7bd9f to your computer and use it in GitHub Desktop.
Download ZIP
JS Bin // source http://jsbin.com/yojoyuvufi
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<script src="http://fb.me/react-with-addons-0.12.2.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
<style id="jsbin-css">
.selected {
background: #EFE;
}
</style>
</head>
<body>
<div id="alpha">
</div>
<div id="beta">
</div>
<script id="jsbin-javascript">
// A simple store
var store = {count: 0};
// Let's create a counter component that we can use
// in all of our projects
var Counter = React.createClass({displayName: 'Counter',
render: function(){
return (
React.createElement("div", {className: "counter"},
React.createElement("span", null, this.props.count),
React.createElement("button", {onClick: this.onIncrease}, "Increase")
)
);
},
onIncrease: function(){
// Hit the button will just emit an event
var e = document.createEvent('Event');
e.initEvent('zanzibar', true, true);
this.getDOMNode().dispatchEvent( e );
}
});
// Our reaction
var increaseReaction = function( e ){
store.count++;
// The ideal store would trigger a change event,
// our store is a common object, so we are going to
// refresh the page for demonstration purposes
React.render( React.createElement(Counter, {count: store.count}), document.getElementById('alpha') );
}
document.addEventListener( 'zanzibar', increaseReaction, false );
var CounterRep = React.createClass({displayName: 'CounterRep',
render: function(){
return (
React.createElement("div", {className: "counterrep"},
React.createElement("span", null, this.props.count)
)
);
},
onIncrease: function(){
// Hit the button will just emit an event
var e = document.createEvent('Event');
e.initEvent('counterrep', true, true);
this.getDOMNode().dispatchEvent( e );
}
});
var increaseRepReaction = function( e ){
// The ideal store would trigger a change event,
// our store is a common object, so we are going to
// refresh the page for demonstration purposes
React.render( React.createElement(CounterRep, {count: store.count}), document.getElementById('beta') );
}
document.addEventListener( 'zanzibar', increaseRepReaction, false );
React.render( React.createElement(Counter, {count: store.count}), document.getElementById('alpha') );
React.render( React.createElement(CounterRep, {count: store.count}), document.getElementById('beta') );
</script>
<script id="jsbin-source-html" type="text/html"><!DOCTYPE html>
<html>
<head>
<script src="//fb.me/react-with-addons-0.12.2.js"><\/script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div id="alpha">
</div>
<div id="beta">
</div>
</body>
</html></script>
<script id="jsbin-source-css" type="text/css">.selected {
background: #EFE;
}</script>
<script id="jsbin-source-javascript" type="text/javascript">// A simple store
var store = {count: 0};
// Let's create a counter component that we can use
// in all of our projects
var Counter = React.createClass({
render: function(){
return (
<div className="counter">
<span>{this.props.count}</span>
<button onClick={ this.onIncrease }>Increase</button>
</div>
);
},
onIncrease: function(){
// Hit the button will just emit an event
var e = document.createEvent('Event');
e.initEvent('zanzibar', true, true);
this.getDOMNode().dispatchEvent( e );
}
});
// Our reaction
var increaseReaction = function( e ){
store.count++;
// The ideal store would trigger a change event,
// our store is a common object, so we are going to
// refresh the page for demonstration purposes
React.render( <Counter count={ store.count } />, document.getElementById('alpha') );
}
document.addEventListener( 'zanzibar', increaseReaction, false );
var CounterRep = React.createClass({
render: function(){
return (
<div className="counterrep">
<span>{this.props.count}</span>
</div>
);
},
onIncrease: function(){
// Hit the button will just emit an event
var e = document.createEvent('Event');
e.initEvent('counterrep', true, true);
this.getDOMNode().dispatchEvent( e );
}
});
var increaseRepReaction = function( e ){
// The ideal store would trigger a change event,
// our store is a common object, so we are going to
// refresh the page for demonstration purposes
React.render( <CounterRep count={ store.count } />, document.getElementById('beta') );
}
document.addEventListener( 'zanzibar', increaseRepReaction, false );
React.render( <Counter count={ store.count } />, document.getElementById('alpha') );
React.render( <CounterRep count={ store.count } />, document.getElementById('beta') );</script></body>
</html>
Raw
jsbin.yojoyuvufi.css
.selected {
background: #EFE;
}
Raw
jsbin.yojoyuvufi.js
// A simple store
var store = {count: 0};
// Let's create a counter component that we can use
// in all of our projects
var Counter = React.createClass({displayName: 'Counter',
render: function(){
return (
React.createElement("div", {className: "counter"},
React.createElement("span", null, this.props.count),
React.createElement("button", {onClick: this.onIncrease}, "Increase")
)
);
},
onIncrease: function(){
// Hit the button will just emit an event
var e = document.createEvent('Event');
e.initEvent('zanzibar', true, true);
this.getDOMNode().dispatchEvent( e );
}
});
// Our reaction
var increaseReaction = function( e ){
store.count++;
// The ideal store would trigger a change event,
// our store is a common object, so we are going to
// refresh the page for demonstration purposes
React.render( React.createElement(Counter, {count: store.count}), document.getElementById('alpha') );
}
document.addEventListener( 'zanzibar', increaseReaction, false );
var CounterRep = React.createClass({displayName: 'CounterRep',
render: function(){
return (
React.createElement("div", {className: "counterrep"},
React.createElement("span", null, this.props.count)
)
);
},
onIncrease: function(){
// Hit the button will just emit an event
var e = document.createEvent('Event');
e.initEvent('counterrep', true, true);
this.getDOMNode().dispatchEvent( e );
}
});
var increaseRepReaction = function( e ){
// The ideal store would trigger a change event,
// our store is a common object, so we are going to
// refresh the page for demonstration purposes
React.render( React.createElement(CounterRep, {count: store.count}), document.getElementById('beta') );
}
document.addEventListener( 'zanzibar', increaseRepReaction, false );
React.render( React.createElement(Counter, {count: store.count}), document.getElementById('alpha') );
React.render( React.createElement(CounterRep, {count: store.count}), document.getElementById('beta') );
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment