feat: example01 작성 완료

2020-10-24 18:10:34 +09:00
parent 97c965835f
commit b324b8c57f
1 changed files with 37 additions and 0 deletions
--- a/example01.html
+++ b/example01.html
@@ -0,0 +1,37 @@
 <!doctype html>
 <html lang="ko">
 <head>
  <meta charset="UTF-8">
  <title>Simple Component 1</title>
 </head>
 <body>
 <div id="app"></div>
 <script>
  const $app = document.querySelector('#app');
  let state = {
    items: ['item1', 'item2', 'item3', 'item4']
  }
  const render = () => {
    const { items } = state;
    $app.innerHTML = `
      <ul>
        ${items.map(item => `<li>${item}</li>`).join('')}
      </ul>
      <button id="append">추가</button>
    `;
    document.querySelector('#append').addEventListener('click', () => {
      setState({ items: [ ...items, `item${items.length + 1}` ] })
    })
  }
  const setState = (newState) => {
    state = { ...state, ...newState };
    render();
  }
  render();
 </script>
 </body>
 </html>