React v18 update (#294)

* Update npm, including react v18

* Update HelloReactHooks

* More generic naming of react component

* package-set 0.15.4-20220723

Author: andys8

package.json

@@ -2,16 +2,16 @@
   "license": "MIT",
   "devDependencies": {
     "esbuild": "^0.14.49",
-    "parcel": "^2.6.0",
+    "parcel": "^2.6.2",
     "process": "^0.11.10",
-    "purescript": "^0.15.3",
-    "spago": "^0.20.3"
+    "purescript": "^0.15.4",
+    "spago": "^0.20.9"
   },
   "dependencies": {
-    "ace-builds": "^1.4.11",
-    "big-integer": "^1.6.48",
-    "react": "^16.14.0",
-    "react-dom": "^16.14.0",
-    "xhr2": "^0.2.0"
+    "ace-builds": "^1.7.1",
+    "big-integer": "^1.6.51",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "xhr2": "^0.2.1"
   }
 }

packages.dhall

@@ -1,6 +1,6 @@
 let upstream =
-      https://github.com/purescript/package-sets/releases/download/psc-0.15.3-20220712/packages.dhall
-        sha256:ffc496e19c93f211b990f52e63e8c16f31273d4369dbae37c7cf6ea852d4442f
+      https://github.com/purescript/package-sets/releases/download/psc-0.15.4-20220723/packages.dhall
+        sha256:efb50561d50d0bebe01f8e5ab21cda51662cca0f5548392bafc3216953a0ed88
 
 let overrides = {=}
 

recipes/HelloReactHooks/spago.dhall

@@ -7,6 +7,7 @@
   , "react-basic-dom"
   , "react-basic-hooks"
   , "web-html"
+  , "web-dom"
   ]
 , packages = ../../packages.dhall
 , sources = [ "recipes/HelloReactHooks/src/**/*.purs" ]

recipes/HelloReactHooks/src/Main.purs

@@ -1,27 +1,30 @@
 module HelloReactHooks.Main where
 
 import Prelude
+
 import Data.Maybe (Maybe(..))
 import Effect (Effect)
 import Effect.Exception (throw)
-import React.Basic.DOM (render)
 import React.Basic.DOM as R
+import React.Basic.DOM.Client (createRoot, renderRoot)
 import React.Basic.Hooks (Component, component)
+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)
 
 main :: Effect Unit
 main = do
-  body <- body =<< document =<< window
-  case body of
-    Nothing -> throw "Could not find body."
-    Just b -> do
-      helloComponent <- mkHelloComponent
-      render (helloComponent {}) (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 {})
 
-mkHelloComponent :: Component {}
-mkHelloComponent = do
-  component "HelloComponent" \_ -> React.do
+mkApp :: Component {}
+mkApp = do
+  component "App" \_ -> React.do
     pure (R.text "Hello!")