FelizはFableでReactを使うのが簡単になるDSLを提供するF#のライブラリだ。
前回のhelloプロジェクトを引き続き利用して組み込んでみる。
まずは依存関係のインストール。
$ cd path/to/hello $ cd frontend $ npm install react@17 react-dom@17 $ cd src $ dotnet add package Feliz -v 1.68.0
Fable 3だとFeliz 1とReact 17が限界のようだ。Fable 4でFeliz 2とReact 18が使えるようになる模様。
frontend/src/App.fsをFelizを使って書くとこんな感じになる。コードフォーマッターのfantomasはもうちょっといい感じに設定したいところだ…
module App open Feliz [<ReactComponent>] let Counter () = let (count, setCount) = React.useState (0) Html.div [ Html.button [ prop.style [ style.marginRight 5 ] prop.onClick (fun _ -> setCount (count + 1)) prop.text "Increment" ] Html.button [ prop.style [ style.marginLeft 5 ] prop.onClick (fun _ -> setCount (count - 1)) prop.text "Decrement" ] Html.h1 count ] open Browser.Dom ReactDOM.render (Counter(), document.getElementById "root")
Reactを知ってる人は雰囲気でどうなるかわかるだろう。
HTMLも合わせて変更。
--- a/frontend/index.html +++ b/frontend/index.html @@ -7,9 +7,7 @@ <link rel="shortcut icon" href="fable.ico" /> </head> <body> - <p>Fable is running</p> - <p>You can click on this button:</p> - <button class="my-button">Click me</button> + <div id="root"></div> <script src="./src/App.fs.js" type="module"></script> </body> </html>
あとはwails devで立ち上がったウィンドウでカウンタの増減がそれっぽく動けば成功。
FelizのリポジトリにFeliz.Svelteとか他にもいろんなパッケージあるの気になる！
