var a = React.createElement(
	"div",
	null,
	React.createElement(
		"h1",
		null,
		"Awesome ",
		React.createElement(
			"b",
			null,
			"React"
		)
	)
);

응?... 불편해서 못한다.

자바스크립트를 확장하였으며 XML과 비슷하게 생긴 새로운 문법, JavaScript XML

bable-loader를 사용하여 자바스크립트로 변환한다.

var a = (
	<div>
		<h1>Awesome <b>React</b></h1>
	</div>
)

훨씬 보기 쉽고 익숙한 코드

바벨에서 JSX → JS로 변환시에 문법에 오류가 있다면 이를 감지하고 알려준다.

감싸인 요소

Virtual DOM에서 컴포넌트 변화를 감지할 때 반드시 트리구조가 되어야 한다.

React 16 이상에서는 Fragment 컴포넌트 제공

자바스크립트 표현

JSX 안에서 자바스크립트 표현식을 사용할 수 있다.

조건부 연산자

JSX 내부의 자바스크립트 표현식에서 if 문을 사용할 수 없다.