Reactの公式ドキュメントでGetting Started(新しいタブで開く)を読むと、このような文章があります。

We recommend going through this JavaScript overview to check your knowledge level. It will take you between 30 minutes and an hour but you will feel more confident learning React.

意訳をすると「Reactを習得したかったら、JavaScriptも並行して学習してね！」と言ったところでしょうか？そういうわけなのでReactの学習を意識しつつ、JavaScriptの学習も進めていきましょう。今回はイベントハンドラの設定についてご紹介します。

JavaScriptにおけるイベントハンドラの登録

イベントハンドラの「イベント」とは、ユーザーがボタンをクリックしたなど、端末装置やアプリケーションで発生した事象のことを指します。イベントハンドラとは、イベントが発生したときに実行される関数のことをいいます。JavaScriptではイベントハンドラを登録する方法として、以下の3つの方法があります。

1. HTML要素の属性に設定する

<button onclick="activateLasers()">Activate Lasers</button>
  <script>
      function activateLasers() {
          alert('Hello World');
      }
  </script>

HTML要素にイベントハンドラ属性を設定して、その要素のイベントハンドラ（onclick）を登録します。ここでイベントハンドラを登録している箇所は、’onclick=”activateLasers()”‘の部分です。「button要素をクリックするとイベントとしてactivateLasers()関数が発生する」という意味になります。

2. DOM要素のプロパティに設定する

<button value="activateLasers" id="button">Activate Lasers</button>
    <script>
        function activateLasers() {
             alert('Hello World');
        }
        window.onload = function() {
             var btn = document.getElementById("button");
             btn.onclick = activateLasers;
        }
    </script>

Windowオブジェクトの1つ下に位置するonloadプロパティに、イベントハンドラ（onclick）を登録した関数を代入します。イベントハンドラをDOM要素のプロパティに設定する方法は、HTML要素の属性に設定すると異なり、HTMLとJavaScriptを分離してコードを見やすくするという利点があります。

3. addEventListnerメソッドの使用する

<button value="activateLasers" id="button">Activate Lasers</button>
    <script>
        var btn = document.getElementById("button");
        btn.addEventListener('click', function() {
            alert('Hello World');
        });
    </script>

addEventListenerメソッドでイベントリスナを登録します。イベントリスナとはaddEventListenerメソッドの第二引数で使われている無名関数のことで、第一引数で登録されているイベント(‘click’)が発生したときに処理する内容が定義されています。こちらも2のときと同じく、HTMLとJavaScriptを分離してコードを見やすくするという利点があります。

Reactでイベントハンドラの設定を行う

function activateLasers() {
          alert('Hello World!');
      }

      ReactDOM.render(
          <button onClick={activateLasers}>
            Activate Lasers
          </button>,
        document.getElementById('root')
      );

上記のコードはReactの公式ドキュメント(新しいタブで開く)にもとづいて作成しました。あらかじめactivateLasers関数を定義して、ReactDOMが読み込まれたときに、buttonタグのプロパティにイベントハンドラを登録します。見た目的には「1. HTML要素の属性に設定する」に似ている感じがします。