以下是它的外观

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

let root = ReactDOM.createRoot(document.getElementById "root")
root.render(Counter())

特点

• 一致的、轻量级的 格式化：不再在每项元素中使用两个列表进行令人尴尬的缩进。
• 易于发现的 属性，没有了更多的函数、全局可用的 Html 属性或 CSS 属性，因此它们很容易找到。
• 适当的 文档：每个属性和 CSS 属性都有
• 完全支持 React API：Feliz 旨在支持基于钩子、上下文等构建组件的 React API。
• 完全 类型安全：不再有 Margin of obj，而是利用大量重载函数来处理 CSS 属性的重载特性，覆盖了 90% 以上的 CSS 样式、值和属性。
• 包含 colors 模块中大多数常用 Html 颜色的 颜色列表。
• 兼容 当前应用程序中使用的当前 React DSL。
• 兼容 Femto。
• 在您实际使用该功能的情况下，生成的javascript中会删除所有功能体，因此 大小增加几乎为零。

快速入门

dotnet new -i Feliz.Template
dotnet new feliz -n MyProject
cd MyProject
npm install
npm start

文档