create-react-app +react-hot-loader 사용하기

create-react-app + react-hot-loader 사용하기

Install

$ :sudo npm install -g create-react-app                  

$ create-react-app myreact-project

$ cd myreact-project

Customizations

앱을 성공적으로 설치헜으니 사용자 정의 설정을 해봅시다.

$ npm run eject

$ npm install --save-dev react-hot-loader

$ vi package.json

 ...

"babel": {

  "presets": [

    "react-app",

    "stage-1"

  ],

  "plugins": [

    "react-hot-loader/babel"

  ]

},

 ...

$ vi config/webpack.config.dev.js

...

module.exports = {

  ...

  entry: [

    'react-hot-loader/patch',

 ...

$ vi src/index.js

import React from 'react';

import ReactDOM from 'react-dom';

import './index.css';

import App from './App';

import registerServiceWorker from './registerServiceWorker';

ReactDOM.render(<App />, document.getElementById('root'));

registerServiceWorker();

if(module.hot) {

  module.hot.accept();

}

$vi src/app.js

        ...

 <p>

          <button onClick={()=>{this.setState({name: 'joony'})}}>Click Me!</button>

          <h2>Hello! {this.state.name}</h2>

</p>

       ...

$npm start

open your webbrowser connect yourhost

클릭을 하면  아래와 같이 Joony라는 local state가 보여지고 app.js파일을 수정해도 local state는 안사라지며 

default state만 변경되어 잘 작동하는 것을 볼수 있다.

what is babel

Babel is a JavaScript transpiler that converts edge JavaScript into plain old ES5 JavaScript that can run in any browser (even the old ones).

Babel은자바 스크립트를 모든 브라우저 (예전 브라우저)에서 실행될 수있는 일반 예전 ES5 JavaScript로 변환하는 JavaScript 변환기입니다.

$babel-node test.js    // before transpile by babel 

$npm install --save-dev babel-cli

$npm install --save-dev babel-preset-latest

$babel --presets latest test.js -d build

$cd build

$node test.js         // after transpile by babel

If you compile the es6 file to a node other than babel-node, you will see es6 SyntaxError: Unexpexted token ....

만약에 es6 파일을 babel-node 가 아닌 node로 컴파일할 경우 es6 SyntaxError: Unexpected token ... 을 보게 될 것이다.