Feliz 2.8.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 旨在通过 hooks、context 等更高级功能支持 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

文档

Feliz提供了丰富的文档，您可以在https://zaid-ajaj.github.io/Feliz上查看，文档中包含了代码示例和实时示例。如果您有任何问题，请随时告知我们！