fix: use new reactivity system (#301)

Author: tijnjh

content/2-templating/4-event-click/ripple/Counter.ripple

@@ -1,10 +1,12 @@
+import { track } from "ripple";
+
 export component Counter() {
-  let $count = 0;
+  let count = track(0);
 
   function incrementCount() {
-    $count++;
+    @count++;
   }
 
-  <p>{`Count: ${$count}`}</p>
+  <p>{`Count: ${@count}`}</p>
   <button onClick={incrementCount}>{"+1"}</button>
 }

content/3-lifecycle/1-on-mount/ripple/PageTitle.ripple

@@ -1,11 +1,11 @@
-import { effect } from "ripple";
+import { track, effect } from "ripple";
 
 export component PageTitle() {
-  let $pageTitle = "";
+  let pageTitle = track("");
 
   effect(() => {
-    $pageTitle = document.title;
+    @pageTitle = document.title;
   });
 
-  <h1>{`Page title: ${$pageTitle}`}</h1>
+  <h1>{`Page title: ${@pageTitle}`}</h1>
 }

content/3-lifecycle/2-on-unmount/ripple/Time.ripple

@@ -1,15 +1,15 @@
-import { effect } from "ripple";
+import { track, effect } from "ripple";
 
 export component Time() {
-  let $time = new Date().toLocaleTimeString();
+  let time = track(new Date().toLocaleTimeString());
 
   effect(() => {
     const timer = setInterval(() => {
-      $time = new Date().toLocaleTimeString();
+      @time = new Date().toLocaleTimeString();
     }, 1000);
 
     return () => clearInterval(timer);
   });
 
-  <h1>{`Current time: ${$time}`}</h1>
+  <h1>{`Current time: ${@time}`}</h1>
 }