JSFiddle - React, Tailwind, and code Playground

by vjeux

HTML

<script src="http://fb.me/react-js-fiddle-integration.js"></script>

JavaScript 1.7

/** @jsx React.DOM */

var DoubleEncoding = React.createClass({
    render: function() {
        return (
            <div>
                {this.props.first}
                {' &middot; '}
                {this.props.second}
            </div>
        );
    }
});
 
var Dangerous = React.createClass({
    render: function() {
        return (
            <div>
                {this.props.first}
                <span dangerouslySetInnerHTML={{__html: ' &middot; '}} />
                {this.props.second}
            </div>
        );
    }
});

// http://www.fileformat.info/info/unicode/char/00b7/index.htm

var Unicode = React.createClass({
    render: function() {
        return (
            <div>
                {this.props.first}
                {' \u00b7 '}
                {this.props.second}
            </div>
        );
    }
});
 
var FromCharCode = React.createClass({
    render: function() {
        return (
            <div>
                {this.props.first}
                {' ' + String.fromCharCode(183) + ' '}
                {this.props.second}
            </div>
        );
    }
});
 
React.renderComponent(
    <div>
        <DoubleEncoding first="Hello" second="DoubleEncoding" />
        <Dangerous first="Hello" second="Dangerous" />
        <Unicode first="Hello" second="Unicode" />
        <FromCharCode first="Hello" second="FromCharCode" />
    </div>,
    document.body
);