🔤 intro

docs/components/examples/introducing/helloWorld.js

@@ -1,19 +1,30 @@
-import { el } from "deka-dom-el";
+import { el, on } from "deka-dom-el";
 import { S } from "deka-dom-el/signals";
-const threePS= ({ emoji= "🚀" })=> {
-	const clicks= S(0); // A
-	return el().append(
-		el("p", S(()=>
-			"Hello World "+emoji.repeat(clicks.get()) // B
-		)),
-		el("button", {
-			type: "button",
-			onclick: ()=> clicks.set(clicks.get()+1), // C
-			textContent: "Fire",
-		})
-	);
-};
-document.body.append(
-	el(threePS, { emoji: "🎉" }),
-);
 
+// A HelloWorld component using the 3PS pattern
+function HelloWorld({ emoji = "🚀" }) {
+  // PART 1: Create reactive state
+  const clicks = S(0);
+  
+  return el().append(
+    // PART 2: Bind state to UI elements
+    el("p", {
+      className: "greeting",
+      // This paragraph automatically updates when clicks changes
+      textContent: S(() => `Hello World ${emoji.repeat(clicks.get())}`)
+    }),
+    
+    // PART 3: Update state in response to events
+    el("button", {
+      type: "button",
+      textContent: "Add emoji",
+      // When clicked, update the state
+      onclick: () => clicks.set(clicks.get() + 1)
+    })
+  );
+}
+
+// Use the component in your app
+document.body.append(
+  el(HelloWorld, { emoji: "🎉" })
+);