완전 처음 접한다.
들어는 보았지만 어떻게 시작해야할지 찾아다니면서 엄청 해맸다.

내가 생각하기엔 결론은 두가지 방법이다.
중요한건 ES6, JSX다.

실서버에 올려놓고 ES6와 JSX를 변환을 하느냐?  아니면 올려놓기 전에 변환하고 올리느냐 라는 방식으로 난 구분했다.

올려놓고 번들링 하는 방식의 구축 방법은 http://yumere.tistory.com/78
그렇지 않고 로컬에서 npm으로 번들링하여 완성하고 구축하는 방법은 https://velopert.com/814
이렇게 두가지 방식으로 난 구분을 했고, 후자의 방식으로 일단 천천히 익혀보려고 한다.

npm 이 사용 가능해야하니 node.js 는 설치되어 있다고 생각하고 진행한다.
짧게 순서대로만 적어봐야겠다.

1. 일단 프로젝트 폴더 하나 만들고 cmd를 실행해서 그 디렉토리로 이동하여 아래 명령어들을 입력한다.
2.  npm init  을 실행해서 이제 프로젝트 제작을 진행하자.  자동으로 package.json 이 생성됨
3. babel, webpack, webpack-dev-server 를 글로벌 옵션으로 설치

   npm install -g babel webpack webpack-dev-server

4. 프로젝트 디렉토리에서 react, react-dom 의존성 패키지 설치

   npm install --save react react-dom

5.  babel, 로더들을 사용할 플러그인들 설치

   npm install --save-dev babel-core babel-loader babel-preset-react babel-preset-es2015 webpack webpack-dev-server react-hot-loader

   webpack, webpack-dev-server 로컬에 다시 설치 이유 : -hot 옵션 사용하려고, 글로벌로 먼저 설치한 이유는 커맨드를 글로벌 커맨드로 쉽게 작성하려고~

6.  이건 미리 설치하는 건데 차후에 작업하는데 배열,객체 추가/삭제/변경할 때 유용하게 쓰기 위한 플러그인과 es6 spread 연산을 위한 플러그인이다.

   npm install --save react-addons-update babel-preset-stage-0

7. 설치가 끝나면 package.json 열면 설치된 정보들이 나온다.  그안에 scripts는 수정해준다.  나중에 테스트 서버 돌릴 목적이다.

   {
     "name": "reactproject2",
     "version": "1.0.0",
     "description": "",
     "main": "index.js",
     "dependencies": {
       "react": "^15.5.4",
       "react-dom": "^15.5.4"
     },
     "devDependencies": {
       "babel-core": "^6.24.1",
       "babel-loader": "^6.4.1",
       "babel-preset-es2015": "^6.24.1",
       "babel-preset-react": "^6.24.1",
       "react-hot-loader": "^1.3.1",
       "webpack": "^2.4.1",
       "webpack-dev-server": "^2.4.2"
     },
     "scripts": {
       "dev-server": "webpack-dev-server"
     },
     "author": "",
     "license": "ISC"
   }

   위에 scripts 안에 dev-server 가 추가한 것이다.
   테스트 서버 돌릴 때 cmd에 npm run dev-server  치면 웹브라우저로 로컬에서 테스트 가능하게 하려고 한다.

8.  프로젝트 폴더 루트에 webpack.config.js 파일 하나 만들어서 아래 내용 넣는다.

   var webpack = require('webpack');
   
   module.exports = {
       entry: './src/index.js',
   
       output: {
           path: __dirname + '/public/',
           filename: 'bundle.js'
       },
   
       devServer: {
           hot: true,
           inline: true,
           host: '0.0.0.0',
           port: 4000,
           contentBase: __dirname + '/public/',
       },
   
       module: {
           loaders: [
               {
                   test: /\.js$/,
                   loaders: ['react-hot-loader',
                       'babel-loader?' + JSON.stringify({
                           cacheDirectory: true,
                           presets: ['es2015', 'react']                                                     
                       })],
                   exclude: /node_modules/
               }
           ]
       },
   
       plugins: [
           new webpack.HotModuleReplacementPlugin()
       ]
   }

   간략하게 설명하자면, ./src/index.js 에 다른 js들을 불러올꺼다. 그 불러올 것들과 어디에 바인딩할지 다음 말그대로 인덱스해주는 js다. 그 안의 것들을 변환 및 합쳐서 ./public/bundle.js 로 뽑아낼 것이다.

   그럼 우리는 html에서 bundle.js를 불러와주면 된다.
   위에 devServer나  module 은 왜 저렇게 설정하였는지 알고 싶으면 아래 영상을 참고하자
   [youtube_sc url="gSwO2S-Q88s"]

개인적으로 velopert 님의 강좌가 나에게 제일 이해하기 쉬웠다.
유투브에 velopert님의 리액트 강좌 재생 목록은 https://www.youtube.com/playlist?list=PL9FpF_z-xR_GMujql3S_XGV2SpdfDBkeC 이다.

진짜 쌍따봉을 드리고 싶다. (눈물나게 감사드립니다. ㅠ)