The working code at the end of chapter Component class

    1. index.js
    3. function createVComponent(tag, props) {
    4.   return {
    5.     tag: tag,
    6.     props: props,
    7.     dom: null,
    8.   }
    9. }
    11. function createVElement(tag, config, children = null) {
    12.   const { className, style } = config;
    14.   return {
    15.     tag: tag,
    16.     style: style,
    17.     props: {
    18.       children: children,
    19.     },
    20.     className: className,
    21.     dom: null,
    22.   }
    23. }
    25. function createElement(tag, config, children) {
    26.   // If the tag is a function. We have a component!
    27.   // we will see later why. 
    28.   if (typeof tag === 'function') {
    29.     //of course we could do some checks here if the props are 
    30.     //valid or not.
    31.     const vNode = createVComponent(tag, config);
    32.     return vNode;
    33.   }
    35.   //Add children on our props object, just as in React. Where
    36.   //we can acces it using this.props.children;
    38.   const vNode = createVElement(tag, config, children);
    39.   return vNode;
    40. }
    43. function mount(input, parentDOMNode) {
    44.   if (typeof input === 'string' || typeof input === 'number') {
    45.     //we have a vText
    46.     return mountVText(input, parentDOMNode);
    47.   } 
    48.   else if (typeof input.tag === 'function') {
    49.     //we have a component
    50.     return mountVComponent(input, parentDOMNode);
    51.   }
    52.   // for brevity make an else if statement. An
    53.   // else would suffice. 
    54.   else if (typeof input.tag === 'string') {
    56.     //we have a vElement
    57.     return mountVElement(input, parentDOMNode)
    58.   }
    59. }
    61. function mountVComponent(vComponent, parentDOMNode) {
    62.   const { tag, props } = vComponent;
    64.   // build a component instance. This uses the 
    65.   // defined Component class. For brevity 
    66.   // call it Component. Not needed ofcourse, new tag(props)
    67.   // would do the same. 
    68.   const Component = tag;
    69.   const instance = new Component(props);
    71.   // The instance or Component has a render() function 
    72.   // that returns the user-defined vNode.
    73.   const nextElement = instance.render();
    75.   // the nextElement can be a vElement or a
    76.   // vComponent. mountVComponent doenst't care. Let the mount()
    77.   // handle that!
    78.   const dom = mount(nextElement, parentDOMNode);
    79.   //append the DOM we've created.
    80.   parentDOMNode.appendChild(dom);
    82.   return dom;
    83. }
    85. function mountVText(vText, parentDOMNode) {
    86.   // Oeeh we received a vText with it's associated parentDOMNode.
    87.   // we can set it's textContent to the vText value. 
    88.   // https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent
    89.   parentDOMNode.textContent = vText;
    90. }
    92. function mountVElement(vElement, parentDOMNode) {
    93.   const { className, tag, props, style } = vElement;
    95.   const domNode = document.createElement(tag);
    96.   vElement.dom = domNode;
    97.   if (props.children) {
    98.      // Oeh, we have children. Pass it back to our mount
    99.      // function and let it determine what type it is.
    100.      props.children.forEach(child => mount(child, domNode));
    101.   }
    103.   if (className !== undefined) {
    104.     domNode.className = className;
    105.   }
    107.   if (style !== undefined) {
    108.     Object.keys(style).forEach(sKey => domNode.style[sKey] = style[sKey]);
    109.   }
    111.   parentDOMNode.appendChild(domNode);
    113.   return domNode;
    114. }
    116. class Component {
    117.   constructor(props) {
    118.     this.props = props || {};
    119.   }
    120.   setState(partialNewState) {
    121.     // Awesome things to come
    122.   }
    123.   //will be overridden
    124.   render() {}
    125. }
    127. //get native DOM, For now let's use the body;
    128. const root = document.body;
    129. //create vElement
    130. class App extends Component {
    131.   render() {
    132.     return createElement('div', { style: { height: '100px', background: 'red'} }, [
    133.       createElement('h1', {}, [ this.props.message ])
    134.     ]);
    135.   }
    136. }
    138. mount(createElement(App, { message: 'Hello there!' }), root);