静的なHTMLでReactを使う｜BabelによるJSXのコンパイル

投稿日 12月 17, 2023
更新日 1月 7, 2024
著者しんぺー
カテゴリー React

静的なHTMLでReactを使用してみます。

JSXをJavaScriptにコンパイルするBabelをCDNで読み込み、ブラウザが解釈できるJavaScriptにコンパイルすることで、静的なHTMLでもReactを使用できます。

ただしこの方法は実案件では使用しないでください。
コンソールにも「プロダクション環境でご利用の場合は事前にコンパイルしてください」と警告がでます。

ではなぜわざわざやるの？

通常プロジェクトの作成はcreate-react-appで自動で行われますが、何が起きているのかわからないので、今回はBabelによるJSXのコンパイルを見ていきたいと思います。

Web制作をされている方であればjQueryや、jQueryのライブラリを読み込む感覚で使用できるので理解しやすいと思います。

完成形のHTMLファイル

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>BabelによるJSXの変換</title>

</head>

<body>
  <div id="root"></div>

  <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://unpkg.com/@babel/standalone/babel.min.js"></script>
  
  <script type="text/babel">
    function App() {
      const comments = ['コメント1', 'コメント2'];
      return (
        <div className="container">
          {comments.map((comment, index) => (
            <ul key="index">
              <li>{comment}</li>
            </ul>
          ))}
        </div>
      )
    }
    ReactDOM.render(<App />, document.getElementById('root'));
  </script>
</body>

</html>

読み込むファイルは3つ

CDNで読み込むファイルは以下です。
ReactとReactDOMは開発版（development）を使用しています。プロダクト版でも使用できます（production）

react.development.min.js
react-dom.development.min.js
babel.min.js

JSX記述時の注意点

JSXは<script></script>タグ内に記述しますが、かならず<script type="text/babel"></script>とtype="text/babel"と記載してください。type="text/babel"と記載することでBabelが実行されJSXがJavaScriptにコンパイルされます。