react -- babel 설정 기초
참고 : http://www.saltycrane.com/blog/2016/01/how-set-up-babel-6-with-react-mac-os-x-command-line-only/
http://jamesknelson.com/the-six-things-you-need-to-know-about-babel-6/
목표 : react 에서 babel 만 개발 pc 로컬에 설치한후, react 간단한 예제 만들기.
--> webpack 은 사용안하므로, require() 사용 못함.
--> 그러므로, react, react-dom 은 CDN 링크 사용함.
1. package.json
{
"name": "application-name",
"version": "0.0.1",
"scripts": {
"babelbuild": "babel hello.js -o hellobabel.js"
},
"babel": {
"presets": ["react", "es2015"]
},
"devDependencies": {
"babel-cli": "^6.9.0",
"babel-preset-es2015": "^6.9.0",
"babel-preset-react": "^6.5.0"
}
}
babel-preset-es2015 --> ecma2015 문법 사용하기 위해 설치.
babel-preset-react ---> react jsx 문법 사용하기 위해 설치
< 참고 사항 >
.babelrc 를 따로 만들수 있다.
{
"presets": ["react", "es2015"]
}
--> .babelrc 대신에 package.json with a "babel": {} 를 사용해도 된다.
( http://babeljs.io/docs/usage/babelrc/ )
예 )
{
"name": "my-package",
"version": "1.0.0",
"babel": {
// my babel config here
}
}
2. index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Hello World</title>
</head>
<body>
<div id="container"></div>
<script src="https://fb.me/react-0.14.7.min.js"></script>
<script src="https://fb.me/react-dom-0.14.7.min.js"></script>
<script src="./hellobabel.js"></script>
</body>
</html>
--> hello.js 를 바로 사용할수 없음. (jsx, ecma2015 를 브라우저에서 해석 못함)
--> babel 을 사용하여 es5 문법으로 변환해야함.
--> 따라서 "babel hello.js -o hellobabel.js" 명령어로 컴파일한 hellobable.js 를 사용한다. ( package.json 에 설정해둠.)
2. hello.js
class MyComponent extends React.Component {
render() {
return (
<h1>Hello World</h1>
);
}
}
ReactDOM.render(
<MyComponent />,
document.getElementById('container')
);
$ npm install
--> package.json 의 dependency 모듈 설치한다.
< 참고사항>
package.json 만들면서, 현재의 babel 모듈 버전으로 설치 할 수있다.
$ npm install babel-cli --save-dev
$ npm install babel-preset-es2015 --save-dev
$ npm install babel-preset-react --save-dev
--> package.json 의 "devDependencies" 에 자동 기록됨.
$ npm run babelbuild
--> package.json 의 "scripts" 항목의 babelbuild 를 실행한다.
$ open index.html
--> 웹 브라우저에서 index.html 실행함.
<< 전체 소스 >>
'React, React Native' 카테고리의 다른 글
| React -- Redux 기본 개념 정리 (0) | 2016.05.07 |
|---|---|
| React -- Flux 기본 개념 정리 (0) | 2016.04.22 |
| React -- 기초 개념 정리 (0) | 2016.04.18 |
| React -- WebStorm 10 설정하기 (0) | 2016.04.18 |
| React -- 주요 변천사 살펴보기 (0) | 2016.04.18 |
