Reactの基礎知識

Reactとは？

• Facebookが開発
• JavaScriptのライブラリ（フレームワークではない）
• WebのUIを作る
• React ≠ SPA

コンポーネントとは？

UIは2つに分類される

1. 見た目（View）
2. 機能（Controller）

コンポーネント = 見た目 + 機能

Webページはコンポーネントのツリー構造になっている

なぜコンポーネントを使うのか

• 再利用性するため
• 分割統治するため
• 変更に強くするため

Virtual DOM

そもそもDOMとは？

→ Document Object Modelの略
→ インターフェース
→ HTMLにアクセスする窓口
→ HTML構造、見た目、コンテンツを変更したいときはDOMを通して操作を行う

Virtual DOMとは？

Reactで管理するDOM。
通常のDOMはブラウザのレンダリングによって管理されるが
Reactではブラウザのレンダリングと別で管理を行う
→効率よくDOM操作できる

通常のDOM操作

document.getElementById('hoge').innerText='fuga';

ReactのVirtual DOM操作

render(
  <div id='hoge'>fuga</div>
);

差分描画

Reactでは変更されたVirtual DOMの差分のみを再描画する

JSX

JavaScript内でHTMLっぽく書ける

ReactDOM.render(
  <div className={hoge}>
    <h1>Hello World!</h1>
  </div>
)