Use Feliz

Author: dedale

src/Client/Client.fsproj

@@ -1,24 +1,25 @@
 <?xml version="1.0" encoding="utf-8"?>
 <Project Sdk="Microsoft.NET.Sdk">
-    <PropertyGroup>
-        <TargetFramework>netcoreapp3.1</TargetFramework>
-        <DefineConstants>FABLE_COMPILER</DefineConstants>
-    </PropertyGroup>
-    <ItemGroup>
-        <None Include="index.html" />
-        <Compile Include="Index.fs" />
-        <Compile Include="App.fs" />
-    </ItemGroup>
-    <ItemGroup>
-        <ProjectReference Include="..\Shared\Shared.fsproj" />
-    </ItemGroup>
-    <ItemGroup>
-        <PackageReference Include="Fable.Core" Version="3.1.5" />
-        <PackageReference Include="Fable.Elmish" Version="3.0.6" />
-        <PackageReference Include="Fable.Elmish.React" Version="3.0.1" />
-        <PackageReference Include="Fable.Elmish.Debugger" Version="3.2.0" />
-        <PackageReference Include="Fable.Elmish.Hmr" Version="4.0.1" />
-        <PackageReference Include="Fable.React" Version="5.3.6" />
-        <PackageReference Include="Thoth.Fetch" Version="2.0.0" />
-    </ItemGroup>
+  <PropertyGroup>
+    <TargetFramework>netcoreapp3.1</TargetFramework>
+    <DefineConstants>FABLE_COMPILER</DefineConstants>
+  </PropertyGroup>
+  <ItemGroup>
+    <None Include="index.html" />
+    <Compile Include="Index.fs" />
+    <Compile Include="App.fs" />
+  </ItemGroup>
+  <ItemGroup>
+    <ProjectReference Include="..\Shared\Shared.fsproj" />
+  </ItemGroup>
+  <ItemGroup>
+    <PackageReference Include="Fable.Core" Version="3.1.5" />
+    <PackageReference Include="Fable.Elmish" Version="3.0.6" />
+    <PackageReference Include="Fable.Elmish.React" Version="3.0.1" />
+    <PackageReference Include="Fable.Elmish.Debugger" Version="3.2.0" />
+    <PackageReference Include="Fable.Elmish.Hmr" Version="4.0.1" />
+    <PackageReference Include="Fable.React" Version="7.2.0" />
+    <PackageReference Include="Feliz" Version="1.32.0" />
+    <PackageReference Include="Thoth.Fetch" Version="2.0.0" />
+  </ItemGroup>
 </Project>

src/Client/Index.fs

@@ -23,14 +23,20 @@ let update msg model =
     | GotHello hello ->
         { model with Hello = hello }, Cmd.none
 
-open Fable.React
-open Fable.React.Props
+open Feliz
 
 let view model dispatch =
-    div [ Style [ TextAlign TextAlignOptions.Center; Padding 40 ] ] [
-        div [] [
-            img [ Src "favicon.png" ]
-            h1 [] [ str "safe_minimal" ]
-            h2 [] [ str model.Hello ]
+    Html.div [ 
+        prop.style [
+            style.fontFamily "sans-serif"
+            style.textAlign.center
+            style.padding 40
+        ]
+        prop.children [
+            Html.div [
+                Html.img [ prop.src "favicon.png" ]
+                Html.h1 "safe_minimal"
+                Html.h2 model.Hello
+            ]
         ]
     ]