Add 4f Solution

SuperSimpleDev · SuperSimpleDev · commit 7dbdb852763e · 2024-11-20T03:04:16.000-05:00
diff --git a/1-exercise-solutions/lesson-04/4f.html b/1-exercise-solutions/lesson-04/4f.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>React Basics</title>
+    <style>
+    </style>
+  </head>
+  <body>
+    <div class="js-container"></div>
+
+    <script src="https://unpkg.com/supersimpledev/dayjs.js"></script>
+
+    <script src="https://unpkg.com/supersimpledev/react.js"></script>
+    <script src="https://unpkg.com/supersimpledev/react-dom.js"></script>
+
+    <script src="https://unpkg.com/supersimpledev/babel.js"></script>
+    <script type="text/babel">
+      function App() {
+        const [time, setTime] = React.useState(
+          dayjs().format('HH:mm:ss')
+        );
+
+        React.useEffect(() => {
+          setInterval(() => {
+            setTime(dayjs().format('HH:mm:ss'));
+          }, 1000);
+
+        // Important: make sure to give React.useEffect()
+        // a dependency array of [] so it only runs once!
+        }, []);
+
+        return (
+          <p>Current time: {time}</p>
+        );
+      }
+
+      const container = document.querySelector('.js-container');
+      ReactDOM.createRoot(container).render(<App />);
+    </script>
+  </body>
+</html>
