Complete ReactJS package

Only ReactJS gives you DOM rendering, but Facebook also created Flux

which gives you the architecture you are working in. Following the rules set by Flux, you now have a SPA with DOM rendering, data models, and communication between them.

Of course, the SPA you'll be building with Flux is self-contained. Flux doesn't go as far as providing you with the tools to make AJAX requests. You will need another library for this. However, the NodeJS community is so full of AJAX implementations that I might have preferred it.

superagent

is quite popular. (This is what I am using.) You may have noticed that it does not support promises, so you can also check superagent-bluebird-promise

which wraps superagent

with the promises library bluebird

.

Another note, if you're going to be using Flux, I also recommend pulling out one of the growing number of wrapper libraries to help you shrink the boilerplate. Check it out Reflux

.

The complete cycle might look like this:

RecordList.jsx

const React = require('react');
const Reflux = require('reflux');

const RecordStore = require('../stores/RecordStore');
const RecordActions = require('../actions/RecordActions');

const RecordList = React.createClass({
    mixins: [
        // auto-magically create event listeners to state change to re-render
        Reflux.connect(RecordStore)
    ],

    // There is no `getInitialState()` here, but the one in `RecordStore` is inherited.

    // load the initial data
    componentDidMount: function () {
        RecordActions.load();
    },

    // render records as a list
    render: function () {
        return (
            <li>
                {
                    this.state.records.map(function (record) {
                        return <ul>{record.name}</ul>;
                    })
                }
            </li>
        );
    }
});

module.exports = RecordList;

      

        
        
        
      

    

RecordActions.js

const Reflux = require('reflux');
const request = require('superagent-bluebird-promise');

const RecordActions = Reflux.createActions({
    // create an action called 'load' and create child actions of 'completed' and 'failed'
    load: {asyncResult: true}
});

// set up promise for loading records
RecordActions.load.listenAndPromise(() =>
        request.get('/records')
            .type('application/json')
            .then(res => res.body)
);

module.exports = RecordActions;

      

        
        
        
      

    

RecordStore.js

const Reflux = require('reflux');
const RecordActions = require('../actions/RecordActions');

/**
 * storage for record data
 */
const RecordStore = Reflux.createStore({
    // listen for events from RecordActions (Reflux)
    listenables: RecordActions,

    init: function () {
        this.data = {
            records: []
        };
    },

    // facilitate initializing component state with store data
    getInitialState: function () {
        return this.data;
    },

    /*
     * all records
     */
    getRecords: function () {
        return this.data.records;
    },

    // handle successful load of records
    onLoadCompleted: function (response) {
        this.data.records = response;
        this.trigger(this.data);
    },

    // handle failure to load records
    onLoadFailed: function (err) {
        console.error('Failed to load records', err.toString());
    }
});

module.exports = RecordStore;