React.createElement(
	type, // 태그 이름 문자열 | 리액트 컴포넌트 | React.Fragment
  [props], // 리액트 컴포넌트에 넣어주는 데이터 객체
  [...childern] // 자식으로 넣어주는 요소들
);

// 1. 태그 이름 문자열 type
ReactDOM.render(
	React.createElement('h1', null, `type 이 "태그 이름 문자열" 입니다.`),
	document.querySelector("#root")
);

<div id="root">
	<h1>type 이 "태그 이름 문자열" 입니다.</h1>
</div>

// 2. 리액트 컴포넌트 type
const Component = () => React.createElement('p', null, `type 이 "React 컴포넌트" 입니다.`);

// <Component></Component> => <Component /> => <p>type 이 "React 컴포넌트" 입니다.</p>
ReactDOM.render(
	React.createElement(Component, null, null),
	document.querySelector("#root")
);

<div id="root">
	<p>type 이 "React 컴포넌트" 입니다.</p>
</div>

// 3. React.Fragment
ReactDOM.render(
	React.createElement(
	  React.Fragment,
    null,
    `type 이 "React Fragment" 입니다.`,
    `type 이 "React Fragment" 입니다.`,
    `type 이 "React Fragment" 입니다.`
	),
  document.querySelector("#root")
);

<div id="root">
	type 이 "React Fragment" 입니다.
	type 이 "React Fragment" 입니다.
	type 이 "React Fragment" 입니다.
</div>

// root 인 div 밑에 자식요소를 배열처럼 넣고 싶다 할 때 사용 할 수 있다.

<div>
	<div>
	  <h1>주제</h1>
    <ul>
	    <li>React</li>
      <li>Vue</li>
     </ul>
	</div>
</div>

// 4. 복잡한 리액트 앨리먼트 모임
    ReactDOM.render(
      React.createElement('div', null, 
        React.createElement('div', null, 
          React.createElement('h1', null, "주제"), 
          React.createElement('ul', null, 
            React.createElement("li", null, "React"),
            React.createElement("li", null, "Vue")
          )
        )
      ),
      document.querySelector('#root')
    );

**가독성 매우 불쾌! babel 로 개선 가능.**
다음 장에서 이에 관해 다룬다.