countの値を増減させましょう

src/app.js

let count=0;
const addOne = () =>; {
 count ++;
 console.log('addOne', count);
};
const minusOne = () =>; {
 count --;
 console.log('minusOne', count);
};
const reset = () =>; {
 count = 0;
 console.log('reset', count);
};

今の状態だと、logに表示される値は変わるようになります。

でも、h1のところにある値は変わりません。

この問題に対処するためには、countの値を変更したあとに、改めてレンダリング（表示）してやる必要があります。

表示部分の関数化

このように表示部分を関数化しましょう。

src/app.js

const renderCounterApp = () => {
 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'));
};
renderCounterApp();

renderCounterApp関数を随時、呼び出してやれば、常に表示が変わるようになるはずです。全体は、このようになっています。（src/app.js）

let count=0;
const addOne = () => {
 count ++;
 console.log('addOne', count);
 renderCounterApp();
};
const minusOne = () => {
 count --;
 console.log('minusOne', count);
 renderCounterApp();
};
const reset = () => {
 count = 0;
 console.log('reset', count);
 renderCounterApp();
};
const renderCounterApp = () => {
 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'));
};
renderCounterApp();

この状態で、ボタンを押せば、<h1>タグの中にあるcountの値が変わることがわかるはずです。

捕捉説明ですが、JavaScriptの無名関数は、このようにして定義できます。どちらの記法も同じ意味です。

var test = () => {
 alert('hello');
}
var test2 = function() {
 alert('hello');
}