JSFiddle - React, Tailwind, and code Playground

by bsodmike

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.1/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/EventEmitter/4.2.11/EventEmitter.js"></script>
<body>
    <button type='button' id="trigger--button">Click me</button>
    <div id="example"></div>
</body>

JavaScript

$(function () {
    var globalEmitter = new EventEmitter();

    var triggerEmitter = function (payload) {
        console.log("Event payload %O", payload);
        globalEmitter.emit('change', payload);
    };

    var makeChangeEventMixin = function (emitter) {
        return {
            componentDidMount: function () {
                emitter.addListener('change', this.__makeChangeEventMixin_handler_);
            },
            componentWillUnmount: function () {
                emitter.removeListener('change', this.__makeChangeEventMixin_handler_);
            },
            __makeChangeEventMixin_handler_: function (payload) {
                console.log('__makeChangeEventMixin_handler_ fired with payload=%O', payload);
                this.replaceState(payload);
            }
        };
    };

    var UIComponent = React.createClass({
        mixins: [makeChangeEventMixin(globalEmitter)],
        getInitialState: function () {
            return {
                data: {
                    name: ''
                }
            };
        },
        render: function () {
            var data = this.state.data;

            console.log('Data: %O', data);
            return React.DOM.div(null,
            React.DOM.span(null, "Hi there '" + data.name + "'"))
        }
    });

    React.render(
    React.createElement(UIComponent),
    document.getElementById('example'));

    $('#trigger--button').on('click', function (e) {
        e.preventDefault();
        triggerEmitter({
            data: {
                name: "Mike"
            }
        })
    });
});