[React - 기초] JSX, Babel

1. JSX

문자도 HTML도 아닌 JavaScript의 확장 문법

const text = "Hello, world!";
const textClass = "title"
const element = <h1 className = {textClass}>{text}</h1>

React 개발을할 때 JSX는 필수가 아니다. 하지만 시각적으로 더 도움이 된다.

 

2. Babel

JavaScript Complier로 React 언어를 JavaScript가 이해할 수 있게 해석해주는 프로그램이다. 

const text = "Hello, world!";
const textClass = "title"
const element = <h1 className = {textClass}>{text}</h1>
=
	// 바벨처리
=>
const text = "Hello, world!";
const textClass = "title";
const element = /*#__PURE__*/React.createElement("h1", {
  className: textClass
}, text);