add js example

examples/full_tutorial.ipynb

@@ -550,10 +550,52 @@
    "metadata": {},
    "source": [
     "Cool! But is this also possible to  **observe a traitlet and call Javascript function** everytime the value of that traitlet changes?   \n",
-    "Indeed, it is.  \n",
+    "Indeed, it is.  (TODO: This example is not yet ready!)\n",
     "Like this:"
    ]
   },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "id": "ef5aaf1d",
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "class PrimeJavaScriptWidget(ipyreact.ReactWidget):\n",
+    "    prime_message = Any(\"Click the Button\").tag(sync=True)    # <- TODO: this message does not show up because prime_message is overwritten\n",
+    "    count = Int(0).tag(sync=True)\n",
+    "\n",
+    "    _esm = \"\"\"\n",
+    "    import * as React from \"react\";\n",
+    "\n",
+    "    function isPrimeNumber(n) {\n",
+    "    for (let i = 2; i < n; i++) {\n",
+    "        if (n % i === 0) {\n",
+    "        return \"No 🌐🧊🧊🧊\";\n",
+    "        }\n",
+    "    }\n",
+    "    return \"Yes 🌐✅✅✅\";\n",
+    "    }\n",
+    "\n",
+    "    export const MyUpdater = ({ count, prime_message}) => {\n",
+    "    prime_message = isPrimeNumber(count);\n",
+    "    return <span> {prime_message} </span>;\n",
+    "    };\n",
+    "\n",
+    "    export default function ({ on_count, count, prime_message}) {\n",
+    "    return (\n",
+    "        <div>\n",
+    "        <button onClick={() => on_count(count + 1)}>{count} times clicked</button>\n",
+    "        <br />\n",
+    "        <MyUpdater count={count} prime_message = {prime_message}/>\n",
+    "        </div>\n",
+    "    );\n",
+    "    }\n",
+    "    \"\"\"\n",
+    "primejs = PrimeJavaScriptWidget()\n",
+    "primejs"
+   ]
+  },
   {
    "cell_type": "markdown",
    "id": "82c9fbe3-6112-4dae-b817-e1a12343b407",