JSFiddle - React, Tailwind, and code Playground

by vjeux

HTML

<script src="http://fooo.fr/~vjeux/fb/react-debug/react.js"></script>
<script src="http://react.zpao.com/builds/master/latest/JSXTransformer.js"></script>
<script src="http://fb.me/react-js-fiddle-integration.js"></script>

<button id="toggle" onclick="toggle()">Toggle</button>
<div id="container"></div>

JavaScript 1.7

/** @jsx React.DOM */

var NodeA = React.createClass({
  render: function() {
    return <div>1</div>;
  }
});
var NodeB = React.createClass({
  render: function() {
    return <div>1</div>;
  }
});

var BeforeAfter = React.createClass({
  render: function() {
    if (this.props.version === 'before') {
      return <div style={{color: 'red'}} />;
    } else {
      return <div style={{fontWeight: 'bold'}} />;
    }
  }
});

var container = document.getElementById('container');
var currentVersion = 'after';
toggle();

function toggle() {
  currentVersion = currentVersion === 'before' ? 'after' : 'before';
  React.renderComponent(<BeforeAfter version={currentVersion} />, container);
}