尝试使用ES模块版React
使用skypack.dev提供的ES模块版React，您可以在浏览器中动态加载并显示React模块。
可以通过在现有的 React Formula 页面上添加 React 的方式来实现相同的功能，但由于 React 的功能全局公开，使用 ES 模块版的步骤更值得关注，因此我们创建了这个使用 ES 模块版的步骤。
特点
-
- htmlファイル単独でReactを実行することができます
-
- 単独のhtmlファイルに記載してあるので、エクスプローラーからダブルクリックで実行できます(httpサーバはなくても動きます)
-
- jsxが使えないので、あまり実用的ではないです・・・(トランスパイルしていないので)
⇒babel-standaloneで動的にトランスパイルするコードもつけました
点击按钮即可进行计数的示例样本。
经常见到的非常简单的示例程序现在可以独立运行在HTML文件中。
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>React jsx-esm-standalone</title>
<script type="module">
// CDN経由でReactを読み込む(ESModuleであればブラウザから直接利用可能)
import React, { useState } from "https://cdn.skypack.dev/react";
import ReactDOM from "https://cdn.skypack.dev/react-dom";
const Counter = () => {
const [count, setCount] = useState(0);
const handleClick = () => setCount((n) => n + 1);
return (
// jsxが使えないのでReact.createElement()を直接呼び出す
React.createElement(React.Fragment, null,
React.createElement("div", null, "Count: ", count),
React.createElement("button", {onClick: handleClick}, "Increment"))
);
};
ReactDOM.render(React.createElement(Counter), document.getElementById('app'));
</script>
</head>
<body>
<div id="app"></div>
</body>
</html>
使用babel-standalone动态转译，使得能够使用JSX。
由于将
