Reactを使う

Warning: count(): Parameter must be an array or an object that implements Countable in /home/xs638785/agile-software.site/public_html/wp-content/plugins/rich-table-of-content/functions.php on line 490

HTMLでReactを利用する場合

htmlファイルに書かれた下記コードはunpkg.comというサイトにアップロードされているReactのスクリプトファイルを指定しています。ここではreactとreact-domというライブラリを読み込んでいます。
この２つはReactのもっとも基本となるものです。

react（Reactの本体）
react-dom（Reactの仮想DOMスクリプトファイル）

    <script src="https://unpkg.com/react@17/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>

CDN

CDNは「Content Delivery Network」の略でJavaScriptのスクリプトなどをオンラインで配布するサイトです。CDNを利用することでJavaScriptのスクリプトが多数利用できます。

スクリプト

Reactによる表示を適用するためのタグ

<div id="root">wait...</div>

querySelectorというメソッドを使ってid=”root”のタグのオブジェクトを取り出しています。

let dom = document.querySelector('#root');

HTMLタグによる表示をするためにエレメントを作成します。
エレメントとはHTMLのタグ（<p>タグとか<div>タグ）として組み込まれているものをJavaScriptの中でオブジェクトとして扱うようにしたものです。
このエレメントは仮想DOMのエレメントです。
第一引数には作成するタグの名前を、第二引数にはエレメントに用意される属性のオブジェクトを用意します。
第三引数には作成するエレメントの内部に組み込まれるものを用意します。
(React.createElement(タグ名、属性、中に組み込まれるもの))

仮想DOM

Reactは独自にDOMシステムを持っています。

let element = React.createElement(
      'p', {}, 'Hello React!'
    )

作成したエレメントはReactDOMというオブジェクトのrenderを使ってレンダリングします。
レンダリングとはプログラムのオブジェクトをもとに実際に画面に表示されるデータ(Webアプリの場合はHTMLのソースコード)を生成する作業です。

第一引数にはcreateElementで作成した仮想DOMのエレメント、第二引数にはそれをはめ込むためのDOMを指定します。
(ReactDOM.render(エレメント、DOM))

ReactDOM.render(element, dom)

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8" />
  <title>React</title>
  <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>
</head>
<body>
  <h1>React</h1>
  <div id="root">wait...</div>
  <script>
  let dom = document.querySelector('#root')
  let element = React.createElement(
    'p', {}, 'Hello React!'
  )
  ReactDOM.render(element, dom)
  </script>
</body>
</html>