React Notes: MarkdownエディタのUIを作る 「React Notes」というReact Server Components(RSC)が発表された時期にReactチーム[1]やVercel[2]が公開していたブログ投稿デモサイトがあって、それをHotwireとHono/JSXで作ってみることでRSCなしに似たようなUXが作れるっていうのを示せるのではと思って、今クローンを作ってみています 現在はテキストエリアにMarkdownを入力するとプレビューをしてくれて、保存→更新の画面遷移がひととうりできるという部分のUIだけ先に試しに書いてみて以下にデプロイしました ソースコードがここにあります SSRな部分をHono/JSXのテンプレート処理系に寄せて クライアントサーバー通信と画面更新のコードはHotwire/Turboで簡略化 イベントハンドラな部分はHotwire/St
![Hotwire/Honoなウェブアプリのアーキテクチャ](https://cdn-ak-scissors.b.st-hatena.com/image/square/7184c472165c0d17cabb2ced48dbc815817f4de8/height=288;version=1;width=512/https%3A%2F%2Fres.cloudinary.com%2Fzenn%2Fimage%2Fupload%2Fs--RFFQS30E--%2Fc_fit%252Cg_north_west%252Cl_text%3Anotosansjp-medium.otf_55%3AHotwire%25252FHono%2525E3%252581%2525AA%2525E3%252582%2525A6%2525E3%252582%2525A7%2525E3%252583%252596%2525E3%252582%2525A2%2525E3%252583%252597%2525E3%252583%2525AA%2525E3%252581%2525AE%2525E3%252582%2525A2%2525E3%252583%2525BC%2525E3%252582%2525AD%2525E3%252583%252586%2525E3%252582%2525AF%2525E3%252583%252581%2525E3%252583%2525A3%252Cw_1010%252Cx_90%252Cy_100%2Fg_south_west%252Cl_text%3Anotosansjp-medium.otf_37%3Alaiso%252Cx_203%252Cy_121%2Fg_south_west%252Ch_90%252Cl_fetch%3AaHR0cHM6Ly9zdG9yYWdlLmdvb2dsZWFwaXMuY29tL3plbm4tdXNlci11cGxvYWQvYXZhdGFyLzM4Nzc0MDcyMDcuanBlZw%3D%3D%252Cr_max%252Cw_90%252Cx_87%252Cy_95%2Fv1627283836%2Fdefault%2Fog-base-w1200-v2.png)