#DOM?
ブラウザがJavascriptを実行してDOMを作る。
正確にはDocument Object Model。
１つ１つのタグをJavascriptのオブジェクト({プロパティ:値}のやつ）として表す。(Document.〇〇とかで使われるやつ…。)Documentオブジェクト＝DOMの認識
オブジェクトの値を変えるとタグの表示が変更される。
DOMで用意されるオブジェクトにはエレメントとノードがある。
##エレメント
エレメントオブジェクトはHTMLのタグを扱う。エレメントを操作することでタグの表示をJSから操作できる。
##ノード
ノードは、一番小さい単位、エレメントもノードの一種。改行や、タグの前の半角スペースもノードになる。
#Reactの表示を読み込む仕組み
###①querySelectorメソッドを使ってオブジェクトを取得する
idがrootの要素を取得
let dom = document.querySelector('#root')
###②仮想エレメントの作成
仮想DOMのElementオブジェクト。
React.createElementはReactの仮想DOMによるElementを作成するもの。
React.createElement(タグ名,属性,中に組み込まれるもの)
引数について、
第一引数：pタグを作るときはp
第二引数：エレメントに用意される属性のオブジェクトを記入。特に必要なければ空のオブジェクトで{}と入れる。
第三引数：作成するエレメントの内部に組み込まれるもの。テキストを表示する場合はそのテキストを指定する。
let element = React.createElement(
'p',{},'Hello React!'
)
###③レンダリングの実行
作成した仮想DOMのエレメントはブラウザがレンダリング（実際に画面に表示されるデータを生成する）を行って画面に表示される。
ReactDOM.render(エレメント,dom)
#まとめると
- 場所を指定して
- React.createElementでまっさらな仮想DOMに材料であるエレメントを作る（準備させる）
- ReactDOM.renderで仮想DOMから実際に表示させるDOMを作って表示できるようにする
でも、この流れは大変なので、JSXというHTMLのタグをスクリプトに直接記述する便利なものがあります。