ページ内で部分的に始めるReact導入 by すばる

Smarty などのテンプレートエンジンで構築された既存ページに React を導入したい場面、ありますよね？

中には「ページまるごとリプレイス」ではなく「ページの中で部分的に React 導入」を選ぶべき場面も多いはずです。

この LT では、Astro で知られる "Islands Architecture" の概念を、
フレームワークに頼らず既存のシステム上で再現・実践するためのアプローチを 5 分間に濃縮します。

概念自体は React の大前提とも言えるユースケースであり、一見シンプルに見えます。
理論上は、script タグで React をロードして、createElement することもできます。

しかし、JSX はほしいですし、TypeScript 対応や npm ライブラリの利用にはビルドが必要となり、
アーキテクチャやデプロイフローが一気に複雑化してしまいます。

このような悩みに対して、理想論ではない「現実的で実践的な付き合い方」をお話します。