Feliz.UseElmish 2.5.0

Feliz

在 Fable 中对 React API 的一次全新尝试，以快乐为目标进行优化。

以下是它的样子

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 样式、值和属性。
• 包含常用的 Html 颜色的 颜色列表，在 colors 模块中。
• 兼容性：与当前在应用程序中使用的前端 React DSL 兼容。
• 兼容性：Femto。
• 在没有实际使用所述函数的情况下，所有函数体都会从生成的javascript中删除，因此大约零包大小增加。

快速入门

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

文档

Feliz 在 https://zaid-ajaj.github.io/Feliz 提供了详细的文档，其中包含代码示例和实时示例，请查看它们，如果您有任何问题，请告诉我们！