Codepen 에서 React 코드 작성하기

간단한 기능들을 구현하면서 연습(？)을 하려고 하는데,

빠른 환경 설정과 즉각적으로 코드의 변화에 따른 UI 상의 변화를 확인할 수 있다는 장점을 떠올리며,

Codepen에 오랜만에 들어왔다.

 

1. 새로운 프로젝트 생성

프로필 이미지를 클릭해 새로운 프로젝트( New Pen )를 만들도록 하자.

 

2. 리액트 환경 설정하기

 

그 다음 Settings 에 들어가서, JS 세팅 페이지로 이동한다.

여기서 두 작업을 진행한 뒤에, Save & Close 버튼을 누르면 끝난다!

• 첫째로, JavaScript Preprocessor 셀렉트에서 Babel을 선택한다.
• 둘째로, Add Packages 에서 react를 검색해서 react와 react-dom을 추가한다. (JS 코드 칸에 import가 새로 추가된다.)

react, react-dom 설치하기

 

3. 리액트 실행을 위한 초기 코드(?) 작성하기

 

자동으로 세팅된 리액트 환경의 초기 모습(코드)를 떠올리며, 동일하게 작성하면 된다.

이래서 항상 코드를 구석구석 봐둬야 한다..

<!-- html -->
<div id='root'></div>

/** javascript */
ReactDOM.createRoot(document.getElementById('root')).render(
<Subscription/>
)

function Subscription () {

return (
    <div>
  Hello, world!
  </div>
)
}

 

 

이렇게 작성을 완료하면,

밑에 UI 를 확인하는 부분에서 " Hello, world！" 가 보인다.

 

html,javascript 작성

 

사실 이게 어려운 내용도, 대단한 내용도 아니지만, (너무 기초적..)

 

항상 자동으로 세팅된 프로젝트에서 코드를 작성하다가 이렇게 무에서 부터 리액트를 설정하려고 하니 순간,

"어떻게 하더라.."

라는 생각이 들었기 때문에, 이렇게 게시물을 작성한다. 

 

이제 다시 기능 구현을 하러 가야지 ٩꒰⍢ ꒱۶⁼³₌₃ 

 

끝！

---

참고

https://sanghee01.tistory.com/36