// 우리가 작성한 어떤 코드 => 순수하게 실행할 수 있는 자바스크립트
// babel 에 의해서 실행 가능한 JS 로 변환되게 된다.
// babel 의 CDN 을 삽입하고, <script type="text/babel">
	ReactDOM.render(
      <div>
        <div>
          <h1>주제</h1>
          <ul>
            <li>React</li>
            <li>Vue</li>
          </ul>
        </div>
      </div>,
      document.querySelector('#root')
    );

JSX 의 문법 검사는 **엄격**하다.
가독성 면에서 압도적이다.
babel 과 같은 컴파일 과정에서 문법적 오류를 인지하기 쉽다.

JSX 의 문법
1. 최상위 요소는 하나여야 한다.

2. 최상위 요소 리턴하는 경우, ()로 감싼다. -> 최근에는 크게 의식하지 않는 문법

3. 자식들을 바로 Rendering 하고 싶다면, <>자식요소</> 를 사용한다. -> Fragment

4. JS 표현식을 사용하려면, ${} 대신 {} 를 이용한다.

5. if 문은 사용할 수 없다. 삼항 연산자 or && 를 사용한다.

6. style 을 이용해 인라인 스타일링이 가능하다.

7. class 대신 className 을 사용해 class 를 적용할 수 있다.

8. 자식 요소가 있으면, 꼭 닫아야 한다. <p>content</p>
자식 요소가 없으면 열자마자 닫아줘야 한다. <br/>