Feliz.Recharts 4.2.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 提供了丰富的文档，其中包含代码示例和实时示例，请查看它们，并且如果您有任何问题，请让我们知道！