ES6의 기술로ReactJS+alt(flex)를 계수기의 견본으로 삼다

13803 단어 ReactJavaScriptflux

의 목적


Web+DB Press Vol.87 Flex 기사 좋긴 한데 샘플 코드가 fluxxor라서 ES6의class 등으로 쓸 수 있는alt로 다시 한 번 써 봤어요.
(ES6는 flexor에서 지원되지 않음)
참고로 잡지의 샘플 코드는 이쪽 "Emerging Web Technology 연구실".입니다.

파일 구성

.
├── dest
│   └── app.js
├── index.html
├── package.json
└── src
    ├── actions
    │   └── counter_actions.js
    ├── alt.js
    ├── app.jsx
    ├── components
    │   └── counter.jsx
    └── stores
        └── counter_store.js

package


reactify 대신 babelify 사용하기
pacage.json
{
  "devDependencies": {
    "alt": "^0.16.10",
    "babelify": "^6.1.2",
    "browserify": "^10.2.4",
    "react": "^0.13.3",
    "watchify": "^3.2.3"
  },
  "scripts": {
    "watch": "watchify -t babelify src/app.jsx -o dest/app.js -v"
  }
}


$ npm run watch

code


app.jsx
import React from 'react';

import CounterAppView from './components/counter.jsx';


React.render(
    <CounterAppView />,
    document.getElementById('app-container')
);
alt.js
import Alt from 'alt';
var alt = new Alt();

export default alt;
index.html
<!doctype html>
<html lang="ja">
    <head>
        <meta charset="utf-8">
        <title>Flux</title>
    </head>
    <body>
        <div id="app-container"></div>

        <script src="dest/app.js"></script>
    </body>
</html>
src/actions/counter_actions.js
import alt from '../alt';

class CounterActions {
    constructor() {
        this.generateActions(
            'plusCounter',
            'minusCounter'
        );
    }
}

export default alt.createActions(CounterActions);
constructor에는 적는 방법generateActions과 사용하는 방법this.dispatch 등이 있다.어쩌면 전선을 보는 것이 좋을지도 모른다.
src/components/counter.jsx
import React from 'react';
var AltContainer = require('alt/AltContainer');

import CounterActions from '../actions/counter_actions';
import CounterStore from '../stores/counter_store';


class CounterView extends React.Component {
    render() {
        return (
            <div>
                <span>count: {this.props.counter}</span>
                <div>
                    <button onClick={CounterActions.plusCounter}>+1</button>
                    <button onClick={CounterActions.minusCounter}>-1</button>
                </div>
            </div>
        );
    }
}


class CounterAppView extends React.Component {
    render() {
        return (
            <div>
                <AltContainer store={CounterStore}>
                    <CounterView />
                </AltContainer>
            </div>
        );
    }
}

 export default CounterAppView;
src/stores/counter_store.js
import alt from '../alt';
import CounterActions from '../actions/counter_actions';

class CounterStore {
    constructor() {
        this.counter = 0;

        this.bindListeners({
            handlePlusCounter: CounterActions.PLUS_COUNTER,
            handleMinusCounter: CounterActions.MINUS_COUNTER
        });
    }

    handlePlusCounter() {
        this.counter += 1;
    }
    handleMinusCounter() {
        this.counter -= 1;
    }
}

export default alt.createStore(CounterStore, 'CounterStore');
CounterActions.PLUS_COUNTER의PLUS_COUNTER액션스에 적힌 낙타 껍질이라도 움직일 수 있다.소문자 스네이크 상자라면 움직이지 않을 거예요.도대체 어떻게 된 일인지 원본 코드를 보는 것이 좋을 것 같다.

나타내다

$ python -m SimpleHTTPServer 8000
  • http://localhost:8000

    • 감상

  • 샘플이기 때문에 한 문서로 JS를 정리하고 싶은데 alt.createStore가 있기 때문에alt는 기본적으로 따로 쓰는 게 좋아요.어쨌든 실제 앱을 만들 때는 이렇다.

    • 참고 자료

  • http://gihyo.jp/magazine/wdpress/archive/2015/vol87
  • http://acdlite.github.io/flummox
    • Kubernetes에 Spring Boot 응용 프로그램 배포
    메모리 관리 블록(weak-strong dance)

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage