はじめに

この記事はTwitterで人気のハッシュタグ#100DaysOfCodeをつけて、
100日間プログラミング学習を続けるチャレンジに挑戦した13日目の記録です。

動作環境

<script>
      ReactDOM.render(
        React.DOM.h1(null, "Hello world!"),
        document.getElementById("app")
      );
</script>

Reactのオブジェクト。

もっともよく使われるメソッド。ReactDOMオブジェクト経由でコンポーネントを描画するためのメソッド。

xxの部分がコンポーネント部分。上記のサンプルコードではh1コンポーネントを使うことで、HTMLのh1要素に対応して、それを描画している。

コンポーネントの第1引数には、コンポーネントに渡したいプロパティを表示する。ReactではDOMの属性が該当する。CSSのclassやidはここに記述。

仮想DOM…React内部でrender()メソッドが呼び出された際に、描画された結果のDOMを表した軽量なデータ構造のこと。

render()メソッドが再度呼び出された際に、変更前後の仮想DOMの差分を計算します。

この差分に基づき、必要最低限の操作がブラウザ上の実際のDOMに対して行われる性質があります。