var Baobab = require('baobab');

var store = new Baobab({
  items: []
}, {
  shiftReferences: true
});

var AppComponent = React.createClass({
  render: function () {
    return (
      <h1>Hello app, you have {this.props.store.items.length} left</h1>
    );
  }
});

var render = function () {
  React.render(<AppComponent store={store.get()})/>, document.body);
};
store.on('update', render);

var Baobab = require('baobab');

var store = new Baobab({
  items: []
}, {
  shiftReferences: true
});

var WrapperComponent = React.createClass({
  childContextTypes: {
    store: React.PropTypes.object
  },
  getChildContext: function () {
    return {
      store: this.props.store
    };
  },
  render: function () {
    return <AppComponent/>
  }
});

var AppComponent = React.createClass({
  contextTypes: {
    store: React.PropTypes.object
  },
  render: function () {
    return (
      <h1>Hello app, you have {this.context.store.items.length} left</h1>
    );
  }
});

var render = function () {
  React.render(<WrapperComponent store={store.get()})/>, document.render);
};
store.on('update', render);

var React = require('react');
var Baobab = require('baobab');
var WrapperComponent = require('./AppWrapper.js');

var store = new Baobab({
  items: []
}, {
  shiftReferences: true
});

// As you can see we are not using store.get(), but passing the actual store
React.render(<WrapperComponent store={store})/>, document.render);

var React = require('react');
var WrapperComponent = require('./app/AppWrapper.js');

// We just create a normal object and inject that
var store = {
  items: []
};

// We will see later what we will do with this html
var html = React.renderToString(<WrapperComponent store={store})/>);

var React = require('react');
var AppComponent = require('./AppComponent.js');

var WrapperComponent = React.createClass({
  childContextTypes: {
    store: React.PropTypes.object
  },
  getChildContext: function () {
    return {
      store: this.props.store
    };
  },
  render: function () {
    return <AppComponent/>
  }
});
module.exports = WrapperComponent;

var React = require('react');
var ContextMixin = require('./ContextMixin.js');

var SomeComponent = React.createClass({
  mixins: [ContextMixin],
  cursors: {
    list: ['admin', 'list']
  },
  render: function () {
  
    // Notice we point to the state and not the context
    return (
      <h1>There are {this.state.list.length} items in this list</h1>
    );
  }
});
module.exports = SomeComponent;

var React = require('react/addons');

// We have to know if we are on the client or the server
var isBrowser = !(global && Object.prototype.toString.call(global.process) === '[object process]');

var ContextMixin = {
  
  // We add the PureRenderMixin for optimized rendering
  mixins: [React.addons.PureRenderMixin],
  
  // We grab the store from the context
  contextTypes: {
    store: React.PropTypes.object
  },
  componentWillMount: function () {

    if (!this.context || !this.context.store) {
      throw new Error('You have to pass a store to you app wrapper');
    }
    
    // If no cursors present, just return
    if (!this.cursors) {
      return;
    }

    // Prepare a map of listeners to
    // state update
    this.subscriptions = {};
    
    // This is where we create subscriptions to cursors so that
    // the component knows about changes
    var component = this;
    var createSubscription = function (key, cursor) {
      return function (value) {
        var state = {};
        state[key] = cursor.get();
        component.setState(state);
      };
    };

    // We go through the cursors
    var state = {};
    Object.keys(this.cursors).forEach(function (cursorKey) {

      // If we are in the browser we move the current state of the
      // cursor over to the state object, using the key defined on
      // the cursor as the key on our state object. We also register
      // a listener for state changes
      if (isBrowser) {

        var cursor = this.context.store.select(this.cursors[cursorKey]);
        var callback = createSubscription(cursorKey, cursor)
        state[cursorKey] = cursor.get();
        this.subscriptions[cursorKey] = {
          cursor: cursor,
          callback: callback
        };
        cursor.on('update', callback);

      // If we are on the server we use the same cursor path defined.
      // But instead of using the Baobab API, we use the path to drill 
      // into the state object and set the state
      } else {

        var path = this.cursors[cursorKey];
        var value = path.reduce(function (contextPath, pathKey, index) {
          return contextPath[pathKey];
        }, this.context.store);
        state[cursorKey] = value;

      }

    }, this);
    
    // Then we actually put that state on the component
    this.setState(state);

  },
  
  // Unregisters listeners of state change
  componentWillUnmount: function () {
    Object.keys(this.subscriptions).forEach(function (subscription) {
      this.subscriptions[subscription].cursor.off('update', subscription.callback);
    }, this);
  }
};
module.exports = ContextMixin;

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8"/>
  </head>
  <body>
    {{APP}}
    <script>
      window.store = {{STORE}}
    </script>
    <script src="app.js"></script>
  </body>
</html>

// We make jsx syntax available to node
require('node-jsx').install({extension: '.jsx'})

var express = require('express');
var fs = require('fs');
var path = require('path');
var React = require('react');

// We use a factory as our main server file does not support JSX, only required files
var AppWrapper = React.createFactory(require('./app/AppWrapper.jsx'));

// We fire up an express server
var app = express();

// We read the contents of an HTML file we have
var index = fs.readFileSync(path.resolve(__dirname, 'index.html')).toString();

app.get('/', function (req, res) {

  // First we build up the contents of the store. This could be fetching database stuff
  // or whatever
  buildStoreContent()
    .then(function (store) {
    
      // We render the application to an HTML string, passing in the store
      var app = React.renderToString(AppWrapper({store: store}));
      
      // We replace our placeholders with both the app html itself and the state of the store. 
      // You might prefer loading the store state with ajax after initial page load in case 
      // it is quite large. It is a balance you have to decide
      var html = index.replace('{{APP}}', app).replace('{{STORE}}', JSON.stringify(store));
      
      res.type('html');
      res.send(html);
    });

});
app.listen(3000);

var React = require('react');
var Baobab = require('baobab');

// Coponent uses our ContextMixin
var WrapperComponent = require('./app/WrapperComponent.jsx');

// We grab the state from the window
var store = new Baobab(window.store, {
  shiftReferences: true
});

React.render(<WrapperComponent store={store}/>, document.render);

var React = require('react');
var WrapperComponent = React.createClass({
  childContextTypes: {
    store: React.PropTypes.object,
    actions: React.PropTypes.object
  },
  getChildContext: function () {
    return {
      store: this.props.store,
      actions: this.props.actions
    };
  },
  render: function () {
    return <AppComponent/>
  }
});
module.exports = WrapperComponent;

var React = require('react/addons');
var isBrowser = !(global && Object.prototype.toString.call(global.process) === '[object process]');

var ContextMixin = {
  mixins: [React.addons.PureRenderMixin],
  
  // Adding actions
  contextTypes: {
    store: React.PropTypes.object,
    actions: React.PropTypes.actions
  },
  componentWillMount: function () {

    if (!this.context || !this.context.store) {
      throw new Error('You have to pass a store to you app wrapper');
    }
    
    // We reference the actions on the component itself, to
    // shorten the syntax. this.actions, instead of this.context.actions
    this.actions = this.context.actions;
    
    // ... rest of mixin

  },
  componentWillUnmount: function () { ... }
};
module.exports = ContextMixin;

var React = require('react');
var Baobab = require('baobab');
var WrapperComponent = require('./WrapperComponent.jsx');

// Just looking at window.store
window.store; // { list: [] }

// We grab the state from the window
var store = new Baobab(window.store, {
  shiftReferences: true
});

// We create an action to update the store
var actions = {
  addItem: function (item) {
    store.select('list').push(item);
  }
};

// And we pass those actions down
React.render(<WrapperComponent store={store} actions={actions}/>, document.render);

var React = require('react/addons');
var ContextMixin = require('./ContextMixin.js');

var ListComponent = React.createClass({
  mixins: [ContextMixin, React.addons.LinkedStateMixin],
  cursors: {
  
    // We grab the list from the store and put as "list"
    // on the components state object. We also listen to
    // any changes to this list value
    list: ['list']
  },
  
  // We return an initial state for our input that
  // will be the interaction of adding a new item to
  // the list
  getInitialState: function () {
    return {
      title: ''
    };
  },
  
  // We just point to this.actions and run
  // the method
  addItem: function () {
    this.actions.addItem(this.state.title);
    this.setState({
      title: ''
    });
  },
  renderItem: function (item) {
    return <li>{item}</li>
  },
  render: function () {
    return (
      <div>
        <form onSubmit={this.addItem}>
          <input valueLink={this.linkState('title')}/>
        </form>
        <ul>
          {this.state.list.map(this.renderItem)}
        </ul>
      </div>
    );
  }
});

module.exports = ListComponent;