JSFiddle - React, Tailwind, and code Playground

by MikeAski

HTML

<script src="http://fb.me/react-with-addons-0.12.0.js"></script>
<script src="http://fb.me/JSXTransformer-0.12.0.js"></script>
<script src="http://fb.me/react-js-fiddle-integration.js"></script>
<script src="//cdn.jsdelivr.net/refluxjs/0.2.11/reflux.min.js"></script>

<span id='first'></span>
<span id='second'></span>

JavaScript 1.7

var TextActions = Reflux.createActions(['textChanged']);

var TextMixin = {
  init: function() {
    this.listenToMany(TextActions);
  },

  onTextChanged: function (t) {
    this.text = t;
console.log('TEXT CHANGED:', this.text);
    this.trigger(this.text);
  }
};

var Test = React.createClass({
  getInitialState: function () {
    this.store = Reflux.createStore({
      mixins: [ TextMixin ],
      text: this.props.text
    });

    return {
      value: this.props.text
    };
  },

  componentDidMount: function () {
    this.unsubscribe = this.store.listen(this.onTextChanged);
  },
  componentWillUnmount: function () {
    this.unsubscribe();
  },

  onTextChanged: function (text) {
    this.setState({
      value: text
    });
  },

  render: function() {
    return <input value={this.state.value} onChange={this.onTextChanged} />;
  },
    
  onTextChanged: function () {
    TextActions.textChanged($(this.getDOMNode(this)).val())
  }
});
 
React.render(<Test text="Hello" />, document.getElementById('first'));
React.render(<Test text="World" />, document.getElementById('second'));