React Base Fiddle (JSX)

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

by David Kyle

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 Fiddle = (function() {
	var namespace = this;
    var util = (function() {
    	var self = this;
        
        var _debugMessage = function(args) {
             console.log(args);
        };
        
        return {
        	Debug: _debugMessage
        };
    })();
    
    var _viewModel = (function() {
    	var vm = this;
        var header = "";
        var _initialize = function(args) {
        	var init = this;
            if (args != null && args != undefined) {
            	if (args.headerData != undefined) {
                	header = args.headerData;
                }
            }        
        };
        
        vm.init = _initialize;
        
        var _pageData = {
        	Header: function() { return header; }
        };
        
        return {
        	Initialize: vm.init,
        	PageData: _pageData
        };
    })();
    
    return {
    	Utilities: util,
        ViewModel: _viewModel
    };
})();

Fiddle.Utilities.ViewModel.Initialize({headerData: "Header 1"});

var SectionHeader = React.createClass({
  render: function() {
    return <h1>Hello {this.props.headerContent}</h1>;
  }
});