React Base Fiddle (JSX)

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

by Frank van Puffelen

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.1/JSXTransformer.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.1/react-with-addons.js"></script>
<script src="https://cdn.firebase.com/js/client/2.2.3/firebase.js"></script>
<script src="https://facebook.github.io/react/js/jsfiddle-integration.js"></script>

<div id="Datawrap">
    <!-- This element's contents will be replaced with your component. -->
</div>

JavaScript 1.7

function nestedjson(data,pair){
    for(var key in data){
        if(typeof(data[key])=='object'){ 
          pair.push(<div className='Sub-data'><p>{key}</p></div>);
          nestedjson(data[key],pair);

        }else{
         pair.push(<div className='Data-row'><p>{key} : <input type="text"  defaultValue={data[key]} name={key} /></p></div>);
        }

      }
   }
var FirebaseItem = React.createClass({
  render: function() {
var pairs =[];
   var data = this.props.data; 
   for(var key in data){
    if(typeof(data[key])=='object'){
       pairs.push(<div className='Sub-data'><p>{key}</p></div>);
          nestedjson(data[key],pairs);
        }else{
          pairs.push(<p>{key} : <input type="text" defaultValue={data[key]} name={key} /></p>);
        }
   }
    return (
           <div className="Data-item">{pairs}</div>
    );
  }
});

var FirebaseList = React.createClass({
  render: function() {
    var FirebaseData = this.props.data.map(function (obj) {
      return (
           <FirebaseItem data = {obj}/>
      );
    });

    return (
      <div className="Datalist">
        {FirebaseData}
      </div>  
    );
  }
});
var FirebaseApp = React.createClass({
     getInitialState: function() {
    this.items = [];
    return {items: []};
  },

  componentWillMount: function() {
    this.firebaseRef = new Firebase("https://docs-examples.firebaseio.com/web/saving-data/fireblog");
    this.firebaseRef.on("child_added", function(dataSnapshot) {
      this.items.push(dataSnapshot.val());
      this.setState({
        items: this.items
      });
    }.bind(this));
  },

  componentWillUnmount: function() {
    this.firebaseRef.off();
  },

  handleChange: function(e) {
    this.setState({text: e.target.value});
  },
  handleSubmit: function(e) {
    e.preventDefault();

  },
  render: function() {
    var FirebaseData=this.state.items;
     var handleChange=function(evt) {
       var firebaseRef = new...