How to use react-async - 10 common examples

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

exports = module.exports = function(options, callback) {
    var context = options.context || {};
    var callback = callback || function(err) {
        debug(err);
    };
    var clientScripts = options.clientScripts || [];
    var component = options.component || function() {
        debug('no component passed!');
    };

    // application data (this has the same effect as handlebars context, except for react components)
    var renderedComponent = component(context);

    // render the react markup to a string
    ReactAsync.renderComponentToStringWithAsyncState(renderedComponent, function(err, markup, data) {
        if (!markup) {
            debug(util.inspect(err));
            return callback('could not render markup - check server console');
        }

        // add doctype to markup (not possible in jsx - so it needs to be done dirty)
        markup = '' + markup;
        callback(err, options.staticPage ? markup : ReactAsync.injectIntoMarkup(markup, data, clientScripts));
    });
};

function(err, markup, data) {
        if (err) return next(err);

        // Injects the data we have into the markup thats served
        // So once the app starts in browser, it has the same data
        markup = ReactAsync.injectIntoMarkup(markup, data, [props.bundle])

        // Return html with optional wrapper function
        res.send(wrapper(markup));
      }
    );

ReactAsync.renderComponentToStringWithAsyncState(renderedComponent, function(err, markup, data) {
        if (!markup) {
            debug(util.inspect(err));
            return callback('could not render markup - check server console');
        }

        // add doctype to markup (not possible in jsx - so it needs to be done dirty)
        markup = '' + markup;
        callback(err, options.staticPage ? markup : ReactAsync.injectIntoMarkup(markup, data, clientScripts));
    });
};

const Applications: React.FunctionComponent = () => {
  const { t } = useTranslation('applications')
  useDocumentTitle(t('listing.page_title'))

  const columns = [
    'Name',
    'State',
    'Account',
    'Plan',
    'Created at'
  ]
  let rows

  const { data, isPending } = useFetch(
    '/applications',
    { headers: { Accept: 'application/json' } }
  )

  if (!isPending && data) {
    const applications = data.applications.application // TODO: Check the server side xml2json
    const applicationsArray = Array.isArray(applications) ? applications : [{ ...applications }]

    rows = applicationsArray.map(
      (app: any) => ({
        cells: [
          app.name,
          app.state,
          'Developer',
          app.plan.name,
          app.created_at