Reactの基礎とReactDOMについて学ぶ_100DaysOfCodeチャレンジ13日目(Day_13:#100DaysOfCode)

はじめに

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

動作環境

• npm 6.1.0

現在学習している内容のリポジトリ

本日学んだこと

• Reactの基礎
• ReactDOMについて

ReactDOMについて

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

ReactDOMとは？

Reactのオブジェクト。

render()メソッドって？

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

React.DOM.xx

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

nullの部分について(コンポーネントの第一引数)

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

TiPs:仮想DOMって何者？

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

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

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