[React.JS] CodePen, create-react-app으로 React.JS 개발하기

CodePen

---

CodePen을 이용하여 React.JS를 이야기할 계획입니다. CodePen을 이용하면 별도의 설치 없이 브라우저에서 React.JS 코드를 작성하고 확인 할 수 있습니다. 사용하는 법은 아주 간단합니다. 회원가입 한 후 Pens를 생성하여 간단한 세팅만 설정하면 끝!

JavaScript 설정

Settings에서 JavaScript Preprocessor에 Babel로,

Add External JavaScript에 https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react.js와 https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react-dom.js,

react.js와 react-don.js를 포함해주면 끝이납니다.

CodePen으로 예제 확인하기

create-react-app

---

create-react-app을 사용하면 React를 사용하기 위해 번거롭고, 복잡한 세팅을 몇 줄로 최소화 하여 설정할 수 있습니다.

먼저 npm이 설치되야 합니다. npm은 https://nodejs.org/en/#download 에서 설치하실 수 있습니다.

npm install -g create-react-app
create-react-app hello-world

이렇게 2줄이면 hello-world라는 React 프로젝트의 개발 환경 설정이 끝나게 됩니다.

cd hello-world
npm start

hellop-world 폴더로 이동하여, npm start를 하게 되면 React 프로젝트가 실행되는 것을 확인 할 수 있습니다.

npm start가 실행되면, 3000번 포트로 react 웹페이지가 시작되는 것을 확인 할 수 있습니다.