React 시작하기

라이브러리 추가

https://ko.reactjs.org/docs/cdn-links.html

Babel compiler

고급언어 -> 고급언어
javascript 로 결과물을 만들어주는 컴파일러입니다. 소스 대 소스 컴파일러 (transpiler)

라이브러리 추가

리액트 라이브러리 위에 오도록 추가

바벨컴파일러로 실행시키기

JSX

• jsx란?
  쉽게 말해 HTML 문법을 JavaScript 코드 내부에 쓴 것. 그것이 바로 JSX다!
  어렵게 말해 JavaScript eXtension.. JavaScript의 확장 버전이고 결론은 자바스크립트이다.

"React에서 HTML을 표현할 때, JSX를 사용한다. 외관상 HTML같은 마크업 언어를 리터럴로 입력하는 것으로 보이는데, 빌드 시 Babel에 의해 자바스크립트로 변환된다. 자바스크립트 코드를 HTML처럼 표현할 수 있기 때문에 용이한 개발이 가능하다." (나무위키曰)
즉, JSX는 자바스크립트 안에서 HTML 문법을 사용해서 view를 구성할 수 있게 도와주는 자바스크립트 문법

html과 달리 xml구문 규칙을 사용 -> 닫는 태그 필수...약간의 차이 있음
가상의 DOM(virtual DOM) : 아직 DOM 노드로 만들어지지 않은 순수 객체. 가볍고 빠름
jsx -> virtual DOM -> 화면에 rendering