let newContent = null;

// the function that will create virtual-dom object
const createDom = title => (
    h('div', null,
        h('h1', { className: 'header' }, title),
        h('p', null , 'Lorem ipsum'),
        h('footer', { className: 'footer' }, 'The footer'),
    )
);

// create virtual-dom object
let content = createDom('Some title');

// render the virtual dom object into the real dom
render(content, document.getElementById('app'));

const rerender = () => {

    // create the virtual-dom object again but with dfferent properties
    newContent = createDom('Some other title');

    // patches object that will be used to modify changed elements
    const patches = diff(content, newContent);

    //appy patches
    patch(appContainer, patches);

    // update content
    content = newContent;
};

h('div', { className: 'section' },
    h('h1', { style: {color: 'red'} }, 'Section title'),
));

{
   type: "div",
   props: {
      className: "section",
      children: [
         {
            type: "h1",
            props: {
               style: {
                  color: "red"
               },
               children: [
                  "Section title"
               ]
            }
         }
      ]
   }
}

// content = h(..., h(...))
render(content, document.getElementById('app'));

const oldVDOM = h('h1', null, 'Hello title');
const newVDOM = h('h1', { className: 'header' }, 'Hello new class');
const patches = diff(oldVDOM, newVDOM);

{
   0:{
      childrenPatches: {
         0: {
            selfPatch: {
               type: PATCH_TEXT_NODE,
               payload: "Hello new class"
            }
         }
      }
   }
}

const patches = diff(oldVDOM, newVDOM);
patch(document.getElementById('app'), patches);