React Base Fiddle (JSX)

Starting point for creating JSFiddles with React. This uses React with Addons.

by spoike

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.1/JSXTransformer.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.1/react-with-addons.js"></script>
<script src="//cdn.jsdelivr.net/refluxjs/0.2.7/reflux.min.js"></script>
<script src="https://facebook.github.io/react/js/jsfiddle-integration.js"></script>

<div id="container">
    <!-- This element's contents will be replaced with your component. -->
</div>

JavaScript 1.7

// The Actions
var Actions = Reflux.createActions(["hello"]);

// The Store
var HelloStore = Reflux.createStore({
    listenables: [Actions],
    init: function() {
      this.state = {label: "Mike"};
    },
    onHello: function(str) {
      this.state.label = str;
      this.trigger(this.state);
    },
    getInitialState: function() {
        return this.state;
    }
});

// Mixin Factory to get the Store context from React 0.13.1
var getStoreContext = function() {
    function getStores(instance) {
      return instance._reactInternalInstance._context.stores()
    }
    var unsubs = [];
    
    return {
      componentWillMount: function() {
        var stores = getStores(this);
        var state = {};
        for (var key in stores) {
          state[key] = stores[key].getInitialState();
        }
        this.setState(state);
      },
      componentDidMount: function() {
        var stores = getStores(this);
        for (var key in stores) {
          console.log(key);
          var unsub = stores[key].listen(function(data){
            var state = {};
            state[key] = data;
            this.setState(state);
          }, this);
          unsubs.push(unsub);
        }
      },
      componentWillUnmount: function() {
        for (var unsub in unsubs) {
          unsub();
        }
      }
    };
};

// The Reflux Component
var RefluxComponent = React.createClass({
    childContextTypes: {
        stores: React.PropTypes.func
    },
    getStores: function() {
      return this.props.connect;
    },
    getChildContext: function() {
        return { stores: this.getStores };
    },
    render: function() {
        var children = this.props.children;
        if (!children) {
          return false;
        }
        if (this.props.children.length 
            && this.props.children.length > 1) {
          return <div>{this.props.children}</div>;
        }
        return this.props.children;
    }
});

// The component backed with a Reflux store...