JSFiddle - React, Tailwind, and code Playground

by Samuel Mendenhall

HTML

<script src="http://requirejs.org/docs/release/2.1.14/minified/require.js"></script>

CoffeeScript

define "moduleMixin", [], () ->
    include: (obj) ->
        for key, value of obj when key not in ['extended', 'included']
            # Assign properties to the prototype
            @::[key] = value
        obj.included?.apply(@)
        @

define "sumMixin", [], () ->
    sum: (a, b) -> a + b
        
define "multMixin", [], () ->
    mult: (a, b) -> a * b
        
        
define "someController", ['moduleMixin', 'sumMixin', 'multMixin'], (Module, SumMixin, MultMixin) ->
    class SomeController extends Module
        @include.call(@, SumMixin)
        @include.call(@, MultMixin)
        constructor: () -> undefined
    

require ["someController"], (SomeController) ->
    {ul, li, div, h4} = React.DOM
    
    controller = new SomeController()
    
    ExampleView = React.createClass
        render: ->
            (div {}, [
                (h4 {}, ["Requirejs + Coffeescript + React Example"])
                (ul {}, [
                    (li {}, ['Sum of 1 and 2 is: ' + @props.sum(1, 2)]),
                    (li {}, ['Mult of 5 and 6 is: ' + @props.mult(5, 6)]),                
                ])   
            ])
                        
    opts =
        sum: controller.sum
        mult: controller.mult
    
    React.renderComponent (ExampleView opts), document.body