概要
ReactのTSXは直接ブラウザで実行できないのでJavaScriptへのトランスパイルが必要なんですが、Babel Standaloneはブラウザ上で動いてTSXのトランスパイルが可能なので、これを利用してブラウザだけで実行させたい。
問題
HTML内に直接書いたコードであればその内容を文字列として取得して単純にBabelでトランスパイルすれば十分なのですが、script要素のsrc属性で指定したコードや、importで取り込んだコードはそういうわけにはいきません。拡張子が違うと怒られたりそれをどうにかしてもトランスパイルなしで直接実行しようとしてエラーになったりします。
解決策
ServiceWokerを使えばHTTPリクエストをフックしてブラウザ内で独自処理やレスポンス返却ができるので、TSXへのリクエストが有ればトランスパイルしてJavaScriptとしてレスポンスを返すようにすればsrc属性やimport経由でロードしたTSXもトランスパイルが可能なのではないか？
結果
できました。
本体はReactライブラリを読んで初期化し、App.tsxのAppコンポーネントをレンダリングするindex.htmlと、リクエストを受けてJavaScriptにトランスパイルするsw.jsの2つだけです。主だったライブラリはすべてCDNから取り込んでいるのでインストール作業は必要ありません。
※ただし、VSCodeでコーディングする場合は何もしないと型宣言がないというエラーが煩いので、それが嫌ならnpmで@types/reactをインストールする必要があるかもしれません。