React - JSX와 Babel

 

JSX

 

const element = <h1>Hello, world!</h1>;

 

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

- React.createElement 표현식

- JSX는 React 엘리먼트를 생성하면서 자바스크립트의 모든 기능을 쓸 수 있도록 도와준다

 

---

 

Babel

 

- JavaScript Compiler

- 컴파일러: 언어 해석기, 특정 언어를 다른 프로그래밍 언어로 옮기는 프로그램

- JSX 표현을 JavaScript가 이해할 수 있는 표현으로 바꿔준다

 

https://babeljs.io/

Babel · The compiler for next generation JavaScript

 

왼쪽 - JSX 코드를

오른쪽 - 트랜스파일(transpile)이라는 과정을 거쳐서 브라우저가 이해할 수 있는 순수한 자바스크립트 코드로 변환

 

---

 

예제 - JSX 문법으로 Hello, world! 띄우기