[ CodePen ] 리액트(React) 사용 테스트

Codepen으로 React 작업해보자

매번 간단하게 테스트를 할때마다 프로젝트를 만들고 테스트를 하는것보다, 좋은 방법이 있습니다.

CodePen을 설정하는 것인데요, CodePen은 리액트 관련해서도 많은 라이브러리를 제공해줍니다. 지금 부터 바로 코드펜으로 기본적인 리액트 설정을 하겠습니다.

우선 new pen을 해주세요. Codepen을 어떻게 쓰는지 모르신다면, 아래 링크를 확인해주세요. 링크를 확인 해주세요.

2018/07/18 - [Site & Program ] - Codepen 사용

다음 상단 우측에 setting 버튼을 클릭해주세요.

1. 다음으로 리액트를  JavaScript에 설정을 해야합니다. JavaScript를 클릭합니다.

2. react 라이브러리와 react-dom 라이브러리가 필요합니다. 화면중간에 검색바에서 react를 검색후에 추가하고 , 다음으로 react-dom을 검색후 추가합니다.(react추가 /react-dom추가) 

이렇게 화면이 나오실거에요.

마지막으로 상단의 JavaScript Preprocessor에서 Babel을 선택합니다. Babel은  JSX를 사용 안하시면 추가를 하지않으셔도 됩니다. 

설정 완료 하셨다면  저장합니다.

간단하게 코드펜에서 리액트를 사용 해 보았습니다.