Lograr Lite reaccionar y hacen que el método createElement

función de la createElement (tipo, config, niños) {
   // 1. Crear un objeto 
  // 2. El config parámetro objeto modificado 
  // 3. El parámetro niños como un atributo de apoyos objeto de 
  la dejar virtureDOM = {}; 
  virtureDOM. escriba = tipo; 
  virtureDOM.ref = || config.ref nula ; 
  virtureDOM.key = || Config.key nulo ; 

  el dejar que los apoyos = {}; // dom virtual de los puntales 
  para (const attr en config) { // iterate config eliminado ref tecla de copia y los valores de atributo de los puntales en el 
    IF (attr === 'clave' || attr === 'ref') Continuar ;
    los demás Los puntales [attr] = config [attr]; 
  } 

  const childrenLength = El arguments.length - 2; // crear una pluralidad de parámetros de transmisión puede ser considerada como tercera apertura niños 
  IF (. childrenLength === 1 ) { 
    props.children = niños; // aunque sólo sea un tercer parámetro para que los niños 
  } else  SI (childrenLength> 1. ) { 
    el dejar que childArray = array (childrenLength); // si hay más de uno, se almacena en la matriz childArray 
    para (el dejar que i = 0; I <childrenLength; I ++ ) { 
      childArray [I] = argumentos [I + 2 ]; 
    } 
    props.children =childArray; 
  } 

  virtureDOM.props = los puntales;
   retorno virtureDOM; 
} 

// puestas en elementos DOM objetos reales creados en una página de la última 
función del render (virtureDOM, Recipiente, la devolución de llamada) { 
  el tipo Sea {,} Los apoyos = virtureDOM || { }; 
  el dejar que realDom = document.createElement (tipo); 

  para (attr let en los apoyos) {
     SI (props.hasOwnProperty (attr)!) PAUSA ; // si no es una descripción de la propiedad privada ha atravesado directamente en prototipos 
    SI (! apoyos [attr]) la siguen ; // Si esto no es un valor válido attr, sigue buscando próxima 
    const val =Los puntales [attr];
     // proceso se convierte en nombre de clase de clase 
    SI (attr === 'className') realDom.setAttribute ( 'clase' , Val); 

    el otro  SI (attr === 'niños') { // proceso niños 
      SI ( typeof Val === 'cadena') { // Si sólo hay una cadena para dirigir a los niños para representar texto de 
        texto Let = document.createTextNode (Val); 
        realDom.appendChild (texto); 
      } 
      else  SI (Valle del instanceof array) { // Si los niños es una matriz, entonces tiene que atravesar la matriz y luego representación puntos 
        para (el LET i = 0; I <val.length; I ++ ) {
           IF (typeof Val [I] === 'Cadena' ) { 
            el texto Let = document.createTextNode (Val [I]); 
            realDom.appendChild (texto); 
          } else { 
            el render (Val [I], realDom); 
          } 
        } 
      } 
      else { // si los niños tienen sólo uno y no una matriz o una cadena, entonces debería ser createElement de dom virtual. Recursiva 
        del render (Val, realDom); 
      } 
    } 

    else  SI ( 'estilo' attr ===) { // procesar el atributo de estilo 
      SI (Val === '') Continuar ; // estilo posible es una cadena vacía 
      para ( dejar que pocilgaen Val) {
         SI (val.hasOwnProperty (STY)) realDom [ 'estilo'] [STY] = Val [STY]; 
      } 
    } else realDom.setAttribute (attr, Val); // basado en atributos de rendimiento permiten setAttribute proporcionó la estructura de html 
  } 
  container.appendChild (realDom); 
  la devolución de llamada && la devolución de llamada (); 
} 

const virtureDom2 = la createElement ( 'período' , 
  {}, 'años 18 se está!' ); 

const virtureDom = la createElement ( 'div' , 
  { 
    ID: 'Box' , 
    Nombre de clase: 'LP' , 
    estilo: {color:'rojo'}, 
    Clave: 12 , 
    ref: 'referencias' 
  }, 'mi nombre es LanPang' , virtureDom2); 


render (virtureDom, document.getElementById ( 'root'), () => console.log ( 'Finalizar'));