JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/nuclear-js/1.2.1/nuclear.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.2/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.2/react-dom.js"></script>
<div id='container'></div>
<div id='message'>no error</div>

CSS

div { border: 1px solid; }

#message{ color: red; margin-top: 20px; };

JavaScript

const badOrder = true;

const reactor = new Nuclear.Reactor({ debug: true });

reactor.registerStores({
  language: Nuclear.Store({
    getInitialState() {
      return Nuclear.toImmutable({
        loaded: false,
        strings: null,
      });
    },

    initialize() {
      this.on('LOAD', (state, strings) => {
        return state.merge(Nuclear.toImmutable({
          loaded: true,
          strings: strings,
        }));
      });
    }
  }),
});

const openGetter = ['language', 'loaded'];
const stringsGetter = ['language', 'strings'];

const App = React.createClass({
  mixins: [reactor.ReactMixin],
  
  getDataBindings() {
    if (this.props.badOrder){
      return {
        open: openGetter,
        strings: stringsGetter,
      };
    } else {
      return {
        strings: stringsGetter,
        open: openGetter,
      };
    }
  },
  
  render() {
    const content = this.state.open ? this.state.strings.get('mystring') : 'not loaded';
    return React.createElement('div', {}, content);
  },
});

const app = React.createElement(App, {badOrder});
ReactDOM.render(app, document.getElementById('container'));

try {
  reactor.dispatch('LOAD', {mystring: 'Hello World!'});
} catch(e) {
    document.getElementById('message').textContent = "error dispatching: " + e;
}