Reactでカウンターアプリのhtmlを作成しよう

まずはHTMLを作成します。（src/app.js）

let count=0;
let template = (
 <div>
   <h1>Count: {count}</h1>
   <button>+1</button>
   <button>-1</button>
   <button>reset</button>
 </div>
 );
ReactDOM.render(template, document.getElementById('app'));

次に、イベントを追加します。

まずは関数を作成しましょう。

const addOne = () => {
 console.log('addOne');
};
const minusOne = () => {
 console.log('minusOne');
};
const reset = () => {
 console.log('reset');
};

次に、buttonにonClick属性を追加します。

<button onClick={addOne}>+1</button>
<button onClick={minusOne}>-1</button>
<button onClick={reset}>reset</button>

全体は、このようになっています。

let count=0;
const addOne = () => {
 console.log('addOne');
};
const minusOne = () => {
 console.log('minusOne');
};
const reset = () => {
 console.log('reset');
};
let template = (
 <div>
   <h1>Count: {count}</h1>
   <button onClick={addOne}>+1</button>
   <button onClick={minusOne}>-1</button>
   <button onClick={reset}>reset</button>
 </div>
 );
ReactDOM.render(template, document.getElementById('app'));

ボタンを押下すると、developper toolにlogが表示されるはずです。
developper toolは「command + option + i」を同時に押して下さい。