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

javascript web制作
目次
  1. はじめに
  2. CDNのURLをscriptタグで呼び出す
  3. Reactを書き出す

はじめに

javascriptの人気ライブラリ「React」ですが使用方法を調べるとnpmでインストールする方法にたどりつくと思います。

それも良いのですが既にReactなしで出来上がったサイトに組み込みたい時や気軽にReactの良いとこどりをしたい時はnpmは使用せずcdnを利用するのも良い選択かもしれません。

この記事ではReactとJSXをcdnから利用する方法を紹介します。

気軽にReactをサイトに組みこんだり試したりしてみましょう。

[JSX]
Reactを使用する際にほぼ利用するjavascript拡張機能。この機能を使うとReactでのレンダリングがとても楽になる

[cdn]
Contents Delivery Networkの略。デジタルコンテンツをネット上で配信するためのネットワークのこと。これを利用するとライブラリをわざわざサーバーにダウンロードしなくてすむのでとても便利。ただ配信しているサービスに障害があったら自分の利用しているサーバーに問題がなくてもライブラリは使用できなくなってしまう

CDNのURLをscriptタグで呼び出す

headタグ内にscriptタグで呼び出します。

cdnサービスは多々ありますが今回はメジャーどころの「cdnjs.com」を利用します。

cdnjs.comのURLはこちら

https://cdnjs.com

ReactとReactDOMを呼び出す

検索窓に「React」と入力して検索します。
reactに関するいろいろなライブラリが結果で表示されますがreactとだけ書いてあるものを選びます。

今回は下記URLを使用します。
https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.development.min.js

また、「react-dom」ライブラリも必要になるのでこちらも選んでおきます。
https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.development.min.js

Reactを適用させたいHTMLの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>

babelを呼び出す

この後使用するJSXのためにbabel.jsも呼び出します。

[babel]
babelは新しいバージョンのjavascriptを古いバージョンに変換するツール。JSX構文をjavascriptが解釈できるように変換もしてくれる。今回は後者の機能のため使用。

reactと同様にheadタグ内に下記コードを追加します。

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

Reactを書き出す

定番の「Hello World!」を表示するコードを作成してみます。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>react cdn sample</title>
  <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>
</head>
<body>
  <div id="root"></div>
  <script type="text/babel">
    function App() {
      return (
        <>
          <h1>Hello World!</h1>
        </>
      )
    }

    // React v17までの書き方
    // ReactDOM.render(<App />, document.getElementById("root"));

    // React v18からはこちら
    const container = document.getElementById("root");
    const root = ReactDOM.createRoot(container);
    root.render(<App />);
  </script>
</body>
</html>

Reactの処理を記入するscriptタグにtype=”text/babel”を入れてください。これがないとbabelが機能しないので動きません

上記のコードで結果ブラウザに反映されました。

▼結果画面

今回はここまでで次回は状態管理useStateをCDNで呼び出して使うようにします。