score:1

in react you just modify state and dom is updated automatically. your example could look something like below. there is no need to update html directly.

you can also check this introductory tutorial which shows main react concepts.

class reacttypewriter extends react.component {
    constructor(props) {
        super(props)
        this.handleclick = this.handleclick.bind(this);
        this.state = { text: ""};
    }

    handleclick() {
        var i = 0;
        var txt = 'lorem ipsum dummy text blabla.';
        var speed = 50;
        let typewriter = () => {
            if (i < txt.length) {
                this.setstate({ text: txt.substring(0, i++) });
                settimeout(typewriter, speed);
            }
        };
        typewriter();
    }
  
  render() {
    return (
      <div>
        <h1>typewriter</h1>
          <button onclick={this.handleclick}>click me</button>
          <p id="demo">{this.state.text}</p>
      </div>
    )
  }
}

reactdom.render(<reacttypewriter />, document.queryselector("#app"))
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="app"></div>


Related Query

More Query from same tag