Ein paar howTo’s bezogen auf die Einbindung von bestimmten scripten zweck schnelles Implememtieren und Testen von React Componenten

Vorhanden ist auch ein kurzer Vergleich zwischen normale funktionen/Methoden und arrow function bzgl. die Einbindung vom this zeiger

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script src="https://fb.me/react-15.1.0.js"></script>
  <script src="https://fb.me/react-dom-15.1.0.js"></script>
  <script src="https://unpkg.com/babel-standalone@6.26.0/babel.min.js"></script>
  <title>JS Bin</title>
</head>
<body>
  <div id="parentDiv"/>
  <!-- script als letzter, damit alles geladen ist ...-->
  <script type="text/babel">
    class TestUpdater extends React.Component {

      constructor(...args) { //var arg
        super(...args);      //spread operator
        this.state = {
          countAlt1: 0,
          countAlt2: 0,
        }
        //this mit dem handler binden und fuctionsref zu sich zuweisen
        this.handleClickAlt1 = this.handleClickAlt1.bind(this);
      }

      //this wird in JS erst beim aufruf gebunden
      //deshalb in constructor einbinden oder alt2
      handleClickAlt1() {
        this.setState(currentState => ({countAlt1: currentState.countAlt1 + 1}))
      }

      handleClickAlt2 = () => {
        //this.setState({countAlt2: this.state.countAlt2 + 1})

        //besser waere:
        this.setState(currentState => ({countAlt2:  currentState.countAlt2 + 1}))
      }

      handleReset = () => {
        //hier wird keine updater function benoetigt..
        this.setState({
          countAlt1: 0,
          countAlt2: 0,
        })
      }

      render() {
        return <div>
                 <button onClick={this.handleReset}>
                   reset
                 </button>
                 <button onClick={this.handleClickAlt1}>
                   button {this.state.countAlt1}
                 </button>
                 <button onClick={this.handleClickAlt2}>
                   button {this.state.countAlt2}
                 </button>
               </div>
      }
    }

    ReactDOM.render(<TestUpdater/>, document.getElementById("parentDiv"))
  </script>
</body>
</html>