add component

src/App.fs

@@ -1,12 +1,10 @@
-module App
+module Root
 
 open Feliz
 open Browser.Dom
 open Fable.Core.JsInterop
 
-
 importSideEffects "./index.css"
 
-
 let root = ReactDOM.createRoot(document.getElementById "root")
-root.render(App.Components.Counter())
+root.render(App.Main.El())

src/App.fsproj

@@ -5,8 +5,9 @@
   </PropertyGroup>
 
   <ItemGroup>
-    <Compile Include="Components.fs" />
-    <Compile Include="Components.test.fs" />
+    <Compile Include="components/Counter.fs" />
+    <Compile Include="Main.fs" />
+    <Compile Include="Main.test.fs" />
     <Compile Include="App.fs" />
   </ItemGroup>
 

src/Components.fs → src/Main.fs

@@ -4,12 +4,11 @@ open Feliz
 open Fable.Core
 open Fable.Core.JsInterop
 
-type Components() = 
+module Main =
 
     [<ReactComponent>]
-    static member Counter() =
-        let (count, setCount) = React.useState(0)
-
+    let El() =
+
         let viteLogo: unit -> unit = import "default" "./assets/vite.svg"
         let reactLogo: unit -> unit = import "default" "./assets/react.svg"
         importSideEffects "./App.css"
@@ -51,20 +50,7 @@ type Components() =
                 ]
             ]
             Html.h1 "Vite + React + Feliz"
-            Html.div [
-                prop.className "card"
-                prop.children [
-                    Html.button [
-                        prop.onClick (fun _ -> setCount(count + 1))
-                        prop.text $"count is {count}"
-                    ]
-                    Html.p [
-                        Html.text "Edit "
-                        Html.code "src/App.fs"
-                        Html.text " and save to test HMR"
-                    ]
-                ]
-            ]
+            Components.Counter.El()
             Html.p [
                 prop.className "read-the-docs"
                 prop.text " Click on the Vite, React or Fable Vite Plugin logos to learn more"

src/Components.test.fs → src/Main.test.fs

@@ -14,7 +14,7 @@ open Fable.Jester
 open App
 
 Jest.describe("Counter component", fun () ->
-    let element = RTL.render(Components.Counter())
+    let element = RTL.render(App.Main.El())
 
     Jest.test("should render initial count", fun () ->
         let countElement = element.getByText("count is 0")

src/components/Counter.fs

@@ -0,0 +1,24 @@
+module App.Components.Counter
+
+open Feliz
+
+[<ReactComponent>]
+let El() =
+    let (count, setCount) = React.useState(0)
+
+    Html.div [
+        prop.className "card"
+        prop.children [
+            Html.h2 "Counter.fs Yes"
+            Html.button [
+                prop.onClick (fun _ -> setCount(count + 1))
+                prop.text $"count is {count}"
+            ]
+            Html.p [
+                Html.text "Edit "
+                Html.code "src/App.fs"
+                Html.text " and save to test HMR yes"
+            ]
+        ]
+    ]
+