React Base Fiddle (JSX)

Starting point for creating JSFiddles with React.

by Newton Anbarasu

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"></div>

CSS

.clickable img {
   width:50px;
   margin:30px;
}
.click {
  cursor:pointer;
  outline:1px solid red;
}

Babel + JSX

class Focus extends React.Component  {
  constructor() {
    super();
    this.state = {check: false};
    this.check = this.check.bind(this); 
  }

  check () {
    this.setState({check: !this.state.check});
  }

  render(){
    let focus;
    if (this.state.check) {
      focus = 'click'
    } else {
      focus = 'unclick'
    }

    return 	<div className="clickable">
       <input type="checkbox" onChange={ this.check } />
       <span>Click Checkbox</span>
       <div className={focus}><img src="https://img.icons8.com/pastel-glyph/2x/search--v1.png"/> </div>
    </div>
  }
}


ReactDOM.render(
  <Focus  />,
  document.getElementById('container')
);