CodePen에서 React 개발환경 구축하기

아주 간단한 React 코드를 작성하는 경우 CodePen에서 작업이 가능합니다.

CodePen 간단한 사용방법은 여기서 확인 부탁드립니다.

---

예제 코드 추가

아래 코드를 복사해서 HTML과 JS에 추가합니다.

 

HTML

<div id="root"></div>

 

JS

const element = (
  <div>
    <h1>Hello, react!!!!!</h1>
  </div>
);
ReactDOM.render(element, document.getElementById("root"));

CodePen에서 React 설정이 되지 않아 에러가 발생합니다.

아래 순서대로 CodePen에서 React 설정을 합니다.

---

CodePen에서 React 설정

1. Settings 선택

 

2. JavaScript Preprocessor에서 Babel 선택

Babel 컴파일러는 JavaScript 최신 문법이 모든 브라우저에서 호환이 되도록 변환하는 컴파일러입니다.

 

3. 외부 리소스를 추가합니다.

Add External Scripts/Pens

script 태그에 외부 스크립트(라이브러리)를 추가하는 것과 동일합니다.

 

Add Packages

npm을 import 합니다.

 

3-1. Add External Scripts/Pens로 설정

라이브러리 검색

- React 17.0.2 버전이 문제인 건지 CodePen이 문제인지 모르겠는데, 17.0.2부터 ReactDOM.render 사용 시 에러가 발생합니다. 제가 CodePen을 사용을 중단하게 된 가장 큰 이유입니다.

react라고 검색하면, 라이브러리들이 검색되며 선택 가능합니다.

하지만, 17.0.2 버전은 지금 문제가 많아 보이므로 아래 2개의 url을 복사해서 붙여 넣기 합니다.

 

https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js

https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js

 

라이브러리 추가

 

실행

설정 후 정상적으로 실행이 됩니다.

See the Pen CodePen_React_Setting_Lib by JaeSung2386 (@jaesung2386) on CodePen.

3-2. Add Packages로 설정

검색

 

NPM 추가

자동으로 JS에 추가됩니다.

 

실행

마찬가지로, 설정 후 정상적으로 실행이 됩니다.

See the Pen CodePen_React_Setting_Import by JaeSung2386 (@jaesung2386) on CodePen.