React Base Fiddle (JSX)

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

by evan

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

var paths = {
	check: "M15.9 4c0 .3 0 .5-.2.7l-7.5 9.3-1.1 1.5c-.4.4-.6.4-.9.3-.3 0-.6-.3-.8-.5l-1.1-.9-3.9-3.1c-.2-.2-.3-.4-.3-.6s0-.5.2-.7l1.1-1.5c.2-.1.4-.2.6-.2.3 0 .5 0 .7.2l3.2 2.5 6.9-8.6c.2-.2.4-.3.6-.4.3 0 .5 0 .7.2l1.5 1.1c.2.2.3.4.3.7z"
};

var Icon = function (props) {
  	var path = paths[props.shape];
    var size = props.size + 'px';
  	return (<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" enable-background="new 0 0 16 16" width={size} height={size}><path style={{fill: props.color}} d={path} /></svg>);
};

var Hello = React.createClass({
  render: function() {
    return <div>
	    <Icon shape="check" color="blue" size="16"/>
	    <Icon shape="check" color="red" size="16"/>
	    <Icon shape="check" color="green" size="16"/>
	    <Icon shape="check" color="purple" size="16"/>
	    <Icon shape="check" color="orange" size="16"/><br />
	    <Icon shape="check" color="blue" size="32"/>
	    <Icon shape="check" color="red" size="32"/>
	    <Icon shape="check" color="green" size="32"/>
	    <Icon shape="check" color="purple" size="32"/>
	    <Icon shape="check" color="orange" size="32"/><br />
	    <Icon shape="check" color="blue" size="64"/>
	    <Icon shape="check" color="red" size="64"/>
	    <Icon shape="check" color="green" size="64"/>
	    <Icon shape="check" color="purple" size="64"/>
	    <Icon shape="check" color="orange" size="64"/><br />
    </div>;
  }
});

ReactDOM.render(
  <Hello name="World" />,
  document.getElementById('container')
);