React

by igronus

HTML

<div id="app"></div>

React

class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
    	isComputing: false,
      isComputed: false,
    }
  }

  startComputing = event => {
    this.setState({
    	isComputing: true,
      isComputed: false
    });
		this.forceUpdate();

    for (let i = 1; i < 1E10; ++i) {
      // dummy computations emulating (several seconds)
      const a = 1;
    }

    this.setState({
    	isComputing: false,
      isComputed: true
    });
  }
  
  render() {
  	return (
    	<div id="app">
        {!this.state.isComputing && !this.state.isComputed &&
          <button onClick={this.startComputing}>
            Compute now
          </button>
				}

        {this.state.isComputing &&
        	<div>
            Computing...
          </div>
        }

        {this.state.isComputed &&
          <div v-if="isComputed">
            Done.
          </div>
        }
      </div>
    )
  }
}

ReactDOM.render(<App />, document.querySelector("#app"))