Posted at

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

More than 1 year has passed since last update.


はじめに

この記事はTwitterで人気のハッシュタグ#100DaysOfCodeをつけて、

100日間プログラミング学習を続けるチャレンジに挑戦した13日目の記録です。


動作環境


  • npm 6.1.0


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

https://github.com/yuta-ushijima/ReduxSimpleStarter-study


本日学んだこと


  • 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に対して行われる性質があります。