I am new to Fable. I need to convert this html code (this is just a simplified sample, and btw not mine) into the Fable.React syntax.

<div id="templatemo_header">
    <div id="site_title">
        <h1>
            <a href="/"><img src="/Content/images/templatemo_logo.png" /></a>
        </h1>
    </div>
</div> <!-- end of header -->
<div>
    <div id="templatemo_menu">
        <ul>
            <li><a  href="/">Some text</a></li>            
        </ul>
    </div> <!-- end of templatemo_menu -->
    <div id="templatemo_main">
        <div id="templatemo_content">
            <p id="3">
                Some text......
            </p>                
        </div> <!-- end of content -->           
    </div> <!-- end of main-->
</div>   

I can convert the html code into the Elmish code with the help of this converter, but how to adapt the resulting code into Fable.React? Do you know of any example I could study? So far I have not been able to find any. Probably id should be Props.Id, class should be Props.Class, etc. Where to find the appropriate syntax and indentation?

open Fable.React

let view (model: Model) (dispatch: Msg -> unit) =     

       div [ Props.Id "templatemo_header" ]
        [ div [ Props.Id "site_title" ]
            [ h1 []
                [ a [ Props.Href "/" ]
                    [ img [ Props.Src "/Content/images/templatemo_logo.png" ]
                        []
                    ]
                ]
            ]
        ]
    , div [] //the comma here looks like a problem
        [ div [ Props.Id "templatemo_menu" ]
            [ ul []
                [ li []
                    //The comma in the <a> tag looks like a problem
                    //Or maybe having more than one attribute is a problem 
                    [ a [ Props.Class "current",  Props.Href "/" ]
                        [ text "Some text" ] //text seems to be a problem
                    ]
                ]
            ]
      , div [ Props.Id "templatemo_main" ]
            [ div [ Props.Id "templatemo_content" ]
                [ p [ Props.Id "3" ]
                    [ text "Some text......" ]
                ]
            ]
        ]
    

The converted code does not work (as I have expected). I get error messages such as "Error FS0003 This value is not a function and cannot be applied".

Btw, I did find examples of how to convert html code into Feliz manually (fewer lists - the code then looks better), but manually re-writing the entire third-party html code that I received is out of option for me.

CodePudding user response：

I think you're look for Feliz syntax, which is documented well in The Elmish Book. A quick translation of your first div would look something like this:

open Feliz

Html.div [
    prop.id "templatemo_header"
    prop.children [
        Html.h1 [
            Html.a [
                prop.href "/"
                prop.children [
                    Html.img [
                        prop.src "/Content/images/templatemo_logo.png"
                    ]
                ]
            ]
        ]
    ]
]