[React.js] Codepen 설정

기초 개념을 공부하기 위해 codepen.io 에 접속한다.

 

https://codepen.io/ 

 

codepen에서 React.js 환경설정을 한다.

 

Pen Setting

JavaScript Preprocessor를 None에서 Babel로 변경한다.

Add External Scripts/Pent에서 React와 React DOM을 추가한다.

 

변경 후

Babel 추가한 이유는 2015년에 업데이트된 자바스크립트 문법인 ES6를 사용하기 때문

ES6로 작성된 코드를 이전 문법인 ES5로 변환을 해주는 것이 Bable이다.

 

React 파일은 컴포넌트를 담당하고, React dom 파일은 실제 dom에 렌더링하는 부분을 담당한다.

 

 

오른쪽 상단의 Save 버튼을 눌러서 변경 내용을 저장한다.

 

 

 

 

'[InFlearn] React & Express를 이용한 웹 어플리케이션 개발하기' 강의를 참고하였습니다.