From 866d0a288099c1df986eea365edba3931b7a5844 Mon Sep 17 00:00:00 2001
From: Karan Kashyap <karankashyap@gmail.com>
Date: Tue, 4 Jul 2023 02:14:26 -0500
Subject: [PATCH] Develop mini sample webapp with KReact

---
 src/example/components/App.js      | 15 +++++++++++++++
 src/example/components/Counter.js  | 17 ++++++++++++++++
 src/example/components/Greeting.js | 20 +++++++++++++++++++
 src/index.js                       | 31 +++---------------------------
 4 files changed, 55 insertions(+), 28 deletions(-)
 create mode 100644 src/example/components/App.js
 create mode 100644 src/example/components/Counter.js
 create mode 100644 src/example/components/Greeting.js

diff --git a/src/example/components/App.js b/src/example/components/App.js
new file mode 100644
index 0000000..98d47c2
--- /dev/null
+++ b/src/example/components/App.js
@@ -0,0 +1,15 @@
+import { Greeting } from "./Greeting";
+import { Counter } from "./Counter";
+import { createJSXElement } from "../../create_element";
+
+/** @jsx createJSXElement */
+function App(properties) {
+  return (
+    <div style="background: black; padding: 1%">
+      <Greeting username={properties.username} />
+      <Counter />
+    </div>
+  );
+}
+
+export { App };
diff --git a/src/example/components/Counter.js b/src/example/components/Counter.js
new file mode 100644
index 0000000..76d1d6a
--- /dev/null
+++ b/src/example/components/Counter.js
@@ -0,0 +1,17 @@
+import { useState } from "../../useState";
+import { createJSXElement } from "../../create_element";
+
+/** @jsx createJSXElement */
+function Counter() {
+  const [count, setCount] = useState(0);
+  return (
+    <div style="color:green; padding-top: 2%">
+      <h3>This is a counter (implemented with state hooks)</h3>
+      <h4 onClick={() => setCount(count + 1)}>
+        Click count <span style="color:lightblue">(click me!)</span>: {count}
+      </h4>
+    </div>
+  );
+}
+
+export { Counter };
diff --git a/src/example/components/Greeting.js b/src/example/components/Greeting.js
new file mode 100644
index 0000000..7b50cb1
--- /dev/null
+++ b/src/example/components/Greeting.js
@@ -0,0 +1,20 @@
+import { createJSXElement } from "../../create_element";
+
+/** @jsx createJSXElement */
+function Greeting(properties) {
+  return (
+    <div style="text-align:center">
+      <h1 style="color:white"> Hey there, {properties.username}! </h1>
+      <h2 style="color:pink">
+        {" "}
+        Welcome to <span style="color:aqua">KReact</span>!{" "}
+      </h2>
+      <h3 style="color:white">
+        {" "}
+        KReact is your next favorite frontend framework :D
+      </h3>
+    </div>
+  );
+}
+
+export { Greeting };
diff --git a/src/index.js b/src/index.js
index 904fefb..bbe3c6f 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,35 +1,10 @@
 import { createJSXElement } from "./create_element";
 import { renderElement } from "./render";
-import { useState } from "./useState";
+import { App } from "./example/components/App";
 
-// TODO: remove this KReact object; it seems unnecessary
-const KReact = { createJSXElement, renderElement, useState };
-
-/** @jsx KReact.createJSXElement */
+/** @jsx createJSXElement */
 
 const sample_container = document.getElementById("root");
 
-function Counter() {
-  const [count, setCount] = KReact.useState(0);
-  return <h4 onClick={() => setCount(count + 1)}>Click count: {count}</h4>;
-}
-
-function App(properties) {
-  return (
-    <div>
-      <h1>Hey {properties.username}!</h1>
-      <h3>Welcome to KReact!</h3>
-      <h4>
-        Take a tour of this sample KReact site; KReact is guaranteed to become
-        your next favorite frontend framework :D
-      </h4>
-      <br />
-
-      <h3>Here's a counter element implemented with the useState hook:</h3>
-      <Counter />
-    </div>
-  );
-}
-
 const element = <App username="Karan" />;
-KReact.renderElement(element, sample_container);
+renderElement(element, sample_container);