이 코드를 리액트에서는 다음과 같이 작성해야 했습니다.

리액트

React.createElement(
  'div',
  null,
  React.createElement('h1', null, 'Hello, React!')
);

아주 단순한 구조인데도 코드가 길고 복잡합니다. 코드가 길어질수록 더 보기 어렵고, 실수도 늘어납니다. 이런 불편함을 해결하기 위해 등장한 것이 바로 JSX입니다.

JSX를 사용하면 다음과 같이 훨씬 간단하게 작성할 수 있습니다.

JSX

<div>
  <h1>Hello, React!</h1>
</div>

앞서 설명했듯이 HTML처럼 보이지만 JSX 문법입니다. 리액트는 JSX를 내부적으로 create Element() 호출 코드로 바꿔 실행합니다.