reactでHELLOWORLDを出力する
何ができるか
宣言型プログラミングーJSだったらHTMLで上書きしないといけなかったり裏側の動きしか変化がなかったが、この場合値を変えてもすぐ反映してくれる。また、reactはUIを作ることが出来る。
コンポーネントごとに作るー小さな要素をいくつか作って複雑なUIを作れる
環境構築参考
Helloworld出力
code:react_app.js
let dom = document.querySelector("#root");
let element = React.createElement(
"p", {}, "Hello React Application!"
);
ReactDOM.render(element, dom);
code:react_app.html
<h1>React App</h1>
<div id="root">Wait...</div>
<script src="react_app.js"></script>
■コードの詳細
エレメントの作成
エレメント:HTMLタグをJavaScriptのオブジェクトとして扱えるようにしたもの。
React.createElement(タグ名, 属性、中に組み込むもの);
上記の場合pタグの部分に文字が反映される。
また、{}の部分はオブジェクトリテラルを表示する。
ReactDOM.render()
Reactエレメントをドキュメント(生成されるhtml等の文書)にレンダリングする役割。
■メモ
仮想DOM
DOMとは?
ウェブ上の文書のコンテンツと構造からなるオブジェクトのデータ表現。
https://gyazo.com/a717181e8048c664dc05e8ea90e139c9
仮想DOMは、JavascriptのオブジェクトでリアルDOMを仮想的に作って、さらに変更箇所だけ差分検知し更新すること。
https://gyazo.com/3384e95b3b227c9c4d3b63cf98709af0
以下に記載されている時計のやつも時計の時刻(変更すべき箇所のみ)を使ってる。