JSFiddle - React, Tailwind, and code Playground

by upsuper

HTML

<script src="https://unpkg.com/mobx@3/lib/mobx.umd.js"></script>
<script src="https://unpkg.com/mobx-react@4"></script>
<script src="https://unpkg.com/react-dom@15/dist/react-dom.min.js"></script>
<script src="https://unpkg.com/react@15/dist/react.min.js"></script>
<script src="https://unpkg.com/mobx-react-devtools@4"></script>
<div id="mount"></div>

Babel + JSX

const {observable, computed, action} = mobx;
const {observer} = mobxReact;
const {Component, createRef} = React;

class TestComponent extends Component {
	a = createRef();
  @observable.ref x = false;

	render() {
  	return <div>
      <button onClick={this.toggle}/>
      {this.x && <div ref={this.a}/>}
    </div>;
  }
  
  @action.bound
  toggle() {
  	this.x = !this.x;
  }
}

ReactDOM.render(<TestComponent/>, document.getElementById('mount'));