리액트 연습 codepen 세팅

우측 상단의 세팅에서

 

세팅을 누르면 아래와 같은 창이 나오는데

 

JS - 

JavaScript Preprocessor : Babel

Add External Scripts/Pens 에서 검색창에 react를 넣으면 실시간으로 react 관련 CDNjs(?)가 나옴

클릭하면 추가됨

 

영상보면서 공부중인데 4년전 영상이라 codepen이 다르게 생겼다

일단 나는 react와 react-dom을 추가했다

react 파일은 component

react-dom은 실제 dom에 렌더링을 하는 부분을 담당한다.

설정이 완료되었으면 save & close

바벨을 쓰는 이유는

구버전 브라우저를 지원하기 위해서 최신 자바스크립트 문법을 es5 형태로 변환하려고 이용