Update TimeReactHooks

Author: andys8

recipes/TimeReactHooks/spago.dhall

@@ -11,6 +11,7 @@
   , "prelude"
   , "react-basic-dom"
   , "react-basic-hooks"
+  , "web-dom"
   , "web-html"
   ]
 , packages = ../../packages.dhall

recipes/TimeReactHooks/src/Main.purs

@@ -11,28 +11,30 @@ import Data.Newtype (class Newtype)
 import Effect (Effect)
 import Effect.Exception (throw)
 import Effect.Timer (clearInterval, setInterval)
-import React.Basic.DOM (render)
 import React.Basic.DOM as R
+import React.Basic.DOM.Client (createRoot, renderRoot)
 import React.Basic.Hooks (Component, Hook, UseEffect, UseState, coerceHook, component, useEffectOnce, useState', (/\))
 import React.Basic.Hooks as React
+import Web.DOM.NonElementParentNode (getElementById)
 import Web.HTML (window)
-import Web.HTML.HTMLDocument (body)
-import Web.HTML.HTMLElement (toElement)
+import Web.HTML.HTMLDocument (toNonElementParentNode)
 import Web.HTML.Window (document)
 
 type Time = { hours :: Int, minutes :: Int, seconds :: Int }
 
 main :: Effect Unit
 main = do
-  body <- body =<< document =<< window
-  case body of
-    Nothing -> throw "Could not find body."
-    Just b -> do
-      time <- mkTime
-      render (time {}) (toElement b)
+  doc <- document =<< window
+  root <- getElementById "root" $ toNonElementParentNode doc
+  case root of
+    Nothing -> throw "Could not find root."
+    Just container -> do
+      reactRoot <- createRoot container
+      app <- mkApp
+      renderRoot reactRoot (app {})
 
-mkTime :: Component {}
-mkTime = do
+mkApp :: Component {}
+mkApp = do
   now <- JSDate.now >>= getTime
   component "Time" \_ -> React.do
     { hours, minutes, seconds } <- useCurrentTime now
@@ -48,7 +50,7 @@ mkTime = do
 
 newtype UseCurrentTime hooks = UseCurrentTime (UseEffect Unit (UseState Time hooks))
 
-derive instance ntUseCurrentTime :: Newtype (UseCurrentTime hooks) _
+derive instance Newtype (UseCurrentTime hooks) _
 
 useCurrentTime :: Time -> Hook UseCurrentTime Time
 useCurrentTime initialTime =