まずreactの組み込みがどうなっているかを解説します。
前回投稿を閲覧しながら解説を読むと良いかと思います
reactを組み込んでる箇所は以下の部分です
<div id="root">hello world!</div>
これではrootと指定しておりますが、必ずしもrootにしないといけないわけではありません。
ではそこの指定はどこでしてるのかというと
let dom = document.querySelector('#root');
の部分です。
ここでは”querySelector”メソッドを使用しておりますが、javascriptを仕使用したことがある方は理解されてるかと思いますが、これはreactの機能というわけではなく、javascriptにある一般的な機能です。
次に”createElement”というメソッドを使ってエレメントを作成します。
let element = React.createElement( 'p', {}, 'Hello React!')
これはDOMのエレメントではなく、「仮想DOM」のElementオブジェクトです
仮想DOMはReactが利用する「もう1つのDOMシステム」です。
作成した仮想DOMのエレメントは、レンダリングを行って画面に表示します。
そのレンダリングを行っているのが
ReactDOM.render(element, dom)
レンダリングというのは実際に画面に表示するデータを生成することです。
ざっくりした解説で申し訳ないですが、このレベルの解像度で今後も解説させてください。
入会申込
ログイン
