JSFiddle - React, Tailwind, and code Playground

by skane

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.0/react-dom.min.js"></script>

JavaScript

const { svg, circle, path } = React.DOM

class Stage extends React.Component {
	render() {
  	const props = {
    	viewBox: '-400 -400 800 800',
    	style: {
     		width: '100%',
        height: '100%'
      }
    }
    
  	return svg(props, 
    	circle({ cx: 0, cy: 0, r: 5, fill: 'red '})
    ])
  }
}

class ProcessComponent extends React.Component {
	render() {
 		const props = {
  		cx: x,
      cy: y,
      r: 20,
      fill: 'red'
    } 
    
    return circle(props)
  }
}

class Process {
	constructor(position) {
 		this.position = position
  }
}

const app = {
	processes: [ new Process([ 0, 0 ]) ]
}

function tick () {
	requestAnimationFrame(tick)
	ReactDOM.render(React.createElement(Stage, { app: app }), document.body)
}
requestAnimationFrame(tick)