React Base Fiddle (JSX)

Starting point for creating JSFiddles with React.

by David Simpson

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>

CSS

.btn-wrap {
	padding: 1em 1em;
	margin: 0 auto;
	width: 50%;
	background-color: green;
}
.btn-wrap button {
	width: 30%;
	padding: 2em;
	transition: all 0.5s ease-in-out;
}
.btnDown {
	background-color: #000;
	color: #FFF;
	transition: all 0.5s ease-in-out;
}

Babel + JSX

class Buttons extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isDown: false
    };
    this.toggleClass.bind(this);
  }

  toggleClass() {
    this.setState(prevState => ({ isDown: !prevState.isDown }));
  }  
		
	render(){
		const className = `${this.state.isDown ? "btnDown" : ""}`;
		return (
			<div className="btn-wrap">
				<button className={className} onMouseDown={(e) => this.toggleClass(e)} onMouseUp={(e) => this.toggleClass(e)} value = '1' >1</button>
				<button className={className} onMouseDown={(e) => this.toggleClass(e)} onMouseUp={(e) => this.toggleClass(e)} value = '2' >2</button>
				<button className={className} onMouseDown={(e) => this.toggleClass(e)} onMouseUp={(e) => this.toggleClass(e)} value = '3' >3</button>
				<button className={className} onMouseDown={(e) => this.toggleClass(e)} onMouseUp={(e) => this.toggleClass(e)} value = '4' >4</button>
				<button className={className} onMouseDown={(e) => this.toggleClass(e)} onMouseUp={(e) => this.toggleClass(e)} value = '5' >5</button>
				<button className={className} onMouseDown={(e) => this.toggleClass(e)} onMouseUp={(e) => this.toggleClass(e)} value = '6' >6</button>
				<button className={className} onMouseDown={(e) => this.toggleClass(e)} onMouseUp={(e) => this.toggleClass(e)} value = '7' >7</button>
				<button className={className} onMouseDown={(e) => this.toggleClass(e)} onMouseUp={(e) => this.toggleClass(e)} value = '8' >8</button>
				<button className={className} onMouseDown={(e) => this.toggleClass(e)} onMouseUp={(e) => this.toggleClass(e)} value = '9' >9</button>
				<button className={className} onMouseDown={(e) => this.toggleClass(e)} onMouseUp={(e) => this.toggleClass(e)} value = '0' >0</button>
				<button className={className} onMouseDown={(e) => this.toggleClass(e)} onMouseUp={(e) => this.toggleClass(e)} value = '+' >+</button>
				<button className={className} onMouseDown={(e) => this.toggleClass(e)} onMouseUp={(e) =>...