diff --git a/example03/src/components/Items.js b/example03/src/components/Items.js
index e286796..7b331fd 100644
--- a/example03/src/components/Items.js
+++ b/example03/src/components/Items.js
@@ -7,10 +7,10 @@ export default class Items extends Component {
template () {
const { items } = this.$state;
return `
-
- ${items.map(item => `- ${item}
`).join('')}
-
-
+
+ ${items.map(item => `- ${item}
`).join('')}
+
+
`
}
@@ -20,4 +20,5 @@ export default class Items extends Component {
this.setState({ items: [ ...items, `item${items.length + 1}` ] });
});
}
-}
\ No newline at end of file
+}
+
diff --git a/example04/index.html b/example04/index.html
new file mode 100644
index 0000000..367c950
--- /dev/null
+++ b/example04/index.html
@@ -0,0 +1,11 @@
+
+
+
+
+ Simple Component 2
+
+
+
+
+
+
\ No newline at end of file
diff --git a/example04/src/app.js b/example04/src/app.js
new file mode 100644
index 0000000..3aa76ed
--- /dev/null
+++ b/example04/src/app.js
@@ -0,0 +1,10 @@
+import Items from "./components/Items.js";
+
+class App {
+ constructor() {
+ const $app = document.querySelector('#app');
+ new Items($app);
+ }
+}
+
+new App();
diff --git a/example04/src/components/Items.js b/example04/src/components/Items.js
new file mode 100644
index 0000000..9f53cea
--- /dev/null
+++ b/example04/src/components/Items.js
@@ -0,0 +1,36 @@
+import Component from "../core/Component.js";
+
+export default class Items extends Component {
+ setup () {
+ this.$state = { items: ['item1', 'item2'] };
+ }
+ template () {
+ const { items } = this.$state;
+ return `
+
+ ${items.map((item, key) => `
+ -
+ ${item}
+
+
+ `).join('')}
+
+
+ `
+ }
+
+ setEvent () {
+ this.$target.querySelector('.addBtn').addEventListener('click', () => {
+ const { items } = this.$state;
+ this.setState({ items: [ ...items, `item${items.length + 1}` ] });
+ });
+
+ this.$target.querySelectorAll('.deleteBtn').forEach(deleteBtn =>
+ deleteBtn.addEventListener('click', ({ target }) => {
+ const items = [ ...this.$state.items ];
+ items.splice(target.dataset.index, 1);
+ this.setState({ items });
+ }))
+ }
+}
+
diff --git a/example04/src/core/Component.js b/example04/src/core/Component.js
new file mode 100644
index 0000000..61e87aa
--- /dev/null
+++ b/example04/src/core/Component.js
@@ -0,0 +1,20 @@
+export default class Component {
+ $target;
+ $state;
+ constructor ($target) {
+ this.$target = $target;
+ this.setup();
+ this.render();
+ }
+ setup () {};
+ template () { return ''; }
+ render () {
+ this.$target.innerHTML = this.template();
+ this.setEvent();
+ }
+ setEvent () {}
+ setState (newState) {
+ this.$state = { ...this.$state, ...newState };
+ this.render();
+ }
+}