【ReactV18】CDNでまずは簡単に触ってみる方法

React

ReactのV18をCDNでまずは簡単に触ってみる方法を紹介します。

【ReactV18】のCDN

<script crossorigin src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

REACT公式サイトから2つ、Babel公式サイトからstandaloneが必要になります。
babelのstandaloneはJSXをJSのオブジェクトに変換するために必要となります。
この3つをheadタグ内で読み込みます。

Reactを使用する

<!DOCTYPE html>
<html>
  <head>
    ...
  </head>
  <body>
    <div id="app"></div>
    <script>
      const appEl = document.querySelector("#app");
      const root = ReactDOM.createRoot(appEl);
      root.render("hi");
    </script>
  </body>
</html>

目印となるid#appのDOMを取得します。
そして、Reactのルートとなる部分を指定します。
そして、Reactのrender()を使って出力させます。

ReactでHTML(JSX)を出力するを使用する

<!DOCTYPE html>
<html>
  <head>
    ...
  </head>
  <body>
    <div id="app"></div>
    <script type="text/babel">
      const appEl = document.querySelector("#app");
      const root = ReactDOM.createRoot(appEl);
      // root.render("hi");
      root.render(<h2>HI</h2>);
    </script>
  </body>
</html>

scriptタグに"text/babel"とすることで、htmlのタグをJavaScriptオブジェクトとして変換することができます。
厳密にいうと、上のh2タグはhtmlではありません。JSXというReactの独自構文です。

React

Posted by devsakaso