learnyoureact/exercises/hello_react/problem.ko.md

Learn React.js and server side rendering!

먼저 `Hello World`를 출력해 봅시다!

전에 준비로 이번 작업 폴더 를 만들고 그 안에 이동 합시다.
그 폴더 에 [package.json](https://docs.npmjs.com/getting-started/using-a-package.json) 을 작성 합시다.
package.json 하여 npm 은 어느 폴더에 패키지 를 설치 하거나 판단 합니다.
`learnyoureact`를 좋아하는 이름으로 바꾸셔도 됩니다.

`$ mkdir learnyoureact; cd learnyoureact; npm init -y;`

필요한 모듈을 설치하려면 밑의 명령을 실행해 보세요.

`$ npm install --save react react-dom express body-parser express-react-views@0.9.0 babel@5.8.23`

이제 `node_modules` 디렉터리가 만들어진 것을 볼 수 있습니다.

그런 다음, `program.js`를 만듭니다 폴더 구조는 다음과 같습니다.

```
learnyoureact
├── node_modules/
├── package.json
└── program.js
```

`program.js`에 다음 코드를 복사하세요.

```
var express = require('express');
var app = express();

app.set('port', (process.argv[2] || 3000));
app.set('view engine', 'jsx');
app.set('views', __dirname + '/views');
app.engine('jsx', require('express-react-views').createEngine({ transformViews: false }));

require('babel/register')({
    ignore: false
});

app.use('/', function(req, res) {
  res.render('index', '');
});

app.listen(app.get('port'), function() {
  console.log('Express server is up on port 3000');
});
```
위의 코드는 React 컴포넌트를 렌더링을 하는 작은 Express 서버의 코드입니다.
누군가 `/`에 들어오면 `views/index.jsx`을 렌더합니다. 이 프로그램은 `express-react-views` 모듈을 사용합니다.


다음으로 `program.js`이 있는 디렉터리에서 `views` 디렉터리를 만들어, 그 안에서 `index.jsx`를 만들어 주세요.
`index.jsx`에는 다음과 같은 내용이 들어갑니다.

```
import React from 'react';

export default class TodoBox extends React.Component{
  render() {
    return <div className="todoBox">
        Hello, world!
      </div>
  }
}
```

위의 JavaScript 안에 XML을 작성하는 듯한 코드가 React의 JSX라 불리는 방법입니다.
다르게 적는 방법도 있지만, 이 워크숍에서는 전부 JSX로 작성하도록 하겠습니다.

React.js 문서는 여기서 찾으실 수 있습니다. https://facebook.github.io/react/docs/getting-started-ko-KR.html

JSX 문법에 관한 더 자세한 내용은 여기서 읽으실 수 있습니다. https://facebook.github.io/react/docs/jsx-in-depth-ko-KR.html

준비가 되면, `node program.js`를 실행해 `http://localhost:3000`으로 들어가, 실제로 HTML이 출력되는 것을 확인하세요.
그런 다음, `learnyoureact verify program.js`를 실행하세요.