requirebin sketch

index.js

// require() some stuff from npm (like you were using browserify)
// and then hit Run Code to run it on the right
var Emitter = require('component-emitter');

var ItemsStore = Emitter({
  data: [{
    	name: "Skynet",
    	description: "Superior artificial intelligence"
  }],
  init: function(context){
    context.on('item:add', 
        this.addItem.bind(this));
    context.on('item:remove', 
        this.removeItem.bind(this));
  },
  addItem: function(data){
    this.data.push(data);
    this.emit('change', this.data);
  },
  removeItem: function(id){
    this.data.splice(id,1);
    this.emit('change', this.data);
  },
  get: function(){
    return this.data;
  }
})

var context = Emitter({});

ItemsStore.init(context);

var ItemsComp = React.createClass({
  getInitialState: function(){
    return {
      items: ItemsStore.get()
    }
  },
  componentDidMount: function() {
    ItemsStore.on('change', this.change);
  },
  change: function(items){
    if(!this.isMounted()) return;
    this.setState({items: items});
  },
  render: function () {
     var Items = this.state.items.map(function(item){
      	return React.createElement("div", null, 
        	React.createElement("h5", null, item.name), 
            React.createElement("p", null, item.description)
        )
      })
    
    return React.createElement("div", null, 
      	Items
      );
}
});

React.render(React.createElement(ItemsComp), document.getElementById('content'));

// TEST PLAYGROUND


context.emit('item:add', {
  name: "Eldar Djafarov",
  description: "speaker"
});

minified.js

require=function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s}({"component-emitter":[function(require,module,exports){module.exports=Emitter;function Emitter(obj){if(obj)return mixin(obj)}function mixin(obj){for(var key in Emitter.prototype){obj[key]=Emitter.prototype[key]}return obj}Emitter.prototype.on=Emitter.prototype.addEventListener=function(event,fn){this._callbacks=this._callbacks||{};(this._callbacks["$"+event]=this._callbacks["$"+event]||[]).push(fn);return this};Emitter.prototype.once=function(event,fn){function on(){this.off(event,on);fn.apply(this,arguments)}on.fn=fn;this.on(event,on);return this};Emitter.prototype.off=Emitter.prototype.removeListener=Emitter.prototype.removeAllListeners=Emitter.prototype.removeEventListener=function(event,fn){this._callbacks=this._callbacks||{};if(0==arguments.length){this._callbacks={};return this}var callbacks=this._callbacks["$"+event];if(!callbacks)return this;if(1==arguments.length){delete this._callbacks["$"+event];return this}var cb;for(var i=0;i<callbacks.length;i++){cb=callbacks[i];if(cb===fn||cb.fn===fn){callbacks.splice(i,1);break}}return this};Emitter.prototype.emit=function(event){this._callbacks=this._callbacks||{};var args=[].slice.call(arguments,1),callbacks=this._callbacks["$"+event];if(callbacks){callbacks=callbacks.slice(0);for(var i=0,len=callbacks.length;i<len;++i){callbacks[i].apply(this,args)}}return this};Emitter.prototype.listeners=function(event){this._callbacks=this._callbacks||{};return this._callbacks["$"+event]||[]};Emitter.prototype.hasListeners=function(event){return!!this.listeners(event).length}},{}]},{},[]);var Emitter=require("component-emitter");var ItemsStore=Emitter({data:[{name:"Skynet",description:"Superior artificial intelligence"}],init:function(context){context.on("item:add",this.addItem.bind(this));context.on("item:remove",this.removeItem.bind(this))},addItem:function(data){this.data.push(data);this.emit("change",this.data)},removeItem:function(id){this.data.splice(id,1);this.emit("change",this.data)},get:function(){return this.data}});var context=Emitter({});ItemsStore.init(context);var ItemsComp=React.createClass({getInitialState:function(){return{items:ItemsStore.get()}},componentDidMount:function(){ItemsStore.on("change",this.change)},change:function(items){if(!this.isMounted())return;this.setState({items:items})},render:function(){var Items=this.state.items.map(function(item){return React.createElement("div",null,React.createElement("h5",null,item.name),React.createElement("p",null,item.description))});return React.createElement("div",null,Items)}});React.render(React.createElement(ItemsComp),document.getElementById("content"));context.emit("item:add",{name:"Eldar Djafarov",description:"speaker"});

package.json

{
  "name": "requirebin-sketch",
  "version": "1.0.0",
  "dependencies": {
    "component-emitter": "1.2.0"
  }
}

page-body.html

<!-- contents of this file will be placed inside the <body> -->
<div id="content"></div>

page-head.html

<!-- contents of this file will be placed inside the <head> -->
<script src="https://fb.me/react-with-addons-0.13.2.js"></script>

requirebin.md

made with requirebin