React Base Fiddle (JSX)

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

by jrunning

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.0.js"></script>
<script src="https://fb.me/react-dom-0.14.0.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

var PropTypes = React.PropTypes;

var STARTS_WITH_UPPERCASE_LETTER_EXPR = /^[A-Z]/;

function validObjectKeys(keys, fullPropName, componentName) {
	var key;
  var fullPropNameWithKey;

  for (var i = 0; i < keys.length; i++) {
  	key = keys[i];
    if (STARTS_WITH_UPPERCASE_LETTER_EXPR.test(key)) { continue; }
    
    fullPropNameWithKey = fullPropName + '.' + key;
    return new Error(
    	"Invalid key `" + fullPropNameWithKey + "` supplied to `" + componentName + "`; " +
      "expected to match " + STARTS_WITH_UPPERCASE_LETTER_EXPR + "."
    );
  }

  return null;
}

function validObjectValues(obj, propFullName, componentName) {
	var keys = Object.keys(obj);
  if (keys.length === 0) { return null; }
  
	var shape = {};
  var props = {};
  props[propFullName] = obj;

  // (props, propName, componentName, location, propFullName)

  keys.forEach(function (key) {
  	shape[key] = PropTypes.number;
  });

	return PropTypes.shape(shape)(props, propFullName, componentName, 'prop', propFullName);
}

function validArrayItem(propValue, idx, componentName, location, fullPropName) {
  var obj = propValue[idx];
  var props = {};
  props[fullPropName] = obj;

  var isObjectError = PropTypes.object(props, fullPropName, componentName, location);
  if (isObjectError) { return isObjectError; }

  var validObjectKeyError = validObjectKeys(Object.keys(obj), fullPropName, componentName);
  if (validObjectKeyError) { return validObjectKeyError; }
  
  var validObjectValuesError = validObjectValues(obj, fullPropName, componentName);
  if (validObjectValuesError) { return validObjectValuesError; }
  
  return null;
}

var Hello = React.createClass({
  propTypes: {
    other: PropTypes.arrayOf(React.PropTypes.shape({ foo: PropTypes.string })),
  	someArray: PropTypes.arrayOf(validArrayItem).isRequired
  },
    
  render: function() {
    return <div>Hello</div>;
  }
});
 
var objs = [
	{ foo: 1, bar: 2 },
  { baz: 3, qux: 4 }
];

ReactDOM.render(
	<Hello someArray={[ { Baz: false }...