React Base Fiddle (JSX)

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

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.js"></script>
<script src="https://npmcdn.com/react@latest/dist/react-with-addons.js"></script>
<script src="https://npmcdn.com/react-dom@latest/dist/react-dom.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

const propNames = [
  'className',
  'hidden',
  'checked',
  'download',
  'htmlFor',
  'foo',
]

const propInputs = [
  "",
  true,
  false,
  {foo: 'bar', baz: 5},
  ['foo', 'bar'],
  ...propNames,
];

const map = {
  'className': 'class',
  'htmlFor': 'for',
}

function fix(key, value) {
  let usekey = key;
  if (map[usekey]) {
    usekey = map[usekey];
  }
  if (Array.isArray(value)) {
    return `${usekey}="${value.join(' ')}"`;
  }
  if (value instanceof Number) {
    return `${usekey}="${value}"`;
  }
  if (value instanceof Object) {
    const val = Object.entries(value).map(([k, v]) => k + ':' + v).join(';');
    return `${usekey}="${val}"`;
  }
  if (!!value === value) {
    if (value) {
      return `${usekey}=""`;
    } else {
      return '';
    }
  }
  return `${usekey}="${value}"`;
}



class PropsTest extends React.Component {
  constructor() {
    super();
    this.state = {};
    setTimeout(this.forceUpdate.bind(this), 1)
  }

  extractRef(el) {
    this.el = el;
  }
  
  render() {
    const pre = `<div ${this.el && (('' + this.el.outerHTML).match(/<div (.*)><\/div>/) || ['', ''])[1]} />`;
    const post = `<div ${Object.entries(this.props).map(([k, v]) => fix(k, v)).join(' ')} />`;
    
    return <td style={{backgroundColor: (pre == post ? 'gray' : 'red')}}>
      {
      	React.createElement(
      		'div',
      		Object.assign({ref: this.extractRef.bind(this)}, this.props))
      }
      Got:<div>{pre}</div>Expected:<div>{post}</div>
    </td>
  }
}

function PropTestRow(props) {
  return <tr>
    {propNames.map(name => React.createElement(PropsTest, {[name]: props.inputValue, key: name}))}
  </tr>
}

function PropTester(props) {
  return <table>
  	<tbody>
    	{propInputs.map((inputValue) => React.createElement(PropTestRow, {inputValue: inputValue, key: inputValue}))}
    </tbody>
  </table>
}

ReactDOM.render(
  <PropTester />,
  document.getElementById('container')
);

window.console.log('done');