React Base Fiddle (JSX)

Starting point for creating JSFiddles with React.

by Christian Sonne

HTML

<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div id="container">
  <!-- This element's contents will be replaced with your component. -->
</div>

Babel + JSX

class Gauge extends React.Component {
  get angle() {
  	let value = this.props.value === undefined ? 0 : parseFloat(this.props.value); 
  	return `rotate(${-360 / (2 * Math.PI) * (-Math.PI / 10 * value + Math.PI)}deg`;
  }
  
  get color() {
  	if (this.props.value === undefined)
    	return "gray";
  	return `hsl(${120/10*parseFloat(this.props.value)}, 100%, 50%)`; 
  }
  
	render() {
  	return (
    	<svg id="gauge" width="200" height="150" viewBox="-1 -1 202 152">
        <clipPath id="clip">
          <use xlinkHref="#meter" />
        </clipPath>
        <g clipPath="url(#clip)">
          <path id="bar" style={{fill:this.color, transform: this.angle, transformOrigin:'100px 100px', transition: 'all 1s'}} opacity="0.5" d="M0,100 A 100 100 0 0 1 200 100 Z"></path>
        </g>
        <path id="meter" stroke="#979797" strokeWidth="1" fill="transparent" d="M0,100 A 100 100 0 0 1 200 100 L 175 100 A 75 75 0 0 0 25 100 Z"></path>
        <path id="hand" style={{transform: this.angle, transformOrigin: '100px 100px', transition: 'transform 1s'}} d="M100,100 L 202 100" stroke="black"></path>
        <text fontFamily="Helvetica-Bold, Helvetica" fontSize="32" fontWeight="bold">
          <tspan id="value" fillOpacity="0.5" textAnchor="end" x="107" y="132" style={{fill: this.color, transition: 'all 1s'}}>{this.props.value === undefined ? 'N/A': parseFloat(this.props.value).toFixed(1)}</tspan>
          <tspan x="110.375" y="132" fontFamily="Helvetica-Light, Helvetica" fontWeight="300" fill="#6E6E6E">/</tspan>
          <tspan x="119.271" y="132" fontFamily="Helvetica-Light, Helvetica" fontSize="24" fontWeight="300" fill="#6E6E6E">10</tspan>
        </text>
      </svg>
    );
  }
}

class Dash extends React.Component {
	constructor(props) {
  	super(props);
    this.state = {
    	value: undefined
    }
  }
  update = (event) => this.setState({value:event.target.value});
	render() {
  	return (
    	<div>
      	<Gauge value={this.state.value} /><br/>
        <input...