Feliz: рдПрд▓реНрдорд┐рд╢ рдФрд░ рдПрд▓реНрдорд┐рд╢ рдШрдЯрдХреЛрдВ рдХреЗ рд▓рд┐рдП рдкреНрд░рд▓реЗрдЦрди рдореЗрдВ рдореБрдЦреНрдп рдХреЛрдб рд╕реЗ рдЖрд╣реНрд╡рд╛рди рд╢рд╛рдорд┐рд▓ рд╣реИред

рдХреЛ рдирд┐рд░реНрдорд┐рдд 11 рдорд╛рд░реНрдЪ 2021  ┬╖  7рдЯрд┐рдкреНрдкрдгрд┐рдпрд╛рдБ  ┬╖  рд╕реНрд░реЛрдд: Zaid-Ajaj/Feliz

рдпрджрд┐ рдЖрдк рдлрд╝реЗрд▓рд┐рдЬрд╝ рдХреЗ рд▓рд┐рдП рдирдП рд╣реИрдВ рддреЛ рдПрд▓реНрдорд┐рд╢ рд╢реИрд▓реА рдХреЛ рд▓рд╛рдЧреВ рдХрд░рдиреЗ рдХреЗ рд▓рд┐рдП рдХреЛрдб рд╣реЛрдирд╛ рдЖрд╕рд╛рди рд╣реЛрдЧрд╛, рдЙрджрд╛рд╣рд░рдг рдХреЗ рд▓рд┐рдП React Elmish Components section рдкрд░:

open Feliz
open Feliz.UseElmish
open Elmish

type Msg =
    | Increment
    | Decrement

type State = { Count : int }

let init() = { Count = 0 }, Cmd.none

let update msg state =
    match msg with
    | Increment -> { state with Count = state.Count + 1 }, Cmd.none
    | Decrement -> { state with Count = state.Count - 1 }, Cmd.none

let counter = React.functionComponent(fun () ->
    let state, dispatch = React.useElmish(init, update, [| |])
    Html.div [
        Html.h1 state.Count
        Html.button [
            prop.text "Increment"
            prop.onClick (fun _ -> dispatch Increment)
        ]

        Html.button [
            prop.text "Decrement"
            prop.onClick (fun _ -> dispatch Decrement)
        ]
    ]
)

рдпрд╣ рд╕реНрдкрд╖реНрдЯ рдирд╣реАрдВ рд╣реИ рдХрд┐ рдЖрдк рдЗрд╕реЗ рдореБрдЦреНрдп рд░реВрдк рд╕реЗ рдХреИрд╕реЗ рд▓рд╛рдЧреВ рдХрд░реЗрдВрдЧреЗ, рдХреНрдпрд╛ рдЖрдкрдХреЛ makeElmishprogram рдЬреИрд╕реА рдХрд┐рд╕реА рдЪреАрдЬрд╝ рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░рдиреЗ рдХреА рдЖрд╡рд╢реНрдпрдХрддрд╛ рд╣реЛрдЧреА рдпрд╛ рдХреЗрд╡рд▓ рдПрдХ ReactComponent рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░рдирд╛ рд╣реЛрдЧрд╛ рдЬреИрд╕реЗ:

module Main

open Feliz
open Browser.Dom
open Fable.Core.JsInterop

importAll "./styles/global.scss"

ReactDOM.render(
    counter (),
    document.getElementById "feliz-app"
)

рд╕рднреА 7 рдЯрд┐рдкреНрдкрдгрд┐рдпрд╛рдБ

рдпрд╣ рдзреНрдпрд╛рди рджреЗрдиреЗ рдпреЛрдЧреНрдп рднреА рд╣реЛ рд╕рдХрддрд╛ рд╣реИ рдХрд┐ рдкрд╣рд▓реА рдмрд╛рд░ рдЙрдкрдпреЛрдЧ рдХреЗ рдмрд╛рд░реЗ рдореЗрдВ рдмрд╛рдд рдХрд░рддреЗ рд╕рдордп рдПрд▓реНрдорд┐рд╢ рдХреЛ dotnet add package Feliz.UseElmish рдХреЗ рд╕рд╛рде рд╕реНрдерд╛рдкрд┐рдд рдХрд┐рдпрд╛ рдЬрд╛рдирд╛ рдЪрд╛рд╣рд┐рдП, рд▓рд╛рдкрддрд╛ рд╕рдВрджрд░реНрдн рдЦреЛрдЬрдиреЗ рдХреЗ рдмрдЬрд╛рдп рд╕рдмрдХреБрдЫ рдмреЗрд╣рддрд░ рд╣реЛрддрд╛ рд╣реИред

рдЖрдк рд╡рд╛рд╕реНрддрд╡ рдореЗрдВ рдХреЗрд╡рд▓ рдкреНрд░рддрд┐рдХреНрд░рд┐рдпрд╛ рдШрдЯрдХ рдХрд╛ рдЖрд╣реНрд╡рд╛рди рдХрд░реЗрдВрдЧреЗ рдФрд░ рдЙрдкрдпреЛрдЧ рдПрд▓реНрдорд┐рд╢ рд╣реБрдХ рдкреНрд░реЗрд╖рдг рд▓реВрдк рдХрд╛ рдЦреНрдпрд╛рд▓ рд░рдЦреЗрдЧрд╛

Fable 3 . рд╕реЗ рдирдИ рд╕рд╛рдордЧреНрд░реА рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░рдиреЗ рдкрд░ рд╡рд┐рдЪрд╛рд░ рдХрд░реЗрдВ

[<ReactComponent>]
let Counter() = 
  let state, dispatch = React.useElmish(...)
  Html.div [ ]

ReactDOM.render(Counter(), document.getElementById "feliz-app")

рдореИрдВ рдЬрд▓реНрдж рд╣реА рдбреЙрдХреНрд╕ рдХреЛ рдирд╡реАрдирддрдо Fable 3 рдмрд┐рдЯреНрд╕ рдореЗрдВ рдЕрдкрдбреЗрдЯ рдХрд░ рджреВрдВрдЧрд╛ рдФрд░ рднреНрд░рдорд┐рдд рдХрд░рдиреЗ рд╡рд╛рд▓реЗ рдмрд┐рдВрджреБрдУрдВ рдХреЛ рд╕рдВрдмреЛрдзрд┐рдд рдХрд░реВрдВрдЧрд╛

рд╣рд╛рдБ, рдореИрдВ рд╕рд┐рд░реНрдл рдбреЙрдХреНрд╕ рдкрдврд╝ рд░рд╣рд╛ рд╣реВрдБ рдХреНрдпреЛрдВрдХрд┐ рдореИрдВ рдПрд▓реНрдорд┐рд╢ рдХреЗ рд╕рд╛рде рдЧрдбрд╝рдЧрдбрд╝рд╛рд╣рдЯ рдХрд░рдиреЗ рдХреА рдХреЛрд╢рд┐рд╢ рдХрд░рддрд╛ рд╣реВрдБ: - /

@ рдЬрд╝реИрдж-рдЕрдЬрд╛рдЬ рдЖрдЬ рдХреЗ рд▓рд┐рдП рдЕрдВрддрд┐рдо рдкреНрд░рд╢реНрди :-) Feliz.Router рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░рддреЗ рд╕рдордп рдХреНрдпрд╛ рдЖрдкрдХреЛ рдЕрднреА рднреА Program.mkProgram рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░рдирд╛ рд╣реИ?

рдирд╣реАрдВ, рдХреЛрдИ рд╡реИрд╢реНрд╡рд┐рдХ рдХрд╛рд░реНрдпрдХреНрд░рдо рдирд╣реАрдВ рд╣реИ, рдмрд╕ Feliz.Router рдкреИрдХреЗрдЬ рд╕реЗ рд░рд╛рдЙрдЯрд░.рд░рд╛рдЙрдЯрд░ рдШрдЯрдХ рдЬреИрд╕реЗ рд░рд┐рдПрдХреНрдЯ рдШрдЯрдХ рд╣реИрдВред рдЕрдзрд┐рдХ рдЙрджрд╛рд╣рд░рдгреЛрдВ рдХреЗ рд▓рд┐рдП SAFE.React рд░реЗрдкреЛ рджреЗрдЦреЗрдВ :)

@ 7sharp9 рдореИрдВрдиреЗ рд░рд┐рдПрдХреНрдЯ рдПрд▓реНрдорд┐рд╢ рдХрдВрдкреЛрдиреЗрдВрдЯреНрд╕ рдХреЛ рдлреИрдмрд▓ 3 рдмрд┐рдЯреНрд╕ рдореЗрдВ рдЕрдкрдбреЗрдЯ рдХрд┐рдпрд╛ рд╣реИ рдФрд░ рдбрд┐рдкреЗрдВрдбреЗрдВрд╕реА рдРрд░реЗ рдФрд░ рд░рд┐рд╕реЛрд░реНрд╕ рдбрд┐рд╕реНрдкреЛрдЬрд▓ рдХреЗ рдмрд╛рд░реЗ рдореЗрдВ рдФрд░ рдмрд┐рдЯреНрд╕ рдЬреЛрдбрд╝реЗ рд╣реИрдВред рдХреГрдкрдпрд╛ рдПрдХ рдирдЬрд╝рд░ рдбрд╛рд▓реЗрдВ рдФрд░ рдореБрдЭреЗ рдмрддрд╛рдПрдВ рдХрд┐ рдХреНрдпрд╛ рдХреБрдЫ рдЕрдЬреАрдм рдпрд╛ рднреНрд░рдорд┐рдд рдХрд░рдиреЗ рд╡рд╛рд▓рд╛ рд╣реИред

рдХреНрдпрд╛ рдпрд╣ рдкреГрд╖реНрда рдЙрдкрдпреЛрдЧреА рдерд╛?
0 / 5 - 0 рд░реЗрдЯрд┐рдВрдЧреНрд╕