用React和TypeScript在只有一个HTML文件中（无需预编译）运行示例

首先

在React公式网站上，我们可以找到一个示例，展示如何将React添加到现有的网页中。它使用了jsx语法，并将代码直接写在html文件中以供执行。

我正在加载 @babel/standalone，并执行 React。

  <script src="https://unpkg.com/react@18/umd/react.development.js"></script>
  <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
  <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
  <div id="root"></div>
  <script type="text/babel">

    function MyApp() {
      return <h1>Hello, world!</h1>;
    }

    const container = document.getElementById('root');
    const root = ReactDOM.createRoot(container);
    root.render(<MyApp />);
  </script>

我将根据上面的示例，在仅使用HTML的情况下创建一个执行TypeScript和React的示例程序。

实现的功能 de

• Reactをimportで利用する(ES Module)・・・ブラウザがES Moduleを読み込めるようになった

TypeScript(tsx)化・・・Babel7でTypeScriptのトランスパイルをサポート

操作步骤

1. 使用 @babel/standalone 创建一个简单的React应用程序（JavaScript）

将React从