React Basic:DOMとElement
9048 ワード
前の記事では,Reactフレームワークの概念を簡単に紹介した.では、ReactでDOMとElementをどのように処理するかを見てみましょう.
最初の論文では,Reactの大きな特徴である仮想DOMについて議論した.少し復習した感じでDOMが何なのかを素早く知る
HTMLを扱うと、いろいろな要素があります.DOMはこれらの要素を論理ツリーとして表す.
HTMLドキュメントを読むだけで要素の構造を簡単に理解できますが、コンピュータをDOMで理解していると見なすことができます.
この記事がDOMの記述から始まるのは,DOMを理解することから,ReactでElementを作成する方法を理解するためである.
これに基づいて,いくつかのバニラJavaScriptを用いてElementの理解を拡張した.
その結果、idがルートのdivラベル内にh 1が生成されます.コンテンツはtextContentに入力したものと同じ「Hello React!」見えるでしょう.
バニラJavaScriptのみを使用してElementを作成する例です.では、ReactはどのようにしてElementを作成しますか?
実際のプロジェクトがReactで行われている場合は、Reactをインストールしてそれに関連するモジュールを受信するのは当然ですが、簡単な例を作成するので、CDNを使用して一度行います.
様々なJS/CSSライブラリを使用するときにCDNを使用するように、ReactはCDNを介して私のワークスペースに接続することもできます.それならセットしなくてもreact機能が使えます
https://ko.reactjs.org/docs/cdn-links.html
このリンクでは、CDN方式で文書に反応を適用し、説明を続けます.
本来はappendChildを使用していますが、reactはrender()関数で生成された要素を実際の画面に追加します.特にreactではなくreactDOMにアクセスしてrenderを実行することに注意してください.
render関数の最初のパラメータは追加する要素であり、2番目のパラメータは要素を追加する部分であることに注意してください.
そこで作成したelement変数をconsoleに設定します.ロゴで撮るとわかりやすいです
ReactでcreateElementをするとそのような形のオブジェクトが現れます中間のprops部分にはchildrenが含まれています
すなわち、Reactは、要素の特殊なフォーマットのオブジェクトを作成および制御することによって要素を作成および制御する.
「REDO」で「REDO」と「REDO DOM」を使用して要素を作成し、実際の画面で実装します.
https://ko.reactjs.org/docs/react-api.html
上記のリンクは、createElementの動作と表示される動作を専門に説明するReact公式ドキュメントです.例は簡単ですが、詳細については、正式なドキュメントを参照してください.
DOM(Document Object Model)
最初の論文では,Reactの大きな特徴である仮想DOMについて議論した.少し復習した感じでDOMが何なのかを素早く知る
HTMLを扱うと、いろいろな要素があります.DOMはこれらの要素を論理ツリーとして表す.
HTMLドキュメントを読むだけで要素の構造を簡単に理解できますが、コンピュータをDOMで理解していると見なすことができます.
この記事がDOMの記述から始まるのは,DOMを理解することから,ReactでElementを作成する方法を理解するためである.
これに基づいて,いくつかのバニラJavaScriptを用いてElementの理解を拡張した.
Elementの作成
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
</head>
<body>
<div id="root"></div>
<script>
const root = document.getElementById('root')
const element = document.createElement('h1')
element.textContent = "Hello React!"
root.appendChild(element)
</script>
</body>
</html>その結果、idがルートのdivラベル内にh 1が生成されます.コンテンツはtextContentに入力したものと同じ「Hello React!」見えるでしょう.
バニラJavaScriptのみを使用してElementを作成する例です.では、ReactはどのようにしてElementを作成しますか?
Element-Reactの作成
実際のプロジェクトがReactで行われている場合は、Reactをインストールしてそれに関連するモジュールを受信するのは当然ですが、簡単な例を作成するので、CDNを使用して一度行います.
様々なJS/CSSライブラリを使用するときにCDNを使用するように、ReactはCDNを介して私のワークスペースに接続することもできます.それならセットしなくてもreact機能が使えます
https://ko.reactjs.org/docs/cdn-links.html
このリンクでは、CDN方式で文書に反応を適用し、説明を続けます.
...
<body>
<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<div id="root"></div>
<script>
const root = document.getElementById('root')
const element = React.createElement("h1", {children: "Hello React!"})
ReactDOM.render(element, root)
</script>
</body>
...本来はappendChildを使用していますが、reactはrender()関数で生成された要素を実際の画面に追加します.特にreactではなくreactDOMにアクセスしてrenderを実行することに注意してください.
render関数の最初のパラメータは追加する要素であり、2番目のパラメータは要素を追加する部分であることに注意してください.
そこで作成したelement変数をconsoleに設定します.ロゴで撮るとわかりやすいです
ReactでcreateElementをするとそのような形のオブジェクトが現れます中間のprops部分にはchildrenが含まれています
すなわち、Reactは、要素の特殊なフォーマットのオブジェクトを作成および制御することによって要素を作成および制御する.
整理する
「REDO」で「REDO」と「REDO DOM」を使用して要素を作成し、実際の画面で実装します.
https://ko.reactjs.org/docs/react-api.html
上記のリンクは、createElementの動作と表示される動作を専門に説明するReact公式ドキュメントです.例は簡単ですが、詳細については、正式なドキュメントを参照してください.
Reference
この問題について(React Basic:DOMとElement), 我々は、より多くの情報をここで見つけました https://velog.io/@kite1993/React-Basic-DOM과-Elementテキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol