diff --git a/.eslintrc.json b/.eslintrc.json
index 8163cb0..917c53f 100644
--- a/.eslintrc.json
+++ b/.eslintrc.json
@@ -11,6 +11,14 @@
   "globals": {
     "BigInt": true
   },
+  "overrides": [
+    {
+      "files": ["*.mjs"],
+      "parserOptions": {
+        "sourceType": "module"
+      }
+    }
+  ],
   "rules": {
     "indent": [
       "error",
diff --git a/JavaScript/1-angular.mjs b/JavaScript/1-angular.mjs
index 9527871..b9965ab 100644
--- a/JavaScript/1-angular.mjs
+++ b/JavaScript/1-angular.mjs
@@ -13,6 +13,14 @@ count.update((prev) => prev + 50);
 console.log(`Count 3: ${count()}`);
 
 const num = signal(1000);
+console.log(`Num 1: ${num()}`);
 
 const total = computed(() => num() + count());
-console.log(`Total: ${total()}`);
+console.log(`Total 1: ${total()}`);
+
+// Display reactivity
+
+num.update((prev) => prev * 2);
+console.log(`Num 2: ${num()}`);
+
+console.log(`Total 2: ${total()}`);
diff --git a/JavaScript/2-preact.js b/JavaScript/2-preact.js
index aae08ee..4f54652 100644
--- a/JavaScript/2-preact.js
+++ b/JavaScript/2-preact.js
@@ -13,6 +13,14 @@ count.value += 50;
 console.log(`Count 3: ${count.value}`);
 
 const num = signal(1000);
+console.log(`Num 1: ${num.value}`);
 
 const total = computed(() => num.value + count.value);
-console.log(`Total: ${total.value}`);
+console.log(`Total 1: ${total.value}`);
+
+// Display reactivity
+
+num.value *= 2;
+console.log(`Num 2: ${num.value}`);
+
+console.log(`Total 2: ${total.value}`);
diff --git "a/JavaScript/3-na\303\257ve.js" "b/JavaScript/3-na\303\257ve-closure.js"
similarity index 76%
rename from "JavaScript/3-na\303\257ve.js"
rename to "JavaScript/3-na\303\257ve-closure.js"
index 7275c24..401bcc2 100644
--- "a/JavaScript/3-na\303\257ve.js"
+++ "b/JavaScript/3-na\303\257ve-closure.js"
@@ -25,6 +25,14 @@ count.update((prev) => prev + 50);
 console.log(`Count 3: ${count()}`);
 
 const num = signal(1000);
+console.log(`Num 1: ${num()}`);
 
 const total = computed(() => num() + count());
-console.log(`Total: ${total()}`);
+console.log(`Total 1: ${total()}`);
+
+// Display reactivity
+
+num.update((prev) => prev * 2);
+console.log(`Num 2: ${num()}`);
+
+console.log(`Total 2: ${total()}`);
diff --git "a/JavaScript/4-na\303\257ve-classes.js" "b/JavaScript/4-na\303\257ve-classes.js"
new file mode 100644
index 0000000..5b9e141
--- /dev/null
+++ "b/JavaScript/4-na\303\257ve-classes.js"
@@ -0,0 +1,46 @@
+'use strict';
+
+class Signal {
+  constructor(value) {
+    this._value = value;
+  }
+
+  get value() {
+    return typeof this._value === 'function' ? this._value() : this._value;
+  }
+
+  set value(newValue) {
+    this._value = newValue;
+  }
+
+  update(fn) {
+    this._value = fn(this._value);
+  }
+}
+
+class Computed extends Signal {
+  constructor(fn) {
+    super(fn);
+  }
+}
+
+// Usage
+
+const count = new Signal(100);
+console.log(`Count 1: ${count.value}`);
+
+count.value = 200;
+console.log(`Count 2: ${count.value}`);
+
+count.update((prev) => prev + 50);
+console.log(`Count 3: ${count.value}`);
+
+const num = new Signal(1000);
+console.log(`Num 1: ${num.value}`);
+
+const total = new Computed(() => num.value + count.value);
+console.log(`Total 1: ${total.value}`);
+
+num.value *= 2;
+console.log(`Num 2: ${num.value}`);
+console.log(`Total 2: ${total.value}`);
diff --git a/JavaScript/4-effect.js b/JavaScript/5-effect-preact.js
similarity index 100%
rename from JavaScript/4-effect.js
rename to JavaScript/5-effect-preact.js
diff --git a/JavaScript/5-effect.js "b/JavaScript/6-effect-na\303\257ve.js"
similarity index 100%
rename from JavaScript/5-effect.js
rename to "JavaScript/6-effect-na\303\257ve.js"