React Base Fiddle (JSX)

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

by phsiao2000

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.2.0.js"></script>
<script src="https://fb.me/react-dom-15.2.0.js"></script>
<script src="//npmcdn.com/react-virtualized/dist/umd/react-virtualized.js"></script>
<link rel="stylesheet" href="//npmcdn.com/react-virtualized/styles.css">
<script src="https://facebook.github.io/react/js/jsfiddle-integration-babel.js"></script>
<h1>
Log test
</h1>
<div id="logID">
    <!-- This element's contents will be replaced with your component. -->
</div>

JavaScript

const { AutoSizer, VirtualScroll } = ReactVirtualized;

var setMsg    = function (element, title, msg) {
	element.innerHTML = title + ': ' + msg;
}
var Log = React.createClass({
  render: function() {
  	console.log(`<Log> ${this.props.log}, time: ${this.props.log.time}`)
    return <div>log: {this.props.log.time}</div>;
  }
});
var LogList = React.createClass({
	render: function() {
  	return <div>
  	{this.props.logs.map(log => {
    	console.log('mapped: ', log.time)
    	return <Log log={log}/> })
    }
    </div>
  }
})

var logs = []
const LOGID   = 'logID'
var logEl              = document.getElementById(LOGID)
var log       = new EventSource('http://localhost:3000/channel/log?lastEventId=0');
log.onmessage = function (e) {
	console.log('e.data', e.data)
	var log = JSON.parse(e.data);
	logs = logs.concat(log)
	if (logEl === null) {logEl = document.getElementById(LOGID)}
  //setMsg(logEl, 'log ', `there are now ${logs.length} logs`);
  ReactDOM.render(<LogList logs={logs} />, document.getElementById('logID')
);

}
log.onopen = function (e) {
	console.log('opened eventsource')
}
log.onerror   = function (event) {
console.log(new Date().toLocaleString(), 'log error');
}