denoとTypeScriptでReactを使いたい
目標はブラウザに任意のdomを追加して動かすこと
今回、サーバーサイドのReactには手を触れない
後でまとめるかもしれない
前提
後述の派生ページでは、（特筆する場合を除き）以下のソースコードを共通で使用する
html
code:a.html
<!DOCTYPE html>
<head>
<title>main.html</title>
<script type="module" src="a.js"></script>
<link rel="stylesheet" href="a.css">
</head>
<body>
</body>
上のa.htmlと同じディレクトリ（フォルダ）に、下のa.cssとa.tsxをコンパイルしたa.jsを入れる
コンパイルはdeno bundle a.tsx a.jsというコマンドを入力してできる
CSS
無くても良いが、あったほうが見やすくなる
code:a.css
div.foo {
width: 150px;
height: 150px;
background-color: aqua;
}
TypeScript
ソースコード冒頭に書くライブラリ指定
code:a.tsx
/// <reference no-default-lib="true" />
/// <reference lib="esnext" />
/// <reference lib="dom" />
ライブラリのimport文
code:a.tsx
import ReactDOMClient, {
createRoot,
code:a.tsx
function sleep(ms: number) {
return new Promise((res) => setTimeout(res, ms));
}
派生ページ一覧
要素を追加する
追加した要素を動かす
DOMを操作したい