Feliz.Listeners 1.1.0

Feliz

A fresh retake of the React API in Fable, optimized for happiness.

下面是这样看起来的

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 样式、值和属性。
• 包含最常用的 Html 颜色的 颜色列表 在 colors 模块中。
• 兼容 当前的用于应用的 React DSL。
• 兼容 Femto。
• bundle 大小几乎 无变化，除非您实际使用了该功能，否则所有函数体都将从生成的javascript中删除。

文档

Feliz拥有丰富的文档，可在https://zaid-ajaj.github.io/Feliz找到，其中包含了与代码示例并行的实时示例，请查看并如有任何疑问，请告知我们！