esbuild なら React の playground が5秒で出来る！！！！！

esbuild はプラグインなしで JSX・TSXをコンパイルできるから、React のプレイグラウンドがすぐ作れる！！

$ npm init --yes
$ npm i esbuild react react-dom
$ esbuild src/main.tsx --bundle '--define:process.env.NODE_ENV="development"' --outfile=out.js

型チェックが不要なら typescript のインストールすらいらない！！！！tsconfig.json なんて要らなかったんだ！！！

import React, {render} from 'preact/compat';

interface Props {
  name: string;
}
const App: React.FC<Props> = ({name}: Props) => <h1>Hello {name}</h1>;

render(<App/>, document.querySelector('#main'));

webpack も typescript もナシで TSX がコンパイルできる！！！！！！！すごいだろ。しかも早いんだぜ。すげえだろ。

ただし: 結局 Next.js が欲しくなる

まあ、作ってるうちに結局 ESLint も Prettier も欲しくなってくるし、 型チェックもほしくなる。watch すら簡単にできないので面倒。

はじめから Next.js で作るほうが結局は楽なので、playground と割り切るとき以外 esbuild は使わないほうが吉。

ただ、React の機能を試す playground がほしい時は本当にすぐ完成するので最高。