ReactをCDNで利用した場合のuseState、useEffectの書き方

javascript web制作
目次
  1. はじめに
  2. useState、useEffectとは
  3. 必要な外部ファイルをCDNから呼び出す
  4. 処理を記入する
  5. 結果

はじめに

ReactをCDNから利用することは以前の記事で書きました。

▼過去の記事はこちら

これなら簡単！cdnでreactとjsxを呼び出してサイトに組み込む方法

Reactに限らずjavascriptのフレームワークでは状態管理が便利です。
Reactの状態管理useStateとuseEffectですが、npmで構築する時と書き方が少し変わってきます。

今回はCDNでuseState、useEffectを利用する時の書き方を紹介します。

useState、useEffectとは

useStateとは状態管理のReactフックです。
useEffectも状態管理のフックですがこちらは副作用の意味です。

必要な外部ファイルをCDNから呼び出す

CDNを呼び出すコードをheadタグ内に記入します

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.development.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.development.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/7.23.2/babel.min.js"></script>

処理を記入する

Reactの処理をscriptタグ内に書いて行きます。

<div id="root"></div>
<script type="text/babel">
function App() {
  const [count, setCount] = React.useState(0);
  const [count2, setCount2] = React.useState(0);
  const handleClick = () => setCount(count + 1);

  React.useEffect(() => {
    // console.log('useEffect');
    setCount2(count * count);
  }, [count]);

  return (
    <>
      <h1>CDNで使用するuseStateとuseEffect</h1>
      <hr />
      <table style={{marginBottom: '1em'}}>
        <tbody>
          <tr>
            <td>カウント数</td>
            <td>：{count}（useStateでカウント数を更新）</td>
          </tr>
          <tr>
            <td>カウント数<sup>2</sup></td>
            <td>：{count2}（useEffectでカウント数を乗算）</td>
          </tr>
        </tbody>
      </table>
      <div>
        <button onClick={handleClick}>カウント</button>
      </div>
    </>
  )
}

結果

「カウント」ボタンをクリックするとカウント数が1増え、カウント数2がuseEffectによってカウント数の2乗になります。
簡単ですがこれでReactをCDNで呼び出しuseState、useEffectを使用することができました。