JSFiddle을 이용해 React 작성하기

이 챕터에서 설명한 기본적인 셋업 방법은 JSFiddle을 이용해 온라인에서도 사용할 수 있습니다. JSFiddle은 온라인에서 React를 간단하게 사용할 수 있게 만들기 위해 앞서 소개된 세 가지 자원을 똑같이 사용하고 있습니다.

• react-with-addons.js (react.js의 더 새로운 버전)
• react-dom.js
• browser.js

아래는 이 챕터에서 계속 걸쳐 사용되었던 HelloMessage 컴포넌트가 내장된 JSFiddle입니다. "results" 탭을 클릭하면 React 컴포넌트가 DOM에 렌더되는 걸 볼 수 있습니다. 코드를 수정하려면 "edit with JSFiddle"를 클릭하면 됩니다.

source code

"Babel" 탭은 이 탭에서 작성된 JavaScript가 Babel에 의해 변환될 것이라는 사실을 보여줍니다. (직접적으로 browser.js를 사용하고 있지 않더라도 비슷합니다.) "Resources" 탭은 JSFiddle이 react.js와 react-dom.js 파일을 사용하고 있다는 것을 보여줍니다.

이 챕터를 읽고 나면, browser.js를 이용해 Babel과 React를 셋업하는 기본적인 필요한 것을 이해했으리라 생각됩니다. 그리고 JSFiddle이 분명하게 보여주지는 않았지만, JSFiddle이 React를 실행시키기 위해서는 정확히 똑같은 셋업 과정이 이뤄집니다.

JSFiddle은 Babel에 의해 변환된 React 코드들의 결과를 보여주기 위해 이 책의 남은 부분들에서 계속해서 사용될 예정입니다.