chore: add README.md

README.md

@@ -0,0 +1,41 @@
+# Web Component Base Class
+
+This is a base JavaScript class for creating Web Components easily.
+
+When you extend the 'WebComponent' class for your component, you only have to define the `template()` and `observedAttributes()`, and the UI will be reactive on attribute changes.
+
+```js
+import { WebComponent } from "./WebComponent.mjs";
+
+export class HelloWorld extends WebComponent {
+  name = "World";
+  emotion = "excited";
+
+  static get observedAttributes() {
+    return ["name", "emotion"];
+  }
+
+  get template() {
+    return `
+        <h1>Hello ${this.name}${
+            this.emotion === 'sad'
+                ? '. 😭'
+                : '! 🙌'
+        }</h1>
+  }
+}
+```
+
+Then changes in the attributes observed will cause the UI to render.
+
+```html
+<hello-world name="Ayo" emotion="sad">
+<script>
+    const helloWorld = document.querySelector('hello-world');
+    setTimeout(() => {
+        helloWorld.setAttribute('emotion', 'excited');
+    }, 2500)
+</script>
+```
+
+![UI showing feeling toward Web Components changing from SAD to EXCITED](./assets/wc-feeling.gif)