@ -46,7 +71,7 @@ React를 시작하는 가장 빠른 방법은 다음의 Hello World JSFiddle 예
</html>
```
JavaScript 안에 보이는 XML 구문은 JSX라고 합니다; 더 자세한 내용은 [JSX syntax](/react/docs/jsx-in-depth-ko-KR.html)을 확인하세요. 일반적인 JavaScript로 번역하기 위해 `<script type="text/jsx">`를 사용하고 `JSXTransformer.js`를 포함하는 것으로 실제로 브라우저에서 변환작업을 수행합니다.
JavaScript 안에 보이는 XML 구문은 JSX라고 합니다; 더 자세한 내용은 [JSX syntax](/react/docs/jsx-in-depth-ko-KR.html)을 확인하세요. vanilla JavaScript로 번역하기 위해 `<script type="text/babel">`를 사용하고 Babel을 포함하는 것으로 실제로 브라우저에서 변환작업을 수행합니다.
### 파일의 분리
@ -69,19 +94,20 @@ ReactDOM.render(
### 오프라인 변환
먼저 커맨드라인 도구를 설치합니다. ([npm](https://www.npmjs.com/) 필요):
먼저 [Babel](http://babeljs.io/) 커맨드라인 도구를 설치합니다. ([npm](https://www.npmjs.com/) 필요):
```
npm install -g react-tools
npm install --global babel
```
그다음, `src/helloworld.js` 파일을 일반 JavaScript 파일로 변환합니다:
```
jsx --watch src/ build/
babel src --watch --out-dir build
```
수정할 때마다 `build/helloworld.js` 파일이 자동생성됩니다.
수정할 때마다 `build/helloworld.js` 파일이 자동생성됩니다. 더 깊이 사용하고 싶으면 [Babel CLI documentation](http://babeljs.io/docs/usage/cli/)를 읽어보세요.
```javascript{2}
ReactDOM.render(
@ -92,14 +118,15 @@ ReactDOM.render(
아래의 내용대로 HTML 파일을 업데이트합니다:
```html{7,11}
```html{8,12}
<!DOCTYPE html>
<html>
<head>
<metacharset="UTF-8"/>
<title>Hello React!</title>
<scriptsrc="build/react.js"></script>
<!-- Babel는 이제 불필요합니다! -->
<scriptsrc="build/react-dom.js"></script>
<!-- No need for Babel! -->
</head>
<body>
<divid="example"></div>
@ -108,10 +135,6 @@ ReactDOM.render(
</html>
```
## CommonJS를 원하시나요?
만약 React를 [browserify](http://browserify.org/), [webpack](https://webpack.github.io/)이나 기타 CommonJS와 호환되는 모듈시스템과 함께 사용하고 싶다면, [`react` npm 패키지](https://www.npmjs.com/package/react)를 사용하세요. 그 외에도 `jsx` 빌드툴은 아주 쉽게 CommonJS 외에도 대부분의 패키징 시스템에 통합될 수 있습니다.
## 다음 단계로
더 알아보려면 [튜토리얼](/react/docs/tutorial-ko-KR.html)과 초심자용 키트의 `examples` 디렉터리에서 다른 예제들을 확인해 보세요.