Reactの基礎〜elementの表示〜

HTMLタグを値として直接記述できるようにするもので「文法拡張」という。

JSXの更新とイベント

必要に応じて更新する方法

表示を一定間隔でrenderして更新する
setIntervalで一定間隔で処理（関数）を実行する。

// 1秒間隔で処理を実行
setInterval(() => { 処理 }, 1000);

第一引数：アロー関数で実行する処理を用意
第二引数：1000ms（１秒）ごとに処理が実行されるようにする

JSXは変数代入時にコンパイルされる

１秒ごとにカウントされる表示

let dom = document.querySelector('#root')
let title = "React page."
let message = "Display a message."
var counter = 0
setInterval(() => {
   counter++
   let el = (
       <div>
           <h4>{title}</h4>
           <h6>{message}</h6>
           <h5 className="alert alert-primary">
               count: {counter}.
           </h5>
       </div>
   )
   ReactDOM.render(el, dom)
}, 1000)

`el`を`setInterval`から出してしまうとカウントされなくなる。

let el = (
       <div>
           <h4>{title}</h4>
           <h6>{message}</h6>
           <h5 className="alert alert-primary">
               count: {counter}.
           </h5>
       </div>
   )
setInterval(() => {
   counter++
   ReactDOM.render(el, dom)
}, 1000)

理由 -> 変数`el`が`count: 0`のあと更新されないから（JSX内で使った変数は自動的に更新されるわけではない）
※`state`を使えば「自動更新」することもできる

クリックして更新する

アロー関数を作り、その中で、変数`counter`を増やし、変数`el`にJSXの値を代入し直し`ReactDOM.render`でレンダリングする。

let doAction = (event) => {
   counter++
   let el = (
       <div>
           <h4>{title}</h4>
           <h6>{message}</h6>
           <h5 className="alert alert-primary"
               onClick={doAction}>
               count: {counter}.
           </h5>
       </div>
   )
   ReactDOM.render(el, dom)
};

関数を呼び出すのを忘れないようにすること

フォームの値を利用する

入力フィールドとプシュボタンを用意
- `input`タグは閉じた具がないので必ず最後は`/>`とすること

<div className="form-group">
   <label>Input:</label>
   <input type="text" className="form-control" id="input" onChange={doChange} />
</div>
<button onClick={doAction}
   className="btn btn-primary">
   Click
</button>

HTML要素のイベント属性に関数を設定した場合、引数に`event`というオブジェクトが渡される。
`event`には`target`というプロパティがあって、ここにイベントが発生した要素のオブジェクトが保管されている。

let doChange = (event) => {
   in_val = event.target.value
   message = 'Hello, ' + in_val + '!!'
}