How to use the react-async.Mixin function in react-async

var Header = require('client/modules/components/common/header');
var ClientScripts = require('client/modules/components/common/client-scripts');

// custom components
var TodoApp = require('client/modules/components/todo-app');
var CommentBox = require('client/modules/components/comment-box');
var Avatar = require('client/modules/components/avatar');
var Counter = require('client/modules/components/counter');
var LikeButton = require('client/modules/components/like-button');
var Ticker = require('client/modules/components/ticker');
var Time = require('client/modules/components/time');
var FilterableProductTable = require('client/modules/components/filterable-product-table');

var App = React.createClass({

    mixins: [ReactAsync.Mixin],

    getInitialStateAsync: function(callback) {
        callback(null, this.props); // set the input props as state (equal to 'return this.props' in getInitialState, but async)
    },

    componentDidMount: function() {
        // intialize socket.io
        sockets(io);
        console.log(config);
    },

    render: function() {
        return (

'use strict';

var React = require('react');

var ReactAsync = require('react-async');

var OverlayMixin = require('react-bootstrap').OverlayMixin;
var Modal = require('react-bootstrap').Modal;
var Button = require('react-bootstrap').Button;
var Form = require('react-bootstrap').Form;
var Input = require('react-bootstrap').Input;

// Our custom component is managing whether the Modal is visible
module.exports = React.createClass({
    mixins: [OverlayMixin, ReactAsync.Mixin],

    getInitialStateAsync: function(callback) {
        callback(null, {
            submittable: true,
            submitText: 'Submit',
            isModalOpen: false,
            inputs: {}
        });
    },

    componentDidMount: function() {
        this.props.api.profile.get(function(err, user) {
            if (err) return console.log(err);
            
            this.setState({
                inputs: {

var sockets = require('client/modules/sockets/home');

// common components
var Head = require('client/modules/components/common/head');
var Header = require('client/modules/components/common/header');
var ClientScripts = require('client/modules/components/common/client-scripts');

// custom components
var Counter = require('client/modules/components/counter');
var AccountData = require('client/modules/components/account-data');
var FlashMessages = require('client/modules/components/flash-messages');
var ProfileSettings = require('client/modules/components/profile-settings');

var App = React.createClass({

    mixins: [ReactAsync.Mixin],

    getInitialStateAsync: function(callback) {
        callback(null, this.props); // set the input props as state (equal to 'return this.props' in getInitialState, but async)
    },

    componentDidMount: function() {
        // intialize socket.io
        sockets(io);
        console.log(config);
    },

    render: function() {
        return (

// addons
var InfiniteScroll = require('react-infinite-scroll')(React);
var MasonryMixin = require('react-masonry-mixin');
var PackeryMixin = require('react-packery-mixin');
var Masonry = require('react-masonry-component')(React);

// options
var masonryOptions = {};

// sub-components
var Article = require('./article');

module.exports = React.createClass({
    displayName: 'ArticleBox',

    mixins: [ReactAsync.Mixin, MasonryMixin('masonryContainer', masonryOptions)],

    componentWillReceiveProps: function (nextProps) {
        if (nextProps.category !== this.props.category) {
            this.setState({
                page: 0,
                articles: [],
                hasMore: true
            });
        }
    },

    fetchNextArticles: function (page, perPage, callback) {
        this.props.api.entries.get({
            page: page,
            perPage: perPage,
            category: this.props.category

var React = require('react');
var ReactAsync = require('react-async');
var superagent = require('superagent');

// custom components
var ArticleBox = require('./modules/components/article-box');
var CategorySelecter = require('./modules/components/category-selecter');
var Head = require('./modules/components/head');
var Header = require('./modules/components/header');
var ExternalScripts = require('./modules/components/external-scripts');

// Main page component (this is asyncronous)
var App = React.createClass({
    displayName: 'MainApp',

    mixins: [ReactAsync.Mixin],

    getInitialStateAsync: function (callback) {
        callback(null, this.props); // set the input props as state (equal to 'return this.props' in getInitialState, but async)
    },

    changeCategory: function (category) {
        this.setState({ category: category });
    },

    // main rendering function (uses the state of the component, not the props)
    render: function() {
        return (
            
                
                
                    <header title="{this.state.title}"></header>

createClass: function(spec) {
    if (spec.routes)
      Router.setRoutes(spec.routes);

    var reactorSpec = {
      mixins: [
        Router,
        PushState,
        ReactAsync.Mixin
      ],

      statics: spec.statics,
      routes: spec.routes,

      shouldComponentUpdate: function() {
        this.shouldUpdate;
      },

      // Handles initial page load
      getInitialStateAsync: function(cb) {
        this.setRoute(this.props.path);
        this.getStateFromPage(cb);
      },

      // Handles subsequent page loads

/**
 * @jsx React.DOM
 */

var React = require('react');
var ReactAsync  = require('react-async');
var ReactRouter = require('react-router-component');
var PostItem = require('./postItem');
var api = require('../../../../lib/apiCache');
var isServer = require('../../../../lib/isServer');



var Posts = React.createClass({
  mixins: [ReactAsync.Mixin],

  propTypes: {itemCount: React.PropTypes.number},

  getInitialStateAsync: function(callback) {
    api.get('/api/posts', function(err, res) {
      if (err) return callback(err);
      var initialState = {posts: res.body.map(function(post) {
        return {linkpost: post.meta.linkpost, slug: post.slug, title: post.meta.title, date: post.meta.date};
      })};
      return callback(null, initialState);
    });
  },


 render: function() {
    var posts = this.state.posts ? this.state.posts.map(function(post, i, posts) {

/**
 * @jsx React.DOM
 */

var React = require('react');
var ReactAsync = require('react-async');
var superagent  = require('superagent');

var Link = require('react-router-component').Link;
var PhoneDetails = require('./PhoneDetails');

var PhonePage = React.createClass({
  mixins: [ReactAsync.Mixin],

  getPhoneInfo: function(phoneName, cb) {
    superagent.get(
      'http://localhost:3000/api/phones/' + phoneName,
      function(err, res) {
        cb(err, res ? {phone: res.body} : null);
      });
  },

  getInitialStateAsync: function(cb) {
    this.getPhoneInfo(this.props.phone, cb);
  },

  componentWillReceiveProps: function(nextProps) {
    if (this.props.phone !== nextProps.phone) {
      this.getPhoneInfo(nextProps.phone, function(err, info) {

var Link        = ReactRouter.Link;

var MainPage = React.createClass({

  render: function() {
    return (
      <div>
        <h1>Hello, anonymous!</h1>
        <p>Login</p>
      </div>
    );
  }
});

var UserPage = React.createClass({
  mixins: [ReactAsync.Mixin],

  statics: {
    getUserInfo: function(username, cb) {
      /*
       * The use of localhost URLs work as long as the browser is running on the same machine as the server,
       * a typical development setup.
       * As soon as you want to run this code on public facing machines, each server will need to know it's 
       * own hostname and port (which is ugly).
       * Relative paths cannot work for serverside rendering, as that has no page context.
       * More discussion of this issue, and solutions, can be found at:
       *   https://github.com/andreypopp/react-async/issues/34
       *   http://stackoverflow.com/questions/26463924/getting-rid-of-localhost3000-urls-for-reactasync
       */
      superagent.get(
        'http://localhost:3000/api/users/' + username,
        function(err, res) {

ReactMount.allowFullPageRender = true;

var MainPage = React.createClass({

  render: function() {
    return (
      <div>
        <h1>Hello, anonymous!</h1>
        <p>Login</p>
      </div>
    );
  }
});

var UserPage = React.createClass({
  mixins: [ReactAsync.Mixin],

  getInitialStateAsync: function(cb) {
    superagent.get(
      'http://localhost:3000/api/users/' + this.props.username,
      function(err, res) {
        cb(err, res ? res.body : null);
      });
  },

  render: function() {
    return (
      <div>
        <h1>Hello, {this.state.name}!</h1>
        <p>Logout</p>
      </div>
    );