<div id="app" class="d-flex justify-content-center align-items-center"></div>
#app {
  height: 100vh;
  width: 100%;
}
class App extends React.Component {
  constructor() {
    super();
    this.state = {
      count: 1,
      text: "",
    }
  }

  render() {
    return (
      <div class="text-center">
        <h1>{ this.state.text || this.state.count }</h1>
        <div>
          <div class="btn-group">
            <button
              onClick={this._countDown.bind(this)}
              class="btn btn-lg btn-light">
              <i class="bi bi-dash"></i>
            </button>
            <button
              onClick={this._countUp.bind(this)}
              class="btn btn-lg btn-primary">
              <i class="bi bi-plus"></i>
            </button>
          </div>
          <div class="mt-3">
            <button
              onClick={this._countReset.bind(this)}
              class="btn btn-lg btn-block btn-outline-secondary">
              <i class="bi bi-arrow-repeat"></i>
            </button>
          </div>
        </div>
      </div>
    );
  }

  _fizzBuzz(num) {
    let text = "";
    if ( num % 3 === 0 ) {
      text += "Fizz";
    }
    if ( num % 5 === 0 ) {
      text += "Buzz";
    }
    this.setState({text: text});
  }
  
  _countUp() {
    this.setState({
      count: ++this.state.count,
    });
    this._fizzBuzz(this.state.count);
  }
 
  _countDown() {
    this.setState({
      count: this.state.count <= 1 ? this.state.count : --this.state.count,
    });
    this._fizzBuzz(this.state.count);
  }
  
  _countReset() {
    this.setState({
      count: 1,
      text: "",
    });
  }
}

ReactDOM.render(<App />, document.querySelector('#app'));
View Compiled

External CSS

  1. https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css
  2. https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.0/font/bootstrap-icons.css

External JavaScript

  1. https://unpkg.com/react@16/umd/react.development.js
  2. https://unpkg.com/react-dom@16/umd/react-dom.development.js