React classic with React 18

Author: mjrussell

examples/actions/package-lock.json

@@ -4,8 +4,8 @@
     "build": "spago build"
   },
   "dependencies": {
-    "react": "^17.0.1",
-    "react-dom": "^17.0.1"
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0"
   },
   "devDependencies": {
     "parcel": "^2.6.0",

examples/actions/package.json

@@ -6,7 +6,7 @@ import Actions (actions)
 import Data.Maybe (Maybe(..))
 import Effect (Effect)
 import Effect.Exception (throw)
-import React.Basic.DOM (render)
+import React.Basic.DOM.Client (createRoot, renderRoot)
 import Web.DOM.NonElementParentNode (getElementById)
 import Web.HTML (window)
 import Web.HTML.HTMLDocument (toNonElementParentNode)
@@ -17,6 +17,7 @@ main = do
   container <- getElementById "container" =<< (map toNonElementParentNode $ document =<< window)
   case container of
     Nothing -> throw "Container element not found."
-    Just c  ->
+    Just c  -> do
+      root <- createRoot c
       let app = actions { label: "Increment" }
-       in render app c
+      renderRoot root app

examples/actions/src/Main.purs

@@ -4,8 +4,8 @@
     "build": "spago build"
   },
   "dependencies": {
-    "react": "^17.0.1",
-    "react-dom": "^17.0.1"
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0"
   },
   "devDependencies": {
     "parcel": "^2.6.0",

examples/async/package-lock.json

@@ -6,7 +6,7 @@ import AsyncCounter (asyncCounter)
 import Data.Maybe (Maybe(..))
 import Effect (Effect)
 import Effect.Exception (throw)
-import React.Basic.DOM (render)
+import React.Basic.DOM.Client (createRoot, renderRoot)
 import Web.DOM.NonElementParentNode (getElementById)
 import Web.HTML (window)
 import Web.HTML.HTMLDocument (toNonElementParentNode)
@@ -17,6 +17,7 @@ main = do
   container <- getElementById "container" =<< (map toNonElementParentNode $ document =<< window)
   case container of
     Nothing -> throw "Container element not found."
-    Just c  ->
+    Just c  -> do
+      root <- createRoot c
       let app = asyncCounter { label: "Async Increment" }
-       in render app c
+      renderRoot root app