Lesson 26 - STATE

isel-leic-daw · Nov 8, 2024 · 3f7eab2 · 3f7eab2
1 parent 81c3969
commit 3f7eab2
Show file tree

Hide file tree

Showing 4 changed files with 84 additions and 3 deletions.
diff --git a/lesson26-react-state/public/index.html b/lesson26-react-state/public/index.html
@@ -3,7 +3,7 @@
         <script src="bundle.js" type="module"></script>
     </head>
     <body>
-        <h1>Demo JS and React and DOM</h1>
+        <h3>Demo React and STATE</h3>
         <div id="container"></div>
     </body>
 </html>
diff --git a/lesson26-react-state/src/demo04-state-counter-WRONG.tsx b/lesson26-react-state/src/demo04-state-counter-WRONG.tsx
@@ -0,0 +1,42 @@
+import * as React from 'react'
+import * as ReactDom from 'react-dom/client'
+
+/*
+ * DON'T DO THIS:
+ * - Don't use MUTABLE state!!!!!
+ * - Don't capture MUTABLE state from a Component Funcion with CLOSURE
+ */
+let count = 0
+
+function Counter() {
+    function incrementHandler() {
+        count++
+        myRender() // !!!!! DON'T DO THIS !!!! DO NOT CALL RENDER - NEVER
+    }
+    function decrementHandler() {
+        count-- 
+        myRender() // !!!!! DON'T DO THIS !!!! DO NOT CALL RENDER - NEVER
+    }
+    return (
+        <div>
+            <button onClick={decrementHandler}>-</button>
+            <b>{count}</b>
+            <button onClick={incrementHandler}>+</button>
+        </div>
+    )
+}
+
+const root = ReactDom.createRoot(document.getElementById('container'))
+
+function myRender() {
+    root.render(
+        <div>
+            <Counter />
+            <Counter />
+        </div>
+    )
+}
+
+export function demo04() {
+  myRender()  
+}
diff --git a/lesson26-react-state/src/demo05-state-counter-hooks.tsx b/lesson26-react-state/src/demo05-state-counter-hooks.tsx
@@ -0,0 +1,37 @@
+import * as React from 'react'
+import * as ReactDom from 'react-dom/client'
+
+function Counter() {
+    const [count, setCount] = React.useState(0)
+    const [label, setLabel] = React.useState("even")
+    function incrementHandler() {
+        setCount(count + 1)
+    }
+    function decrementHandler() {
+        setCount(count - 1)
+    }
+    return (
+        <div>
+            <button onClick={decrementHandler}>-</button>
+            <b>{count}</b>
+            <button onClick={incrementHandler}>+</button>
+            {/* Show the value of State label with the even or odd according to the count */}
+        </div>
+    )
+}
+
+const root = ReactDom.createRoot(document.getElementById('container'))
+
+function myRender() {
+    root.render(
+        <div>
+            <Counter />
+            <Counter />
+            <Counter />
+        </div>
+    )
+}
+
+export function demo05() {
+  myRender()  
+}
diff --git a/lesson26-react-state/src/index.ts b/lesson26-react-state/src/index.ts
@@ -1,5 +1,7 @@
 // import { demo01 } from "./demo01-intro-react"
 // import { demo02 } from "./demo02-reconciliation"
-import { demo03 } from "./demo03-components"
+// import { demo03 } from "./demo03-components"
+import { demo04 } from "./demo04-state-counter-WRONG";
+import {demo05} from "./demo05-state-counter-hooks"
 
-demo03()
+demo05()