enpitsulin

var text = 'World'
console.log(`Hello ${text}!`) //Hello World!

var text = 'World'
console.log('Hello'.concat(text, '!')) //Hello World!

export function createElement(type, config, children) {
  var propName
  //保留名を抽出
  var props = {}

  var key = null
  var ref = null
  var self = null
  var source = null
  //タグの属性が空でない場合、タグに属性値があることを示す。特別処理：keyとrefを個別の変数に割り当てる
  if (config != null) {
    //合理的なrefがある
    if (hasValidRef(config)) {
      ref = config.ref
    }
    //合理的なkeyがある
    if (hasValidKey(config)) {
      key = '' + config.key
    }

    self = config.__self === undefined ? null : config.__self
    source = config.__source === undefined ? null : config.__source

    //configの残りの属性で、かつ原生属性（RESERVED_PROPSオブジェクトの属性）でないものは、新しいpropsオブジェクトに追加
    for (propName in config) {
      if (hasOwnProperty.call(config, propName) && !RESERVED_PROPS.hasOwnProperty(propName)) {
        props[propName] = config[propName] //configからkey/refを除去し、他の属性をpropsオブジェクトに追加
      }
    }
  }
  //子要素は1つ以上の引数になり得る、それらは新しく割り当てられたpropsオブジェクトに転送される。
  // 子要素の数（第3引数以降の引数はすべて子要素、兄弟ノード）
  var childrenLength = arguments.length - 2

  if (childrenLength === 1) {
    props.children = children
  } else if (childrenLength > 1) {
    var childArray = Array(childrenLength) //配列を宣言
    //順次childrenを配列にpush
    for (var i = 0; i < childrenLength; i++) {
      childArray[i] = arguments[i + 2]
    }

    {
      //arrayを凍結し、元のchildArrayを返し、変更できないようにする。ライブラリのコアオブジェクトが変更されるのを防ぎ、凍結オブジェクトはパフォーマンスを大幅に向上させる。
      if (Object.freeze) {
        Object.freeze(childArray)
      }
    }
    props.children = childArray //親コンポーネントはthis.props.childrenを通じて子コンポーネントの値を取得
  }

  //子コンポーネントにデフォルト値を設定。一般的にはコンポーネントに対して。
  //class com extends React.componentの場合、com.defaultPropsは現在のコンポーネントの静的メソッドを取得。
  if (type && type.defaultProps) {
    //現在のコンポーネントにデフォルトのdefaultPropsがある場合、現在のコンポーネントのデフォルト内容をdefaultPropsに定義。
    var defaultProps = type.defaultProps

    for (propName in defaultProps) {
      if (props[propName] === undefined) {
        //親コンポーネントの対応する値がundefinedの場合、デフォルト値をpropsの属性として割り当てる。
        props[propName] = defaultProps[propName]
      }
    }
  }

  {
    //refまたはkeyが存在する場合
    if (key || ref) {
      //typeがコンポーネントの場合
      var displayName =
        typeof type === 'function' ? type.displayName || type.name || 'Unknown' : type
      if (key) {
        defineKeyPropWarningGetter(props, displayName)
      }

      if (ref) {
        defineRefPropWarningGetter(props, displayName)
      }
    }
  }

  //props：1.configの属性値 2.childrenの属性（文字列/配列）3.defaultの属性値
  return ReactElement(type, key, ref, self, source, ReactCurrentOwner.current, props)
}

React.createElement(
  'ul',
  {
    // 属性のキーと値のペアを渡す
    className: 'list',
    // 第3引数以降に渡されるパラメータはすべてchildren
  },
  React.createElement(
    'li',
    {
      key: '1',
    },
    '1'
  ),
  React.createElement(
    'li',
    {
      key: '2',
    },
    '2'
  )
)

<ul className="list">
  <li key="1">1</li>
  <li key="2">2</li>
</ul>

if (config != null) {
  //合理的なrefがある
  if (hasValidRef(config)) {
    ref = config.ref
  }
  //合理的なkeyがある
  if (hasValidKey(config)) {
    key = '' + config.key
  }

  self = config.__self === undefined ? null : config.__self
  source = config.__source === undefined ? null : config.__source

  //configの残りの属性で、かつ原生属性（RESERVED_PROPSオブジェクトの属性）でないものは、新しいpropsオブジェクトに追加
  for (propName in config) {
    if (hasOwnProperty.call(config, propName) && !RESERVED_PROPS.hasOwnProperty(propName)) {
      props[propName] = config[propName] //configからkey/refを除去し、他の属性をpropsオブジェクトに追加
    }
  }
}

// 子要素は1つ以上の引数になり得る、それらは新しく割り当てられたpropsオブジェクトに転送される。
// 子要素の数（第3引数以降の引数はすべて子要素、兄弟ノード）
var childrenLength = arguments.length - 2

if (childrenLength === 1) {
  props.children = children
} else if (childrenLength > 1) {
  var childArray = Array(childrenLength) //配列を宣言
  //順次childrenを配列にpush
  for (var i = 0; i < childrenLength; i++) {
    childArray[i] = arguments[i + 2]
  }
  {
    //arrayを凍結し、元のchildArrayを返し、変更できないようにする。ライブラリのコアオブジェクトが変更されるのを防ぎ、凍結オブジェクトはパフォーマンスを大幅に向上させる。
    if (Object.freeze) {
      Object.freeze(childArray)
    }
  }
  props.children = childArray //親コンポーネントはthis.props.childrenを通じて子コンポーネントの値を取得
}

//子コンポーネントにデフォルト値を設定。一般的にはコンポーネントに対して。
//class com extends React.componentの場合、com.defaultPropsは現在のコンポーネントの静的メソッドを取得。
if (type && type.defaultProps) {
  //現在のコンポーネントにデフォルトのdefaultPropsがある場合、現在のコンポーネントのデフォルト内容をdefaultPropsに定義。
  var defaultProps = type.defaultProps

  for (propName in defaultProps) {
    if (props[propName] === undefined) {
      //親コンポーネントの対応する値がundefinedの場合、デフォルト値をpropsの属性として割り当てる。
      props[propName] = defaultProps[propName]
    }
  }
}