2021年2月13日土曜日

javascript React web siteで手っ取り早くJSXを使う方法

 元ネタ

下記のコードを付け加える。

<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

スクリプトのタイプをtext/babelにする。

<script type="text/babel">

例題

<!DOCTYPE html>

<html>

  <head>

    <meta charset="UTF-8" />

    <title>Hello World</title>

    <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>

    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

  </head>

  <body>

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

    <script type="text/babel">

      ReactDOM.render(

        <h1>Hello, world!</h1>,

        document.getElementById('root')

      );

    </script>

  </body>

</html>


とりあえずは、この方法でテストできる。

本番環境では、実行速度に問題があるので、この方法はよくない。

0 件のコメント:

コメントを投稿