React Base Fiddle (JSX)

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

by Damien Fa

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

CSS

.color-blue { color: blue; }
.color-red { color: red; }
.c1 { font-weight: normal; }
.c2 { font-weight: bold; }

JavaScript 1.7

var JsonFromAPI = {
	"tag":"p", "class":"c1",
  "children": [
  	"Lorem ispum",
    { "tag":"span", "class":"color-red",
      "children": [" some text"]
    },
    " \n loreb bis ", 
    { "tag":"span", "class":"color-blue c2", "children": ["ipsum "]   },
    {	"component":"MyFeedbackButton", "paragraph":"1.3" }
  ]
}

var MyFeedbackButton = React.createClass({
	render: function() {
    return <button>I'm a complex component</button>;
  }
});

var MyApp = React.createClass({
  render: function() {
    return <div>{ MyApp.renderHTML(JsonFromAPI) }</div>;
  }
});

// the function which transform JSON to HTML/JSX
MyApp.ukey = 0;

MyApp.renderHTML = (obj) => {
	if (Array.isArray(obj)) {
    	obj = obj.map( (o,k) => {
    		return MyApp.renderHTML(o);
    	});
    	return obj;
  }
  
  if (typeof obj !== 'object') return obj;
  
  // If the object has a tag property, so it's a DOM tag : I build HTML.
  if (obj.tag) { 
  	let Tag = obj.tag;
    MyApp.ukey++;
    return (
    <Tag className={obj.class} 
    		 key={"ukey"+MyApp.ukey}>
         {MyApp.renderHTML(obj.children)}
    </Tag>);
    
  // if the obj has "component" property, so it's my component. Just add it.
  } else if (obj.component) { 
    MyApp.ukey++;
  	return <MyFeedbackButton paragraph={obj.paragraph} key={"ukey"+MyApp.ukey} />
  }
  
};

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