React(超基礎知識) とらゼミ01 メモ

React

• Facebook社が開発したjavasctriptのライブラリ(フレームワークではない。)
• WebのUIを作るためにある。

UIとは？

見た目と機能のことを言う。
そして見た目(view) + 機能(controller) = コンポーネントをつくるのがReact

Webの構造(コンポーネントのツリー構造)おおまかに

DOMとは

Document Object Model
インタフェースでありHTMLにアクセスする窓口、HTML構造、見た目、コンテンツを変更。

Virtual DOM

Reactで管理するDOM、ブラウザのレンダリングと別管理であり効率良くDOM操作できる。

レンダリング : 簡潔に言うとブラウザ画面に表示させるまでの処理。

• 通常のDOM操作の例

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

• ReactのDOM操作の例

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

どちらも id = hoge にテキスト 'fuga' を追加する操作。

差分描画(現時点での認識)

変更のあった場所(差分箇所)を再描画する。

JSX(ざっくり)

jsでhtmlっぽく書ける。

• 例)

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