Develop mini sample webapp with KReact

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 };

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 };

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 };

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);