React Base Fiddle (JSX)

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

by Matt Sturgeon

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 1.7

// Simple ForEach component
var ForEach = React.createClass({
   getDefaultProps: function(){
      return {
        element: 'ul',
        elementProps: {}
      };
   },
   Component: function() {
      return ;
   },
   render: function(){
      var Component = this.Component
      return (
      React.createElement(
        this.props.element,
        this.props.elementProps,
        this.props.items.map(this.props.children, this)
      )
    );
  }
});

// Lets actually use the component!
var Test = React.createClass({
    render: function() {
        return <ForEach items={this.props.arr}>{
        	function(item, index) {
                // For now we need to set key
                // manually to avoid warnings
            	return <li key={index}>{item}</li>
            }
        }</ForEach>;
    }
});


// Render time! 
ReactDOM.render(
	<Test arr={['foo','bar','baz']} />,
    document.getElementById('container')
);