React Base Fiddle (JSX)

Starting point for creating JSFiddles with React. This uses React with Addons.

by codemeasandwich

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.js"></script>
<script src="https://fb.me/react-with-addons-0.14.6.js"></script>
<script src="https://fb.me/react-dom-0.14.6.js"></script>
<script src="https://facebook.github.io/react/js/jsfiddle-integration-babel.js"></script>

<div id="container">
    <!-- This element's contents will be replaced with your component. -->
</div>

JavaScript 1.7

// http://jsfiddle.net/bgrins/YUKSu/
// http://jsfiddle.net/km7nE/41/

//=====================================================
//=========================================== Utilities
//=====================================================

function randomString(length, chars) {
    var result = '';
    for (var i = length; i > 0; --i) result += chars[Math.floor(Math.random() * chars.length)];
    return result;
}

function lookup(num){
 //console.log("lookup",num)
 //console.log("lookup",typeof num)
	switch(num){
   case "0": return "#000000"	// Black
    break;
   case "1": return "#00FFFF"	// Aqua
    break;
   case "2": return "#0000FF"	// Blue
    break;
   case "3": return "#FF00FF" // Fuchsia
    break;
   case "4": return "#808080"	// Gray
    break;
   case "5": return "#008000"	// Lime
    break;
   case "6": return "#00FF00"	// Green
    break;
   case "7": return "#800000" // Maroon
    break;
   case "8": return "#000080"	// Navy
    break;
   case "9": return "#808000"	// Olive
    break;
   case "a":
   case "A": return "#800080"	// Purple
    break;
   case "b":
   case "B": return "#FF0000" // Red
    break;
   case "c":
   case "C": return "#C0C0C0"	//Silver
    break;
   case "d":
   case "D": return "#008080"	//Teal
    break;
   case "e":
   case "E": return "#FFFF00" // Yellow
    break;
   case "f":
   case "F":
   default:
   return "#FFFFFF"	// White
    break;
	}
}

//=====================================================
//=========================================== small BOX
//=====================================================

Rect = React.createClass({
  render: function() {
  
  var x = this.props.x, 
      y = this.props.y, 
   size = this.props.size, 
  color = this.props.color;
  
  return <rect x={x} y={y} width={size} height={size} style={{fill:lookup(color)}} ></rect>
  
  }
});

//=====================================================
//============================================= big...