JSFiddle - React, Tailwind, and code Playground

by evan

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="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.0.rc.1/handlebars.js"></script>
<script src="http://fb.me/react-js-fiddle-integration.js"></script>

<h1>React</h1>
<div class="templated" id="react-container"></div>

<h1>Handlebars</h1>
<div class="templated" id="handlebars-container"></div>

<h1>jQuery .text()</h1>
<div class="templated" id="jquery-text-container"></div>

<h1>jQuery .html()</h1>
<div class="templated" id="jquery-html-container"></div>

<div>
  <textarea id="text-input"></textarea>
</div>
<button>Update</button>

CSS

.templated {
  border: 3px dashed #ccc;
  width: 400px;
  height: 50px;
  overflow: auto;
}

#text-input {
  width: 400px;
  height: 75px;
  margin-top: 15px;
}

JavaScript 1.7

var stringWithHTML = "<b>bold</b>";
update(stringWithHTML);

function update(withText) {

  // React
  React.render(<div>{withText}</div>, document.getElementById('react-container'));

  // Handlebars
  var handlebarsTemplate = '<div>{{data}}</div>';
  var compiledHandlebarsTemplate = Handlebars.compile(handlebarsTemplate);
  document.getElementById('handlebars-container').innerHTML = compiledHandlebarsTemplate({data: withText});

  // jQuery text
  $('#jquery-text-container').text(withText);

  // jQuery html
  $('#jquery-html-container').html(withText);

}

$('#text-input').val(stringWithHTML);

$('button').on('click', function () {
	update($('#text-input').val());
});